前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦 ...

吹就一个字

我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。
作为程序员，肯定是不能容忍重复无味的劳动的，因此我就系统地总结分享一下我的前端学习路线，希望对你能够有所帮助。
前言

前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。只要你认真学，入门前端的话三个月左右就可以了。之后我还给出了前端进阶路线，帮助你提升前端技能水平。我把前端入门和前端进阶一共分为六个阶段，并对相应阶段所需要的大致的学习时间进行了标注。
前端入门

入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后，也就算真正地入门前端了。
阶段一：HTML + CSS

前端对于入门者相当友好，因为开始学习的时候你只需要一个浏览器，推荐 Chrome。HTML 和 CSS 可以直接运行在浏览器中，浏览器就是它们的运行环境。你也可以使用编辑器，推荐 VSCode，这是前端开发使用最多的编辑器。
HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是编程语言。HTML 中文名叫做超文本标记语言，其实就是一些标签。CSS 中文名为层叠样式表，也就是一些样式的配置。
首先学习 HTML，非常简单。HTML 有非常多的标签，刚入门的时候不要沉浸在记住这些标签中，你也记不住。你只需要整体浏览一遍，知道有哪些标签，各自的作用是什么，整体有一个印象就行了。我推荐跟着 MDN 的 HTML 学习路径 过一遍就行。我学习 HTML 的时候还看过两本书，你感兴趣也可以看一下，这是这方面很好的书了：
《Head First HTML and CSS》

《HTML5 与 CSS3 基础教程》

看完之后可以自我检测一下，例如常用的标签有哪些，<!DOCTYPE>的作用是什么，哪些标签是行内标签，哪些是块级标签，HTML5 有什么新特性等。这里不要花太多时间，大致过一下即可，不用都记住，之后有需要再回来查就行。
接下来学习 CSS，直接推荐目前最适合 CSS 入门的书：
《精通 CSS（第三版）》

在入门阶段，不需要将整本书一字不差地看完，你只需要抓住几块核心内容，例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。这些内容快速过一遍就行，太细节的内容不用记，之后需要了再回来查。以上内容用时 6 天左右，其中 HTML 2 天，CSS 4 天。
有了这些基础知识，你就可以进行实战了。这里推荐百度前端技术学院平台，他们这都是开源免费的前端题目，应该是为了培养前端人才，让自己能够招到更合适的人而创建的。他们的课开了四年：

• IFE 2015: https://github.com/baidu-ife/ife
  
• IFE 2016: http://ife.baidu.com/2016/static/index.html
  
• IFE 2017: http://ife.baidu.com/2017
  
• IFE 2018: http://ife.baidu.com/
  

现在打开 IFE2018 中的 第五题 开始写静态页面吧。然后你会发现，你根本写不出来。这是很正常的，那你就去看别人的代码，看一点你就开窍了，就知道怎么写了。忘掉的属性就回去查 MDN 或者查我推荐的书，如此反复你就记住了。
写完一个页面之后别急着往下写。你写的第一个页面肯定有很多问题，例如属性使用错误，代码缩进不规范等问题。这时候你应该找一个代码规范，例如 百度前端代码规范，根据规范重写你的代码。这个规范我只是举一个例子，自己上网搜一下，好的大公司都有自己的规范，这个不是规定死的，风格统一并且可读性强即可。
重写代码之后，你再去看看别人提交的代码，这个页面是怎么写的，如果身边有技术好的前端，可以让他帮你指点一下。这时候你应该就知道如何写一个页面，并且怎样才能写好一个页面了。然后你可以自己再去找几个题目，写几个页面熟练一下。
以上为阶段一内容，用时 10 天左右。
CSS 进阶：学习 CSS 核心内容不需要很多时间，但其实 CSS 是细节非常深的一个技术。前期不要陷入其中，那么你会问如何深入学习 CSS 呢？我推荐一些很好的权威书籍，基本看这些就够了。
《CSS 世界》：张鑫旭大神的书，十多年的 CSS 经验分享，必买书籍。
《CSS 选择器世界》：张鑫旭大神的另一力作，深入讲解 CSS 选择器。
《深入解析 CSS》：2020 年的新书，奇虎团工程师翻译，质量有保证。《CSS 揭秘》：各种 CSS 奇淫巧技，主要是来开阔视野。
《CSS 权威指南》：属于 CSS 的新华字典，很全面，属于一本工具书。

