一、基础

1、学习HTML基础

HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：

• 学习HTML基础，了解如何编写语义HTML
• 理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型）
• 现在很多html5的新标签也很有用，需要进行了解

实践建议：
一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个网站，比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上。

2、学点CSS

现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。

• 首先要做的是学习语法，熟悉常见的CSS属性。
• 了解盒模型（box model），掌握如何利用Grid和Flexbox准备布局
• 一旦学习完上面的，再学习以下通过媒体查询把网站做成响应式的。

实践建议：
一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了HTML页面的话，现在是时候应用CSS来让它的样子看起来像实际的Github资料页面一样了。前面的那5个页面都要拿来试一下。

3、学习JavaScript基础

JavaScript能让你的HTML页面互动性更强。比方说你在网站上看过的所有那些幻灯片、弹出窗口以及广播通知，以及在没有重载页面的情况下重载页面的特定部分，这些都是用JavaScript做的。在这一步中，你将会学习JavaScript的基础来为后面的旅程做好准备——

• 学习这门语言的语法和基本机构。
• 学习如何用JavaScript来操纵DOM，比方说如何从页面移除一些元素，如何增加一些元素，增加和移除类，通过JavaScript应用CSS样式等。
• 完成之后再学习和理解诸如范围、闭包、变量提升以及事件冒泡这样的主题。
• 学习如何用XHR或者Ajax生成HTTP调用。Ajax可以让你在不需要重载网页的情况下执行特定动作。
• 学完之后接下来就要了解ES6+的所有新特性。ES6只是JavaScript的一个版本，里面给这门语言引入了大量有趣的更新，比如类、定义变量的多种方式，给数组增加了新的方法，字符串连接等。你们在网上找到的大部分文章都会用Babel来解析ES6，这其实是个转译器，可以将这门新的JavaScript转换为旧的JavaScript，因为有一些旧版的浏览器不支持新版的JS。不过现在先不用担心Babel，只需要了解相关概念，然后用到任何一种支持ES6的最新版浏览器上来练习一下就行。

现在你应该已经感觉到东西像是那么一回事了。如果你按照上面的步骤做下来的话应该鼓励一下。这些是你刚刚学到的一些最重要的东西。

我应该学jQuery吗？

曾经有一段时间每个人都对jQuery疯狂，也有充分的理由；这是一个强大的库，在JavaScript基础上提供了一个封装，让你可以用兼容浏览器的方式执行任何东西。不过那些日子已经一去不复返，现在新项目用它已经不是很多了，但是仍然还有人在用。所以其实jQuery对我们最大的用处其实看源码，它对与dom的操作和交互的源码其实对我们写js代码是有很大的启示作用的。

实践建议：
你可能随时都会感觉自己已经理解了但是如果不练习的话很快就会忘掉。在按照这份路线图去学习的时候，要确保尽可能多地去上手实践。

继续做些响应式网站，用JavaScript增加交互性。你可以添加任何感兴趣的现有的网页上去，但记住要利用上目前学到的一切。

一旦你制作出了一些网站，接下来就是开始做真正的东西了。你可以到github上面找一些项目打开某些开源项目的pull请求。以下就是一些可以去尝试的pull请求：

• 增强UI，把任何演示页做成响应式或者改进设计
• 看看有什么开放的issue是你能够解决的
• 重构任何你认为自己可以改进的代码

4、其他

相关笔记：git笔记

在学习基础内容之后，还需要了解一些技能，主要如下：

• chrome浏览器的控制台调试，这个将会大大方便修改代码观察前后台交互
• 选择适合的ide,一般来说使用的有sublime,vs,webstorm,vscode等，还有各种配合编程的插件
• 学会git的基本操作，如果想简单也可以用git的GUI版本，但其实学会git的基本命令行很有用

二、进阶

1、包管理器

相关笔记：npm&yarn笔记

在此之前，如果你要用到一些外部库,如插件或外部的桌面小部件的话，你得手工下载JavaScript和CSS文件并且将它们放到项目里面，然后那些库或者插件发布新版本的时候，你又得下载更新的文件再放到你的项目里面，这是极其麻烦的事情。

具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是yarn和npm。这两个中npm先于yarn出现但yarn在包的版本管理强于npm,其具体使用几乎是一样的，一旦学会了使用其中一个，另一个自然也不成问题。

