网站搭建学习网：新手从0到上线的完整学习路径

网站搭建学习网这个概念, 不像是某一门单独的课程内容, 它更类似于一种结构化的学习路线, 这条路线的具体流程是从写代码开始, 接着去建立项目, 最后才能完成部署上线这个环节。

对于那些没有任何基础的人来说, 这套方法会把诸如 HTML、CSS、JavaScript 还有后端技术以及部署操作等知识点, 拆解成了可以分阶段执行的任务, 这样做比零散地去刷视频学习的效率要高很多。

至于这个方法到底是否适合你这个问题, 主要是取决于你的具体目标是什么: 如果只是想建立一个用于个人展示的网页, 大概 2 到 3 周的时间就能够让网页上线；但是如果你想做一个带有各种交互功能的商业站点, 那么通常需要花费 2 到 4 个月的时间。

接下来我们会按照先选择网络、然后再进行学习、最后再正式上线这一个完整的流程来一步步地进行拆解, 在拆解的过程中, 会附带给出明确的判断标准以及一些需要注意的踩坑提醒。

一、网站搭建学习网包含哪些核心模块

根据大家都能看到的公开信息来整理一下, 那些比较主流的, 专门用来学习怎么建网站的平台（比如 MDN Learn 这个, 还有 FreeCodeCamp 里面那个关于响应式设计的部分）, 这些路子一般来说, 通常会包含五个不同的阶段或者层次:

前两层是纯粹的前端内容, 从第三层开始就需要涉及调试思维的运用, 到了第四层则必须要去理解服务器请求流程是怎么回事, 而第五层则是偏向于工程方面的具体操作情况。多数人按照学习的网站通常是把这个顺序给列出来的, 如果发生了跳级的现象, 往往会导致在后面进行学习的时候出现卡住的情况。

二、选学习网的 5 个判断标准

我们根据官方文档和课程大纲进行对照, 建议大家使用以下标准来进行筛选, 不要仅仅看“评分”或者“好评数”。

1. 是否能够覆盖到部署这个环节呢。仅仅只是教授 HTML 和 CSS 的知识, 但是不讲解 Git 以及如何让网站托管起来的办法的话, 对于“上线”这样一个最终目标来说是不完整的。

MDN Learn 这个平台的完整学习路径一直到 HTTP 原理和浏览器的存储机制为止就停止不前了, 因此学习者是需要自己去补充关于部署这部分内容的。

2. 项目驱动还是纯语法。 每一章的后面是有可以让提交代码的练习, 这个像 FreeCodeCamp 的那个构建一个作品的环节, 这种形式的留存率, 比那种纯视频讲解要来得高。

3. 更新频率 浏览器标准以及框架的迭代速度比较快, 我是按照公开的资料来进行整理的, 如果发现有一个学习网站超过12个月的时间都没有进行过更新, 那么这个网站里面的CSS和JS示例有可能引用的那些API已经是被废弃掉了, 比如说包括IE兼容写法这一类的内容在其中。

4. 难度标注方面是不是做到了真正的透明化。 各个模块里面有没有清楚地标出前置依赖关系。如果在学习第三章的时候需要去补齐第五章的知识, 那么这种学习路径的设计肯定是有问题的, 不符合逻辑的。

5. 免费部分能够覆盖的范围究竟有多广,这是需要考虑的关键问题。 有一些平台规定前百分六十到百分七十的内容是免费的, 只有核心的项目需要进行收费。建议大家先把免费的这段路程完整地跑完, 然后再做出决定, 这样做可以避免在完成预付款之后, 才发现自己的节奏并不匹配。

三、从 HTML 到上线的推荐时间线

这部分内容, 我们是参照了公开的授课详细安排以及大家通常的学习进度来弄的, 仅仅是给个参考例子罢了, 因为每个人本身具备的基础是不一样的, 所以时间上的差距是会变得很大的。

在第1到第2周这个时间段里, 需要去搞那个HTML的语义化问题, 然后把CSS的基础知识给学一下, 其中盒模型是什么东西, 选择器到底怎么用, 还有Flexbox这个技术是怎么回事, 都要弄明白, 最后的产出物就是一个那个固定布局的静态页面, 是静止不动的那种页面。

在第 3 到第 4 周这个时间段里, 需要去处理响应式布局的问题, 要去学习 CSS 动画的用法, 还要把 JavaScript 的基础知识给掌握住, 其中包括了变量是怎么定义的、函数是怎么编写的, 以及怎么通过文档对象模型来查找元素。最终的产出结果是一个针对移动端设备进行适配的作品展示页面。

进入第5–6周:, 学习内容转向 JavaScript 进阶部分, 需要掌握的知识点包括事件处理、fetch 技术以及 localStorage。最终的产出任务是一页带有简单交互功能的网页, 具体例子像表单校验或者 Tab 选项卡切换。

从第7周到第8周,这部分内容是选定的:主要学习基础的后面端概念, 还有数据库怎么开始用, 可以选择 SQLite 或者 Supabase。最终做出来的效果是: 用户可以提交一个完整的小站子的数据。

第9–10周:这部分内容涉及到 Git 的工作流怎么弄, 还有域名绑定这件事是怎么回事。另外, 还要考虑静态托管的问题, 或者使用 Vercel, 以及 Netlify 来部署代码, 同时需要完成 HTTPS 的配置。最终的产出结果是一个可以直接在公网访问的站点。

