前端初学路线指南
这篇文章本是我写给一个初学前端开发的网友的答案：看这里
之所以写这么长，是因为题主洋洋洒洒列了一大堆想学的东西，过于多了，贪多嚼不烂。
而且，学东西，总要分个轻重缓急的。任何一门知识，都有个层次，有些知识的前置知识多，后置知识少，就适合后学；有些知识前置知识少，后置知识多，就得先学，而且要认真学；还有些知识，和科目中的大部分东西都不相关，一时半会儿也用不上，这种就可以暂时搁不学（比如canvas）。
所以，作为一个尚记得初学经历的人，我给题主列了一个建议学习路径，这也是我对大部分初学前端的朋友的建议。注意，这是给初学者的建议，如果你有很丰富的编程经验，只是想兼修一下前端，那你完全没必要看下面的文字。
这篇答案我并没有像一般的技术文章一样分门别类，做的很结构化，而是用了流水账一样的文字去表述。读起来可能比较凌乱，但是我之所以这样写是有原因的——因为我想还原一个真实的学习过程，从细节和体验的层面描述每一步注意什么，收获什么，而不是用术语组织起一篇专业却泛泛的文字。
以及，答案的评论中有网友说我国语轻视css了。其实不是轻视，而是觉得css技术更多的是一些方法论，这种东西不做实际项目是很难真正有收获的，与其在初学时期把时间浪费在看css书上（还记不住），不如先依靠直觉+W3School把自己想搭的页面搭出来，以后慢慢补充不迟。
—- 以下为正文 —-
建议学习路径：
三天时间学习 html 相关语法，别一页一页得看书，大致看下每个标签干嘛的，然后 F12 打开调试器，看看知乎的页面怎么堆起来的，收获对 html 的直觉。
一周时间学习 css，也别一页一页得看书，快速了解 DOM 和 selecter 是怎么回事儿，然后尝试两三种常用布局，比如两栏、三栏、悬浮 header（可以顺便看下 flex 布局），收获对 css 的直觉。
剩下的时间一头扎进 js 就行了，什么工具链也别用，es6 什么的也先别管。集中精力阅读《jsvascript 高级编程》和 DOM 无关的前几章，了解 js 语法，顺便搞清楚“js 编程”是在干嘛。
等你差不多知道 js 编程是怎么回事儿了，就可以做练习题找找感觉了。
- 从最简单的开始，比如打印三角形；
- 再来点稍微复杂的，比如找出 1 到 100000 里面所有的素数；
- 最后来点经典算法，比如快速排序、hash 表（网上有代码，可以逐行读懂然后默写）；
这个过程，放长一点，一到两个月吧，一来是找找编程的感觉，二来是了解一下计算机是怎样处理问题的。
至此，你已经初步会用 js 编程了。
这一关过了，就可以了解浏览器 api 和 jquery 了。别管浏览器兼容，那是 legacy，早晚没用。这一块可以边看文档边练，随时做一些小练习，比如点击按钮，给某个 div 变色。
没必要每个 api 都练，重点掌握 jquery 的 $ 符（对应原生的 querySelectorAll）、attr（对应原生的 get/setAttribute）、add/remove/hasClass、bind/unbind（对应原生的 add/removeEventListener）、原生setTimeout 等若干重要方法。一定要搞清楚事件冒泡、事件代理的概念。注意 console.log 这个函数可以很方便的打印任何对象，有助于你调试。
这个过程可长可短，不要给自己设定严格的时间。建议分两步走：
第一步，熟练掌握监听 DOM 事件，在回调里修改 DOM 节点属性导致网页变样这套模式。同时也通过应用深化一下对 js 的了解，比如 this 指针到底指向谁（原型链相关的就先算了）。在这个过程中编写几个“像网页”的网页。就是长得想那么回事儿，鼠标点点还能变的页面。
至此，你已经初步会写网页了。第二步，当你能熟练使用 js 监听事件、修改 DOM 属性的时候（比如你能做出一个简单仿 blog 文章列表页，打开页面显示文章列表，点击文章标题弹出浮层现实全文，点击删除按钮可以删除文章），可以开始锻炼一下逻辑思维。选一个你比较熟悉的小课题，就是那种功能你很清楚，但是一时半会儿想不明白怎么做的小程序，比如网页版俄罗斯方块、贪吃蛇，自己想办法把它做出来（尽量简化，先别琢磨什么关卡、难度之类的事儿）。可以查资料，但是最终要手敲。
注意数据与展示分离，你程序中的状态是一回事儿，找一个全局对象存储它，展示到网页上是另一回事儿，写一个函数，根据那个全局对象里的数据集中修改 DOM。你要是混淆到一块儿去，保证你做不出来。另外注意分模块，不相干的代码，要分写在不同的文件里。
至此，你已经是一个编程爱好者，能用代码做出实际功能了。
等你把小程序做出来了，就可以关注下代码习惯了。设计模式什么的你先别关心，去网上找一个 js 编程规范，百度的，airbnb 的都可以，照着改，改到符合规范为止。
到这里练习可以暂时停止了，重新找出你那本《javascript 高级编程》，认认真真看一遍，每有所悟，按照你的新想法修改之前你写过的练习代码。注意着重理解前面点到为止的概念，比如 原型链、闭包、ajax 等等。
等你看完了，觉得这本书对你来说难度仅在于体会背后的意义而不是理解内容本身了，就可以停下了，最难的部分你已经学完了。
至此，你应该具备了相当的自学能力，对前端的理解力已经不是往日可比。
下一步是工程化你的代码。
先安装 nodejs，学习 nodejs 的基础知识，搞清楚 nodejs 是用来干什么的，npm 又是干什么的（先别管服务器端的那些东西，暂时你还玩不动，nodejs api 方面，会读写文件暂时就够用了）。然后去网上搜索“js 打包”、“eslint”等词条，搞清楚什么是前端工程化，为什么要工程化。
等你看懂了，拿出你做的小程序，去网上搜索 webpack 的用法，用 webpack 把它打包成发布脚本。多摆弄一下 webpack 的配置，比如把 jquery 打包到你的程序里，以及单独引用到网页里，分别试试，再比如把 css 打包到程序里，以及打包为单独的 css 文件。注意多上网搜索，搞清楚每种配置的意义是什么，对性能和代码维护有什么影响。
现在，配合着 webpack，如果你愿意，你可以学习一下 es6、less 等新工具了。相比上面的东西，这些东西极其简单，花不了你多长时间。如果你不愿意，可以暂时搁置。
至此，主要基础设施已经建设完毕。
但是你还有两个缺憾，第一，你没写过真正的网站，第二，你对 css 还不太懂。
所以我们还需要最后的练习，一个简单网站项目。写个什么网站你说了算，比如你可以仿一下知乎或者优酷的部分页面，你可以设想一个主流程，比如用户登录–视频列表–视频播放，这就是三个页面。
这个练习目的有三个：
第一，学习框架使用。
第二，练习 css 使用。
第三，体会多页面项目的开发过程。
为了达到第一目的，你要学习一下前端框架。不要觉得这很难，鉴于你前面基础不错，现在你应该完全可以看看框架文档就敲出 demo 代码来（如果不行，说明你前面敷衍了）。
初学我推荐 React＋reflux 的组合，为啥是这俩呢，按理说 vue2.0 入门最方便？
一来，现在用 React 的团队确实比较多；
二来，现在新版本的 angular 和 vue 都混合了各家思想，反倒是 React 思想最单纯；
第三，reflux 虽然不时髦，但是语法很朴实，不容易迷糊；
第四，vue 的文档做的太好了，过于好了……我觉得练习嘛，还是顺便练练检索和英语比较好对吧。
关于框架，我不想掰开细说。因为如果你多少是个 make sense 的人，经过上面那个使用 jquery 的小程序练习，应该已经发现，贪吃蛇这个程度的程序，其实就是三件事——管理程序中的状态（如果你是理工出身，可以联想一下状态矩阵、状态方程等概念），把状态画出来（可以联想控制论中的传递函数），以及监听事件改变状态。然后你可能已经产生了一些想法，认为这三件事儿的实现其实是有规律可循的，甚至总结出了一套代码结构和一些公用工具。如果是这样，那就简单了，所谓框架，就是那些比你经验丰富的老司机给出的结构和工具。对照着你的理解，你可以把框架的每个部分和你脑子里的部分对应起来。这时候，理解框架会变得极其容易。
剩下的就是你自己的事儿了，如何用 webpack 组织代码，如何把 css 写的尽量还原你仿的站，如何用 react 把页面中的功能实现出来（比如视频播放页，左边视频列表，右边播放器，列表和播放器都自己写，以及点击列表中的视频播放器不刷新网页直接切换这样的联动），慢慢嗑，不着急。如果你学了 es6 和 less，可以都用上。
三个注意：
注意使用第三方库提高开发效率，比如显示时间，就可以用 moment.js。
注意代码规范，时刻不要忘记规范。
注意思考程序设计，哪些是公共代码，哪些是组件代码，哪些是页面代码，代码如何复用，等等。可以翻翻《设计模式》，但是不建议套用，尤其是不理解的模式不要用。
等你最后这个练习也做得像模像样了，你将收获以下成就：
现在你的编程基础跟靠前端吃饭的人比，不算垫底的（这个标准其实不高，你懂的各行各业都有些基本功一塌糊涂的人）。
你已经具备成为职业前端工程师的常识和潜力，换句话说，如果你真的想做编程工作，可以为求职做准备了。
后面的事情，就不是你要学什么，而是你想做什么了——你可以再多做点练习，比如编写自己的个人网站。也可以深挖原理，比如阅读库或者框架代码，等等，看你的兴趣了。当然，也可以边求职边学习（虽然说实话现在前端领域对初学者有种不友好的趋势），面试中暴露的短板，就可以着重补充。比如你想做移动端，却不了解 click 延时和点透是什么，就可以着重补充移动端技术，等等。
总之，随缘就好。