实践建议：
在对包管理器有了基本了解之后，你就可以去安装一些外部库到你前面制作的一些网页上了，比如安装一些提示插件，当用户点击某个按钮时显示提示信息，或者创建一个登录表单用一些表单验证库进行表单验证，或者试试不同的选项看看如何安装不同的版本。

注：记得要看看语义版本控制

2、CSS预处理器

预处理器以CSS默认不支持的功能丰富了后者。可选的css预处理语言包括Sass、Less、Stylus等等。我更乐意选择Sass。但是PostCSS最近的发展势头也不错，这属于一个锦上添花的东西，有点类似于CSS的“Babel”。你可以拿来独立使用或者在Sass的基础上叠加。

总之，我的建议是先学Sass，了解less,stylus,等后面有时间了再看看PostCSS。

3、CSS框架

CSS框架其实并不是什么困难的事，边用边学就行了，推荐在Bootstrap、Materialize和Bulma里面选。如果考虑市场需求的话则是Bootstrap。

4、CSS组织

随着你的应用不断膨胀，CSS也开始变得混乱难以维系。有多种手段可以对你的CSS进行组织，让它更好地应对伸缩性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM，都是很好的css代码组织管理的指导实践。CSS组织是对于复杂庞大的css开发的一个统一固定的 CSS 代码组织和管理规范。包括 CSS 样式的命名规则，你应该了解它们之间的不同，但是我更偏好BEM。

5、构建工具

相关笔记：ESlint笔记

工具可以帮助你进行JavaScript应用的构建/打包以及开发。这一类工具功能主要包括以下三个方面：

• linter（代码检查） ， 是指对代码进行静态检查，如定义变量是否使用，变量命名，方法回调次数，注释是否规范等，主要对代码书写是否规范进行检查。linter有很多选项，其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。
• task runner（自动构建） ， 即是对项目代码进行自动构建编译为浏览器能够执行的东西，如对typescript和Sass进行编译，使用自动化构建工具则不需要程序员手动进行操作。这个本来是是很多选项的，包括npm脚本、gulp、grun等等。不过既然webpack能够处理gulp能做的大部分东西，所以只有自动构建中的npm脚本可以用来对webpack能做的任务进行自动化。不需要学习Gulp，如果到后面如果你有点时间的话，可以去看看它能否对你的应用有所帮助。
• bundler（打包工具） ， 不同的选项包括Parcel、Webpack、Rollup、Browserify等。如果你必须选一个，目前你可以闭着眼睛选Webpack就是。Rollup也很常用但是主要建议用到库上面，至于app，还是以webpack为主。所以可以先学习一下webpack，后面如果想的话再了解一下Rollup。

实践建议：
恭喜你！你现在可以称自己为75%的现代JavaScript开发者了。现在继续用你学到的东西做点什么出来。也许可以做个库将来用到Sass和JavaScript上。然后用Webpack将Sass转换成CSS，用babel转换成ES6代码。一旦你做完了再把它发布到Github和npm上。

三、再进阶

1、框架

其实在一般开发中，这个部分往往是紧挨着基础部分的，之所以放在Sass、构建工具和包管理器后面，是因为在框架中你全都会用上那些东西。

框架也有好些选项。不过目前比较常用的是React、Vue和Angular。最近对React.js的需求越来越旺盛。然而，前面列的这几个你随便选一个都不会错。个人会选React或者Angular。不过特别说明一下，作为初学者也许会发现相对而言Angular会容易点，因为它支持几乎一切立即可用的东西，比如支持延迟加载的强大路由器，支持拦截器的HTTP客户端，依赖注入，组件CSS封装等而不需要关心选择外部库的问题。不过React在社区方面无疑更有优势，而且Facebook一直都在努力改进它。

一旦选择框架，当然还有其他一些东西需要你学的。

• 如学React的话，还得学Redux或者Mobx去了解状态管理，具体选学什么要取决于应用的规模。Mobx适合中小规模应用，Redux更适合大规模应用。甚至如app允许的话可能都不需要学，靠React的原生状态管理就行了。
• 如果选择Angular，就得用TypeScript（没有它你也能开发出Angular应用，但是我们还是推荐你使用）和Rx.js，这些除了Angular应用以外在其他地方也能用得上。这都是非常强大的库，也适合于函数编程开发。
• 如果选Vue.js的话，也许还得学习Vuex，这东西有点类似于Redux但是是给Vue用的。

