第一个阶段，网页重构阶段

这个阶段的主要目标是用HTML和CSS这两项技术还原UI设计师的UI设计稿。

在做项目时，一般是由UI设计师用Photoshop设计好页面，利用Photoshop的功能切好我们做页面要用的图形，并用像素大厨等工具标注好各个元素的距离、大小、颜色等等。比如：

我们前端拿到这个图之后，就开始用 HTML、CSS 技术写页面代码，完成之后在浏览器上浏览一下，力争做到跟UI设计稿一致。这就是所谓还原UI设计师的UI设计稿。

当然，我们自学的时候，就不可能有UI设计师给你提供UI设计稿。那该怎么办呢？很简单，找个你觉得比较酷炫的网站，用截图工具把页面完整截下来，然后用像素大厨标注一下。如何标注、如何切图，你去像素大厨官网(https://www.fancynode.com.cn/pxcook)看就行了，上面有详细的教程。

所以我们学前端的第一步，就是要掌握HTML、CSS。那么HTML、CSS怎么学呢？

首先我们搭建好开发环境。你需要安装一个编辑器，我们就用目前最好用的Visual Studio Code(https://code.visualstudio.com/)好了。安装好VS Code后，网上找一下相关教程，装一些提高开发效率和保证代码质量的插件。然后装上浏览器，推荐 Google Chrome或者Microsoft Edge。学HTML、CSS，有这两样工具基本就可以开始了。

HTML的学习相对很简单，主要是学习下面这个HTML5元素周期表上的元素如何定义网页的结构。

学习教程，建议就看 Mozilla 开发者中心（MDN）上的 HTML 教程(https://developer.mozilla.org/zh-CN/docs/Web/Tutorials)。不需要买什么参考书。另外，W3C 上的 HTML5 规范(https://www.w3.org/TR/html52/)也要经常翻阅。

学习 HTML，关键是理解 Web 语义化的概念，能写出干净的页面结构。知道浏览器是如何解析HTML文档的，知道DOM的概念。知道Doctype的作用，标准模式、怪异模式是咋回事。

HTML学完了，该学习让网页好看起来的CSS了。

CSS的学习，相对HTML来说，难度比较大，知识点相对也比较多。且看下面的CSS知识点思维导图。

在前端技术 HTML、CSS、JavaScript 中，HTML 就那么多内容，掌握起来很快。JavaScript 是一门编程语言，编程语言的学习是成体系的，循序渐进学习即可。最难学的就是 CSS。为什么这么说呢？首先，CSS 属性具有正交性。多个 CSS 属性交叉在一起使用时，相互作用相互影响后会出现什么效果，CSS 规范上是没法全部写出来的。其次，CSS 是一门声明式语言，我们写代码时候，只告诉系统我们希望出现什么结果，但是一个属性的属性值最终被浏览器渲染出来是什么样的，需要经过多个步骤的计算。比如，我们声明 `color: red`，在浏览器上展现出来的字体颜色经过属性值的计算过程，最终可能就不是红色。你要确定设置一个属性后最终的效果，要深入理解 CSS 层叠机制、继承机制、CSS 属性值的计算过程等等知识，头大啊！

初学者建议买本书《CSS实战手册第四版》，这本书比较系统全面，很适合初学者。跟着这本书，配合着 MDN 上的 CSS 教程(https://developer.mozilla.org/zh-CN/docs/Web/Tutorials)以及 W3C 上的 CSS3 规范(https://www.w3.org/TR/css/），把 CSS 的基础知识学完。然后再买《CSS揭秘》、《CSS世界》，继续提升一下。

CSS 的学习注重实战，找十来个酷炫一点的着陆页，一个一个写出来。然后找几个页面比较多的网站，用上预处理器、CSS 架构，试着编写可维护的 CSS。最后做几个移动优先、响应式布局的网站，确保你做的页面在手机、平板、PC浏览器上都能很好地展现出来。至于浏览器兼容性问题，开始不要多考虑，纯浪费时间。以后在写代码时，多参考一下 caniuse.com 就可以了。

CSS 就是个无底洞，你看 CSS 大神张鑫旭，在 CSS 上沉浸多少年！个人建议初学者开始不要在 CSS 上花太多的时间。以后随着你写的页面越来越多，CSS 水平会逐步提升。

> 对很多前端大牛来说，可能对 CSS 是不屑一顾的。但是对初学者来说，学 CSS 是入门前端的第一步，这一步没有人指导真可谓困难重重啊。内容多而杂，大多数书、教程、视频又不成体系。比较冤的是，你 CSS 知识掌握的再好，面试中可能面试官根本就不会问太多的知识，然而平常干活的时候这些知识都跑不了要用到。纯吐槽，大牛们勿怪 -:)

第二个阶段，JavaScript核心语法阶段

这个阶段可以说是整个前端技术学习的重中之重，后面高级框架部分能不能理解，取决于这一阶段的学习效果。JavaScript 核心语法部分的知识体系详见如下思维导图：

初学者学习 JavaScript，一般推荐《Professional JavaScript for Web Developers》第三版，国内是由李松峰老师翻译的《JavaScript高级程序设计第三版》。但这个是 ES5 年代的，已经过时了。不过好消息是，基于 ES6/ES7 的英文第四版已经发布了，中文版据说李松峰老师正在翻译(https://www.ituring.com.cn/book/2472)。英文好的同学可以直接看《Professional JavaScript for Web Developers》第四版，配合着 MDN 上的 JavaScript 教程(https://developer.mozilla.org/zh-CN/docs/Web/Tutorials)，同时别忘记了参考一下 ECMA-262 最新规范(http://www.ecma-international.org/publications/standards/Ecma-262.htm)。

学习 JavaScript 中一个主要的难点是深入理解 JavaScript 低层机制。要理解这个，就得深入研究 ECMA-262 规范。奈何这个规范晦涩难懂，初学者可谓看天书。不过，俄罗斯大牛 Dmitry Soshnikov 写了一系列解析 ECMA-262 规范的文章，我们直接看他的文章就好了，地址在这里：(http://dmitrysoshnikov.com/category/ecmascript/)。我们把他的文章翻译过来了，地址在这里：(https://www.yuque.com/xiaojichao/ecma-262)。如果你嫌这个难度还大，可以买《你不知道的JavaScript》（上、中、下三册）。

学习 JavaScript 核心技术另一个主要的难点是大多数书籍、教程都是零零碎碎的知识点，如何用几个项目把知识点串起来综合运用是最让人头疼的一个事情。这里我建议初学者去找 Udemy 上卖得最好的 JavaScript 教程视频，老外在这一点上很有一套，可以说国内 JS 视频教程几乎没有人能做到。。。

如何判断你 JavaScript 基础功底是否扎实，JavaScript 知识体系是否全面呢？最简单的方法就是学习 Node、Vue、React 时候，你是否感到学习曲线突然陡峭起来。什么？模块化编程是啥意思？！模块打包是啥意思？！模块依赖是啥意思？！虚拟 DOM 是啥意思？！ MVVM 是啥意思？！路由是啥意思？！组件状态管理啥意思？！。。。怎么我以前从来没听说过呢？！OK，如果你有这些疑问，就说明你 JavaScript 基础还不够全面，你的学习路径有问题，老老实实补吧！

> 题外话：其实 JavaScript 高级框架能解决的问题，原生 JavaScript 都能解决。任何新技术的出现，给人的感觉应该是卧艹，爽！而不是从入门到放弃。。。但凡遇到新技术就头晕，只能说明有坑没填好，学习路径有断层。

第三阶段：Node 工程师阶段

Node 的出现，带来了整个前端生态圈的繁荣。掌握 Node，可以说是每个前端工程师必备的技能。

Node 技能可以分几个层级：

第一个层级，把 Node 当作工具来用，实际上就是用 npm 管理依赖。这在第二个阶段其实就应该掌握。

第二个层级，会用 Node 开发简单的后台。也就是会用 Node + Express（或Koa2）+ Mongodb（或MySQL） 做点 CRUD 的操作，会封装 REST API，会用 Swagger UI。虽然是学前端的，但毕竟做项目我们需要后端，你总不能找个 Java 程序员给你做好后端，然后让你练习吧。当然，直接用 egg.js 或者 think.js 也可以。这个阶段了解点三层架构、架构模式什么的也有必要。

第三个层级，会用 Node 做后端中间层，也就是接管后端表示层的控制器。你得理解什么是客户端渲染、什么是服务器端渲染，会 Linux 基本操作，会 Docker 容器化技术，知道如何搭建 Nginx 、Node 集群、负载均衡，会用 JWT、oAuth 等。

Node 做中间层的意义，可以参考淘宝前端团队发表的前后端分离的思考与实践系列文章：

[前后端分离的思考与实践（一）](https://fed.taobao.org/blog/2014/04/05/practice-of-separation-of-front-end-from-back-end/)

[前后端分离的思考与实践（二）](https://fed.taobao.org/blog/2014/04/09/practice-of-separation-of-front-end-from-back-end-2/)

[前后端分离的思考与实践（三）](https://fed.taobao.org/blog/2014/04/14/practice-of-separation-of-front-end-from-back-end-3/)

[前后端分离的思考与实践（四）](https://fed.taobao.org/blog/2014/04/14/practice-of-separation-of-front-end-from-back-end-4/)

[前后端分离的思考与实践（五）](https://fed.taobao.org/blog/2014/05/17/practice-of-separation-of-front-end-from-back-end-5/)

[前后端分离的思考与实践（六）](https://fed.taobao.org/blog/2014/05/31/practice-of-separation-of-front-end-from-back-end-6/)

[2014 jsconfchina大会淘宝前后端分离实践演讲PPT](https://2014.jsconfchina.com/slides/herman-taobaoweb/index.html/)

第四个层级，可能阿里大牛才知道吧。换我就学 Java 去了。。。。

一般初学者到第二个层级就够了，做个全栈的前后端半分离项目没问题。第三个层级是中级前端的水平了。不过初级前端了解第三个层级也是有必要的，否则你到了前后端分离开发的团队，可能完全适应不了这种开发模式。

初学者学习 Node，推荐国外 RisingStack 团队出的免费电子书《Node Hero》、《Node.js at Scale》，下载地址为：(https://risingstack.com/resources)。除了是英文以外，特别适合初学者。

英文不好的，推荐用国人开发的一款免费的翻译神器 CopyTranslator，谁用谁知道好！

第四阶段：高级框架阶段

到了这个阶段，其实学起来就很快了。

首先是前端工作流程，构建工具、各种质量保证工具、CI/CD 等等。

学一下 TypeScript吧，马上 Vue 3.0 都是用 TypeScript 开发的。

两大框架：

- React 技术栈（React、React-Router、Redux 与 React Hooks、Axios、UI组件库、脚手架工具、SSR 与 next.js）。

- Vue 技术栈（Vue、Vue-Router、Vuex、Axios、UI组件库、脚手架工具、SSR 与 nuxt.js）。

移动端开发：

- 原生 app 开发（React Native、Flutter）

- 跨端小程序开发 uni-app

桌面端开发：

- Electron

最后做一个大项目，采用前后端全分离开发模式，把几个端都做一遍。这就差不多了。

一次打这么多字，真累啊。就到这里了，以后再修改。

BTW：以上电子书和视频全有，需要的留言好了。

以上如果对你有帮助，请转发。多谢了。