阶段二：JavaScript

学习了 HTML 和 CSS，可以开始学习 JavaScript 了。这也是至关重要的阶段。JavaScript 主要包括语言基础（ECMAScript）、DOM 和 BOM 三部分，如果你是初学者，会想这到底是啥，咋还三个东西。那就开始学起来，学完你就知道啦，其实没那么难。
学习这部分，一定要从现代 JavaScript 教程学起：
现代 JavaScript 教程是 React 官方文档中与 MDN 并列推荐的 JavaScript 学习教程。这个教程解决了现存 JavaScript 书籍最大的痛点：实时性。技术领域的书籍在实时性上一直都存在很大的问题，而这个教程却解决了这个问题。并且它为读者搭建了良好的学习路线，由浅入深，内容足够详细也足够全面，你就按着教程顺序学习就行了。此外，每节内容后，还给出了高质量的课后习题和解析。通过做题可以帮你检验自己的学习效果，并巩固新学到的知识。
教程地址：https://zh.javascript.info/
学完这个教程，你就其实已经学完了 JavaScript。你可能还听说过 ES5/ES6/ES7/ES8……，其实你也已经学完了，而且还通过这个教程做了很多实战的小例子。教程里还将技术点与实际应用联系起来，让你知道这个知识点在实际开发中是如何使用的，它解决了什么问题。
在学现代 JavaScript 教程的同时，我推荐你买基本权威书籍，其实这些书所讲的大部分在教程里都有，不过可以相互补充取长补短，同时还可以巩固知识点，加深你对 JavaScript 的理解：
《JavaScript 高级程序设计（第 3 版）》：俗称红宝书，只是这本书版本有些旧，第四版预计于 2020 年下半年出版，可以关注一下。这本书前七章讲的是语言特性，一定要掌握。如果你有其他语言的编程基础，理解起来会更快。第 8、10-14、20、21、23、24 章也要重点看，第 25 章的第一节也要看，其他没提到的章节属于非重点的扩展内容，有空就大概读一下。至于 XML 这种过时的东西就不用看了，书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。你一定要先看《现代 JavaScript 教程》再看这本红宝书，因为这里的内容在教程中都有，而且都是最新的，红宝书只是用于复习巩固。
JavaScript高级程序设计（第3版）(图灵出品)
JavaScript权威指南（第6版）


《ES6 标准入门》：你一定听过 ES6 或者 ES2015 吧，其实指的是一个东西，就是 2015 年发布的 ECMAScript 规范，发布的一些语言特性。这本书是阮一峰老师的书，是学习 ES6 必买书籍，当然里面也参杂了一些作者的个人理解。
《深入理解 ES6》：尼古拉斯大佬的力作，必买书籍！讲解非常详细且深入。
《深入理解 JavaScript 特性》：尼古拉斯大佬的最新书籍，由李松峰老师翻译，主要讲的也是 ES6 的内容。
《JavaScript DOM 编程艺术》：DOM 必备书籍，本书主要讲的是 DOM 知识，还会带你通过实战深入理解相关知识，很有帮助。《JavaScript 语言精粹》：俗称蝴蝶书，很薄的一本，里面讲的都是 JavaScript 语言最核心的部分。半天就能看一遍，可以买了反复看。
《Head First JavaScript 程序设计》：这本书对于没有编程经验的新手友好，内容比较简单。
阶段二用时一个半月左右。如果你有编程经验，学起来会轻松一些。所列出的书不用全都看完，而是挑选重点，相互补充着看。对于 API 相关内容不要死记硬背，大概浏览即可，用到的时候再查，多些代码就自然记住了。

阶段三：入门前端框架

学完前端三大件，打好了大树的根基，就可以开始扩展技能树了，开始学习前端框架。前端的主流框架目前主要为 React，Vue 和 Angular。选择哪个框架呢？你可以去知乎或者其他网站搜一搜，然后根据你的个人喜好进行选择。一般是在 React 和 Vue 中选一个。React 的开发体验更类似于写原生的 JavaScript，要求你有较好的 JavaScript 基础。Vue 则引入了模版，将很多实现封装成了 API，你需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，只是编程的感觉稍微弱了一些。
这两个都是非常优秀的框架，新人不必纠结于选择哪个框架，学了一个，另一个也很容易学。如果你不知道选择哪个，我推荐你先学习 React。推荐的学习路线：