需要注意的是，Redux、Mobx以及Rx.js都不是跟这些框架绑死到一起的，你也可以用到各种JavaScript应用里面。此外，如果选择了Angular的话，确保你用的是Angular 2+而不是Angular 1+,这里对vue也是一样的，vue2.0与vue1.0也有细微的区别。

实践建议：
现在已经知道了开发现代JavaScript应用所需的一切。可以选择学习的框架做一个项目出来以便练习。

做完之后，再去看看如何衡量和改进性能。比方说可以看看Interactivity Time、Page Speed Index以及Lighthouse Score等。

2、渐进式Web应用

一旦完成了上述所有步骤，再来学习一下service worker以及如何制作渐进式web应用。

渐进式web应用（PWA）是指可以在任何浏览器上执行的支持互联网的应用程序，它是由服务器端脚本(PHP和ASP)和客户端脚本(JavaScript和HTML)组成的。Service Worker则是位于客户端（浏览器）和服务器之间的代理。PWA 有以下优点：

• 渐进式 - 每个用户都可用而不管选择什么样的浏览器，因为它们是以渐进式增强为核心原则构建的。
• 自适应 - 适应任何形态：桌面，移动设备，平板电脑或尚未出现的形式。
• 不依赖网络连接 - Service Workers允许离线工作，或在低质量网络上工作。
• 类似于应用程序 - 使用应用程序风格的交互和导航，感觉像一个应用程序。
• 保持最新 - 得益于service Woker的更新进程，应用能始终保持最新状态。
• 安全 - 借助于HTTPS，防止窥探，并确保内容没有被篡改
• 可发现 - 受益于W3C清单和service Worker注册作用域，搜索引擎可找到它们，可以识别为“应用程序”。
• 用户粘性 - 通过推送通知等功能让用户重返应用。
• 可安装 - 允许用户在主屏幕上“保留”他们认为最有用的应用程序，而无需经过应用程序商店。
• 可链接 - 通过URL轻松共享，不需要复杂的安装。

3、测试你的应用

相关笔记：QUnit笔记

应用测试有很多工具，各自的用途也不一样。我本人经常是组合使用Jest、Mocha、 Karma及Enzyme。然而，在开始选择工具之前，最好是首先理解有哪些不同的测试类型，看看所有的选项情况，然后从中再选择最适合需求的一个。

单元测试：
JS里面有许多可以供我们选择进行单元测试的框架。比如，Mocha, Selenium, jasmine 和 QUnit。本文将重点讲述Qunit，Qunit 由开发了许多大名鼎鼎的js库，包括了的jQuery 、jQuery UI等的Jquery团队（jQuery team）开发。

4、静态类型检查器

静态类型检查器帮助给JavaScript增加类型检查。你不需要学习这些，不过这些东西可以赋予你超能力，而且学习起来也很快，几个钟头就行了。这方面主要有TypeScript 和 Flow。我喜欢TypeScript ，不过可以两个都看看再选喜欢的。

5、服务器渲染

目前为止，你所学到的技能应该足够你找到一个“前端工程”的位置了。但还可以在选定的任何框架内再学学服务器端渲染的知识。有不同的选项可选，这要取决于你用什么样的框架。

• 如果你决定用React，最值得关注的选项是Next.js 和 After.js。
• 如果是Angular，可以选Universal。
• 对于Vue.js，有 Nuxt.js。

四、全栈小尝试

学习前端的过程如果能了解后端是如何运作的将会有利于理清思路，况且现在nodejs发展日益强大，前端的MVC框架也更偏向逻辑化而不是简单的html页面，所以做一个小的全栈项目会很有意义，可以从nodejs入手，mysql数据库也比较简单轻量，然后可以尝试了解一下javaweb，或者pyhton的django框架。

小结

这份路线可能还会有遗漏的地方，但是足以应付任何“前端工程”角色之所需。还要记住的是，关键是尽可能多地练习。一开始你可能会觉得很吓人，总感觉自己没有掌握，但这是正常的，慢慢你就会觉得自己变得越来越好。还有，陷入困境时别忘了寻求帮助，你会惊喜地发现有多少人愿意帮助你的。

英文：Kamran Ahmed 译文：36氪，转自微信公众号，在博主自身理解上有所改动，侵删