多数人学习网络标注的时候, 推荐的每周投入量是在10到15小时这个范围里。要是每周投入的时间低于5小时, 那么一旦之后想重新开始继续学的话, 所要付出的恢复成本是很高的。

四、容易踩的坑与适用边界

存在着那种以为学完视频教程就能立刻动手操作的幻觉。 看完了关于 Flexbox 的课程内容, 并不代表你就有能力独立自主地完成一个复杂页面的排版布局。

根据已经整理好的公开教学实践资料来看, 当你刚刚学习完任何一个基本概念的时候, 你至少还需要通过三到五个不同的变体练习, 才能够在身体上面形成稳定的肌肉记忆。如果你只是在旁观看而没有进行实际的书写操作, 那么在两个礼拜之后, 你对这些知识的遗忘比例将会超过了百分之七十。

直接上框架（React/Vue）跳过原生JS。 如果连 DOM 还有事件循环这个基础, 你都没有的话去写组件, 遇到渲染问题你是无法定位的。建议至少完成原生 JS 的 60 天或者说是达到 200 行代码量之后, 再来碰这个框架。

学习网之间内容存在重复的这个问题。 与此同时, 一边兼顾着两个平台, 两边的进度就会发生互相冲突的情况。建议选择一个作为主要学习的方向, 对于另一个平台, 就仅仅把它当作查阅字典的工具来使用。

适用边界: 前面提到的这些路线, 是给那种独立开发者用来从零开始搭建网站的这种情况的。要是你的目标是想用像 WordPress 或者 Shopify 这样的 cms 系统来快速地开一家店的话, 那么你在网中学习前端代码这一块的时间大概只占百分之二十, 也就是两成左右。

这时候把重点应该去转移到模板的定制作和插件配置上面去, 这样的话整个路径就完全变成另外一个样子了。

五、免费与付费的取舍

免费的资源, 比如说、还有, 这些完全足够把前端的百分之八十的知识都覆盖到了。付费的学习网站, 比如像以及上面的那些课程, 它们的额外价值主要是在于能够给人提供一个完整的项目脚手架, 然后还可以得到代码评审方面的反馈, 再加上社区里的答疑帮助。

如果一个人的自律性是比较强的, 并且也能够自己去找那些报错信息, 那么免费的这部分内容是在性价比上面会变得更高一些的；倘若在某个相同的程序错误上卡住了, 并且超过了三天的时间仍然是没有办法解决的, 那么付费社区的答疑通常能够节省时间的。是不存在所谓的必须花费一定的金额才能够学会的这个门槛的。

FAQ

把那个叫做网站搭建的学习网里面的课程全部学完之后, 到底是不是能够立马就去接那些单子来赚钱呢?

在学习完成了路径规划里前六个星期的那些事情, 也就是把HTML、CSS还有JavaScript, 再加上响应式设计这一部分都给学透了之后, 你大概就可以去接一些需要制作静态网页页面以及加入一点点简单交互功能的活儿了。

但是如果这个项目里面涉及到什么后端的处理逻辑, 还有数据库的连接和查询，或者是用户身份体系验证加上订单管理这些比较复杂的事务的话, 那你还是得回去把第四个阶段里的内容给补足才行, 或者就得清清楚楚地、明明白白地告诉你的客户你自己目前能干到什么程度, 别让人误解了你的能力范围到底在哪。

那些从来没有写过代码的、完全零基础的新手用户, 究竟应该选择从哪一个具体的初始步骤出发呢?

请您务必从MDN Learn平台的《HTML基础》这一课程模块的第一页内容开始学习, 并且绝对不要跳过任何章节。在最初的两周时间里, 请严格按照要求只进行标记制作以及样式调整方面的练习, 千万不要去触碰JavaScript代码, 这样做可以有效地降低您在初期遇到的挫败感。

请问学习平台上的那个项目需要全部做完吗。

不需要把所有内容都做满, 只要在每个环节里面挑出最够得上那个目的的一到两桩事去办好就行。要是啥都干完, 用掉的时间就会变成原先的两倍那么多, 但是多花力气所换来的好处却是一点点变少。根据在网上能找到的那些信息来看, 做完整体里面的六成的那部分事情, 就可以把最要紧的那些规则条文全都覆盖到了。

学完一个学习网后如何检验水平？

按照关于部署环节的具体标准来进行自我检查, 看看自己能不能够完全独立地从无到有去搭建一个网站, 这个网站需要包含响应式布局, 需要有至少两个 JavaScript 交互功能, 还要有 Git 版本管理的记录, 并且该网站在线上环境必须是可访问的状态, 在整个建站的全过程中, 不可以依赖人工智能来帮助代码编写, 如果上述流程都能够顺利跑通, 那就意味着已经达到了能够进行独立建站的水平。

参考资料

1. MDN Web Docs – “学习 Web 开发”路径：https://developer.mozilla.org/zh-CN/docs/Learn

2. FreeCodeCamp – 响应式网页设计（Responsive Web Design）认证：https://www.freecodecamp.org/learn/

3. 根据W3C_html5_规范（2014）。https://www.w3.org/TR/2011/REC-html5-20140403/

这篇文章的内容，是基于上面提到的那个官方文件整理出来的, 课程的时长和模块的划分, 会随着各个平台的更新而可能有变动, 要以你访问的时候看到的那份最新的大纲为准。

要是发现里面的信息过时了, 非常欢迎大家通过页面底部的位置, 找到那个“纠错反馈”的通道, 把问题指出来。本文不包含任何职业方面的建议, 也不包含任何投资方面的建议。