还在迷茫于前端如何入门和进阶？万字指南让你再也不迷茫！

我常常会看到不少同窗在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下本身的学习经验，可是发现这是一个问得很是多的一个共性问题。

做为程序员，确定是不能容忍重复无味的劳动的，所以我就系统地总结分享一下个人前端学习路线，但愿对你可以有所帮助。

前言

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

前端入门

入门前端开发主要须要学习 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: github.com/baidu-ife/i…
• IFE 2016: ife.baidu.com/2016/static…
• IFE 2017: ife.baidu.com/2017
• IFE 2018: 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 书籍最大的痛点：实时性。技术领域的书籍在实时性上一直都存在很大的问题，而这个教程却解决了这个问题。而且它为读者搭建了良好的学习路线，由浅入深，内容足够详细也足够全面，你就按着教程顺序学习就好了。此外，每节内容后，还给出了高质量的课后习题和解析。经过作题能够帮你检验本身的学习效果，并巩固新学到的知识。

教程地址：zh.javascript.info/

学完这个教程，你就其实已经学完了 JavaScript。你可能还据说过 ES5/ES6/ES7/ES8……，其实你也已经学完了，并且还经过这个教程作了不少实战的小例子。教程里还将技术点与实际应用联系起来，让你知道这个知识点在实际开发中是如何使用的，它解决了什么问题。

在学现代 JavaScript 教程的同时，我推荐你买基本权威书籍，其实这些书所讲的大部分在教程里都有，不过能够相互补充取长补短，同时还能够巩固知识点，加深你对 JavaScript 的理解：

• 《JavaScript 高级程序设计（第 3 版）》：俗称红宝书，只是这本书版本有些旧，第四版预计于 2020 年下半年出版，能够关注一下。这本书前七章讲的是语言特性，必定要掌握。若是你有其余语言的编程基础，理解起来会更快。第 八、10-1四、20、2一、2三、24 章也要重点看，第 25 章的第一节也要看，其余没提到的章节属于非重点的扩展内容，有空就大概读一下。至于 XML 这种过期的东西就不用看了，书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。你必定要先看《现代 JavaScript 教程》再看这本红宝书，由于这里的内容在教程中都有，并且都是最新的，红宝书只是用于复习巩固。
• 《JavaScript 权威指南》：俗称犀牛书，和《CSS 权威指南》相似，都是大而全的工具书。
• 《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。推荐的学习路线：

1. 阅读 React 官方文档：先学习文档中核心概念部分，而后跟着官方文档写出文档中的井字棋。而后本身写一个 Todo App。
2. 而后学习慕课网 Dell 老师的 React16.4 快速上手 和 React16.4 开发简书项目 课程。
3. 还能够继续选一些百度前端技术学院里的经典题目来巩固 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 规范：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: developers.google.com/web/fundame…

总结

至此，你已经完成了前端开发从入门到进阶，已然成为了一个巨佬，以后再学什么已经了如指掌。但愿个人分享对你有帮助，若是你以为有用，能够收藏本文，并分享给你有须要的朋友。让咱们一块儿学习，共同进步！

---

更多精彩内容，微信扫码关注公众号「技术漫谈」：

• LeetCode 算法题解
• JavaScript 入门到进阶
• 前端项目从零到一实战
• ……