web前端开发学习自学（Web前端自学之路）
web前端开发学习自学（Web前端自学之路）HTML5元素周期表HTML的学习相对很简单，主要是学习下面这个HTML5元素周期表上的元素如何定义网页的结构。当然，我们自学的时候，就不可能有UI设计师给你提供UI设计稿。那该怎么办呢？很简单，找个你觉得比较酷炫的网站，用截图工具把页面完整截下来，然后用像素大厨标注一下。如何标注、如何切图，你去像素大厨官网(https://www.fancynode.com.cn/pxcook)看就行了，上面有详细的教程。所以我们学前端的第一步，就是要掌握HTML、CSS。那么HTML、CSS怎么学呢？首先我们搭建好开发环境。你需要安装一个编辑器，我们就用目前最好用的Visual Studio Code(https://code.visualstudio.com/)好了。安装好VS Code后，网上找一下相关教程，装一些提高开发效率和保证代码质量的插件。然后装上浏览器，推荐 Google Chrome或
第一个阶段，网页重构阶段这个阶段的主要目标是用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元素周期表上的元素如何定义网页的结构。
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知识点思维导图。
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核心语法知识体系
初学者学习 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：以上电子书和视频全有，需要的留言好了。
以上如果对你有帮助，请转发。多谢了。