• 阅读 React 官方文档：先学习文档中核心概念部分，然后跟着官方文档写出文档中的井字棋。然后自己写一个 Todo App。
  
• 然后学习慕课网 Dell 老师的 React16.4  快速上手 和 React16.4 开发简书项目 课程。
  
• 还可以继续选一些百度前端技术学院里的经典题目来巩固 JavaScript 的基础知识和使用。
  

在这个过程中你会学到很多知识，会用到 React 的高阶知识，那么就把 React 官方文档中的高级指引，API Reference，Hooks 等部分的内容学完。还会学到 React Router，Redux 等内容。会学到从零开发一个完整项目，从项目配置到组件拆分，到项目打包和上线的完整流程，还会学到 React 框架的一些底层源码级知识。
如果你选择了 Vue 框架，学习路线也类似：阅读官方文档，写一些简单的 Demo。然后学习慕课网 Dell 老师的 Vue 2.5 入门 和 Vue 2.5 -> 2.6 -> 3.0 开发去哪儿网 App 从零基础入门到实战项目开发 课程，中间穿插做一些百度前端技术学院的典型题目巩固 JavaScript 的基础知识。
此阶段用时一个月左右。至此你已经成功入门前端开发了，恭喜你   
阶段一到阶段三共计用时三个月。
前端进阶

成功入门前端开发之后就要开启进阶部分了，主要是加深对各个知识的理解程度，打牢计算机领域基础知识，扩展技能树，提升项目开发和宏观理解及把控能力。前端进阶是需要终生学习的，活到老学到老。
阶段四：语言基础进阶

这个阶段就是加深对编程语言的理解，多阅读进阶书籍，有能力的推荐去阅读 ECMAScript 规范：http://ecma-international.org/ecma-262/
进阶必读书籍：

• 《你不知道的 JavaScript 上/中/下卷》：必买书籍，将 JavaScript 的疑难问题，细节知识一网打尽。原版是 GitHub 上开源的电子书，英语水平高的可以去读英文原版。
  
• 《JavaScript 忍者秘籍》：深入讲解 JavaScript 的核心知识点，必买书籍。
  
• 《了不起的 JavaScript 工程师》：从宏观来看 JavaScript 语言，以及前端工程师所需要掌握的一些技能，推荐阅读。
  
• 《JavaScript 函数式编程指南》：学习函数式编程思想
  
• 《JavaScript 函数式编程》：也是一本函数式编程思想的好书
  
• 《JavaScript 设计模式》：学习 JavaScript 设计模式，推荐阅读
  
• 《JavaScript 设计模式与开发实践》：另一本同等分量的设计模式书籍，推荐阅读
  
• 《锋利的 jQuery》：jQuery 现在已经很少有人用了，除非是很老的项目或者写小东西。不过这本书值得买，学习 jQuery 的优秀思想，还可以去学习一下它的源码，对你进阶很有帮助。
  

进阶选读书籍：

• 《高性能 JavaScript》
  
• 《JavaScript Web 应用开发》
  
• 《深入理解 JavaScript》
  
• 《JavaScript 经典实例》
  
• 《JavaScript 面向对象编程指南》
  
• 《JavaScript 编程精粹》
  

学习 TypeScript。JavaScript 是一门弱类型语言，你声明一个变量，既可以将字符串赋值给它，也可以将数字等复制给它，这在大型项目开发中很容易因为数据类型出 bug。基于此类种种原因，就出现了 TypeScript。你有了 JavaScript 的基础，学习 TypeScript 很容易，它只是一种语法糖，也就是一种另一种写 JavaScript 的方式。推荐以下书籍：

• 《深入理解 TypeScript》
  
• 《TypeScript 实战指南》
  
• 《TypeScript 实战》
  

阶段五：框架和学习边界进阶

通过阶段三，你已经掌握了前端框架的基本使用，开发一个完整项目的流程。那么在框架和学习边界进阶阶段，你就可以：

• 学习框架周边的生态，社区总结出来的优秀组件，以及各种好用的工具库。
  
• 造一些自己的轮子，使用框架搭建自己的开源项目
  
