这套题还不错，感兴趣的猿可以试一试：前端开发工程师
我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。
前端入门
入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后，也就算真正地入门前端了。
阶段一：HTML + CSS
前端对于入门者相当友好，因为开始学习的时候你只需要一个浏览器，推荐 Chrome。HTML 和 CSS 可以直接运行在浏览器中，浏览器就是它们的运行环境。你也可以使用编辑器，推荐 VSCode，这是前端开发使用最多的编辑器。HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是编程语言。HTML 中文名叫做超文本标记语言，其实就是一些标签。CSS 中文名为层叠样式表，也就是一些样式的配置。首先学习 HTML，非常简单。HTML 有非常多的标签，刚入门的时候不要沉浸在记住这些标签中，你也记不住。你只需要整体浏览一遍，知道有哪些标签，各自的作用是什么，整体有一个印象就行了。我推荐跟着 MDN 的 HTML 学习路径[1] 过一遍就行。我学习 HTML 的时候还看过两本书，你感兴趣也可以看一下，这是这方面很好的书了：
- 《Head First HTML and CSS》
- 《HTML5 与 CSS3 基础教程》
看完之后可以自我检测一下，例如常用的标签有哪些，<!DOCTYPE> 的作用是什么，哪些标签是行内标签，哪些是块级标签，HTML5 有什么新特性等。这里不要花太多时间，大致过一下即可，不用都记住，之后有需要再回来查就行。接下来学习 CSS，直接推荐目前最适合 CSS 入门的书：《精通 CSS（第三版）》
在入门阶段，不需要将整本书一字不差地看完，你只需要抓住几块核心内容，例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。这些内容快速过一遍就行，太细节的内容不用记，之后需要了再回来查。
最近我又发现了一本 2020 年的新书，《深入解析 CSS》，奇虎团工程师翻译，质量有保证。这本书讲得也非常详细，你也可以买这本不买上面那本。有了这些基础知识，你就可以进行实战了。这里推荐百度前端技术学院平台，他们这都是开源免费的前端题目，应该是为了培养前端人才，让自己能够招到更合适的人而创建的。他们的课开了四年：
- 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 中的 第五题[2] 开始写静态页面吧（只是举例，具体可以自己找题目做）。然后你会发现，你根本写不出来。这是很正常的，那你就去看别人的代码，看一点你就开窍了，就知道怎么写了。忘掉的属性就回去查 MDN 或者查我推荐的书，如此反复你就记住了。写完一个页面之后别急着往下写。你写的第一个页面肯定有很多问题，例如属性使用错误，代码缩进不规范等问题。这时候你应该找一个代码规范，例如 百度前端代码规范[3]，根据规范重写你的代码。这个规范我只是举一个例子，自己上网搜一下，好的大公司都有自己的规范，这个不是规定死的，风格统一并且可读性强即可。重写代码之后，你再去看看别人提交的代码，这个页面是怎么写的，如果身边有技术好的前端，可以让他帮你指点一下。这时候你应该就知道如何写一个页面，并且怎样才能写好一个页面了。然后你可以自己再去找几个题目，写几个页面熟练一下。以上为阶段一内容，用时 10~20 天左右。CSS 进阶：学习 CSS 核心内容不需要很多时间，但其实 CSS 是细节非常深的一个技术。前期不要陷入其中，那么你会问如何深入学习 CSS 呢？我推荐一些很好的权威书籍，基本看这些就够了。《CSS 世界》：张鑫旭大神的书，十多年的 CSS 经验分享，进阶内容。《CSS 选择器世界》：张鑫旭大神的另一力作，深入讲解 CSS 选择器。《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 高级程序设计(第 4 版)》：俗称红宝书，这本书 1~11 章讲的是语言特性，一定要掌握。如果你有其他语言的编程基础，理解起来会更快。第 12、14-17 和 23-26 章是重点内容也要重点看，第 13、19 和 21 章是次重点内容，尽量看一下。第 28 章是最佳实践，可以在看完前面这些部分来学习一下如何写出更好的代码。第 18 章 Canvas，第 20 章 API，第 22 章 XML 和第 27 章工作者线程，可以在学有余力或者用到的时候看一下，不是初期重点内容。书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。推荐先看《现代 JavaScript 教程》再看这本红宝书，或者搭配着看。因为这里的内容在教程中都有，而且都是最新的，红宝书可以用于复习巩固。红宝书对新手不友好，这是因为其章节编排并非由浅入深，让初学者抓不住重点，什么都想学，什么都记不住，挫败感强。《JavaScript 权威指南（第七版）》：俗称犀牛书，第六版的犀牛书是大而全的工具书，但是第七版做了大幅更新，跟进到了 ES2020，增添了 Node.js 的相关内容，还删掉了很多过时的 JS 特性相关内容。现在可以说是非常值得购买阅读的一本书了。《ES6 标准入门》：你一定听过 ES6 或者 ES2015 吧，其实指的是一个东西，就是 2015 年发布的 ECMAScript 规范，发布的一些语言特性。这本书是阮一峰老师的书，是学习 ES6 必买书籍，当然里面也参杂了一些作者的个人理解。《深入理解 ES6》：尼古拉斯大佬的力作，必买书籍！讲解非常详细且深入。《深入理解 JavaScript 特性》：尼古拉斯大佬的最新书籍，由李松峰老师翻译，主要讲的也是 ES6 的内容。《JavaScript DOM 编程艺术》：DOM 学习书籍，本书主要讲的是 DOM 知识，还会带你通过实战深入理解相关知识。以前大家会很推荐这本书，但是现在我看过后觉得，你看完其他书可以买本浏览下。《JavaScript 语言精粹》：俗称蝴蝶书，很薄的一本，里面讲的都是 JavaScript 语言最核心的部分。半天就能看一遍，可以买了反复看，只是版本有些老。《Head First JavaScript 程序设计》：这本书对于没有编程经验的新手友好，内容比较简单。阶段二用时 1~3 个月左右，没有编程经验的同学可能需要更长。如果你有编程经验，学起来会轻松一些。所列出的书不用全都看完，而是挑选重点，相互补充着看。对于 API 相关内容不要死记硬背，大概浏览即可，用到的时候再查，多些代码就自然记住了。这些书我都有，也是挑着看，补充着学。
阶段三：入门前端框架
学完前端三大件，打好了大树的根基，就可以开始扩展技能树了，开始学习前端框架。前端的主流框架目前主要为 React，Vue 和 Angular。选择哪个框架呢？你可以去知乎或者其他网站搜一搜，然后根据你的个人喜好进行选择。一般是在 React 和 Vue 中选一个。React 的开发体验更类似于写原生的 JavaScript，要求你有较好的 JavaScript 基础。Vue 则引入了模版，将很多实现封装成了 API，你需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，只是编程的感觉稍微弱了一些。这两个都是非常优秀的框架，新人不必纠结于选择哪个框架，学了一个，另一个也很容易学。如果你不知道选择哪个，我推荐你先学习 React。Vue 相对来讲偏向通过模板的方式也就是调用 API 来写页面（当然现在 Vue 3.0 也正在跟进 Vue 的 JSX 写法，类似于 React），而 React 则是更偏向于通过写原生 JS 的那种方式写页面，使得逻辑和页面分离开来。我推荐的学习路线如下：
- 阅读 React 官方文档：先学习文档中核心概念部分，然后跟着官方文档写出文档中的井字棋。然后自己写一个 Todo App。
- 然后学习慕课网 Dell 老师的 React16.4 快速上手[4] 和 React16.4 开发简书项目[5] 课程。
- 还可以继续选一些百度前端技术学院里的经典题目来巩固 JavaScript 的基础知识和使用。
在这个过程中你会学到很多知识，会用到 React 的高阶知识，那么就把 React 官方文档中的高级指引，API Reference，Hooks 等部分的内容学完。还会学到 React Router，Redux 等内容。会学到从零开发一个完整项目，从项目配置到组件拆分，到项目打包和上线的完整流程，还会学到 React 框架的一些底层源码级知识。如果你选择了 Vue 框架，学习路线也类似：阅读官方文档，写一些简单的 Demo。然后学习慕课网 Dell 老师的 Vue 2.5 入门[6] 和 Vue 2.5 -> 2.6 -> 3.0 开发去哪儿网 App 从零基础入门到实战项目开发[7] 课程，中间穿插做一些百度前端技术学院的典型题目巩固 JavaScript 的基础知识。此阶段用时 1~2 个月左右。至此你已经成功入门前端开发了，恭喜你