• 学习 Webpack，Gulp，Babel，ESLint 等工具的使用、思想和原理
  
• 带着问题去阅读框架源码，学习性能优化
  
• 养成良好的编程习惯
  
• 扩展技术边界，学习 Node.js 等后端相关技能
  
• ……
  

推荐阅读书籍：
以下推荐的书籍都是比较出名的书籍，你可以根据自己的技能树，选择所需要的书籍进行阅读。并不是一字不差地整本阅读，而是在每本书中学习自己所需要的部分。很多都是非常著名的好书，有精力尽量买来学习。
Webpack 相关：

• 《深入浅出 Webpack》
  
• 《Webpack 实战：入门、进阶与调优》
  

React 相关：

• 《深入 React 技术栈》
  
• 《深入浅出 React 和 Redux》
  
• 《Redux 实战》
  
• 《React 学习手册》
  
• 《React 快速上手开发》
  
• 《React 设计模式与最佳实践》
  

Vue 相关：

• 《Vue.js 实战》
  
• 《Vue.js 开发实战》
  
• 《深入浅出 Vue.js》
  
• 《Vue.js 权威指南》
  
• 《Vue.js 从入门到项目实战》
  
• 《Vue.js 前端开发基础与项目实战》
  
• 《Vue.js 项目开发实战》
  
• 《Vue.js 快速入门》
  
• 《Vue.js 前端开发》
  

Node.js 相关：

• 《狼书卷1》
  
• 《狼书卷2》
  
• 《Node 学习指南》
  
• 《了不起的 Node.js》
  
• 《深入浅出 Node.js》
  
• 《Node.js 实战》
  
• 《Node.js 开发指南》
  
• 《Node 即学即用》
  
• 《Node 与 Express 开发》
  

样式和布局相关：

• 《Bootstrap 实战》
  
• 《Bootstrap 用户手册》
  
• 《响应式 Web 设计：HTML5 与 CSS3 实战》
  

性能相关：

• 《Web 性能权威指南》
  
• 《高性能网站建设指南》
  

PWA 相关：

• 《PWA 开发实战》
  
• 《PWA 实战：面向下一代的 Progressive Web APP》
  

其他：

• 《SVG 精髓》
  
• 《深入理解 SVG》
  
• 《前端架构设计》
  
• 《重构：改善既有代码的设计》
  
• 《同构 JavaScript 应用开发》
  

阶段六：计算机基础知识进阶

编程编程，万变不离其宗，那就是计算机基础知识，算法、数据结构、计算机原理、网络等内容。在这里我只推荐最经典的好书，每一本都是必读书籍。学好这些内容，大厂任你选。
数据结构和算法：

• 《剑指offer》
  
• 《程序员面试金典（第 6 版）》
  
• 《编程之美》
  
• 《漫画算法》
  
• 《算法图解》
  
• 《程序员代码面试指南》
  
• 《大话数据结构》
  
• 《趣学算法》
  
• 《学习 JavaScript 数据结构与算法》
  
• 《数据结构与算法：JavaScript 描述》
  
• 《算法（第四版）》
  
• 《算法导论》
  
• 《算法竞赛入门经典（第二版）》
  
• 《算法竞赛入门经典 训练指南》
  

计算机网络：

• 《HTTP/2 基础教程》
  
• 《HTTPS 权威指南》
  
• 《计算机网络：自顶向下方法》
  
• 《图解 HTTP》
  
• 《图解 TCP/IP》
  
• 《TCP/IP 详解》
  
• 《UNIX 网络编程》
  

操作系统：

• 《深入理解计算机系统》
  
• 《现代操作系统》
  
• 《UNIX 环境高级编程》
  
• 《The Linux Programming Interface》
  

编程思想：

• 《代码大全》
  

编译原理：

• 《编译原理》
  

产品思想：

• Web Fundamentals: https://developers.google.com/web/fundamentals/
  

总结

至此，你已经完成了前端开发从入门到进阶，已然成为了一个巨佬，之后再学什么已经了如指掌。希望我的分享对你有帮助，如果你觉得有用，可以收藏本文，并分享给你有需要的朋友。让我们一起学习，共同进步！

作者：现代前端教程
链接：新手如何从零开始入门前端开发，分享我的学习方法！
来源：微信公众号
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。