对于一些没有编程经验的人来说，一开始就学习 web 前端可能会让你觉得比较困难。
因为你的能力还处在初始阶段，你根本不知道你缺少哪方面的知识。
所以，在正式学习之初，你非常有必要先了解一下前端的能力模型。
前端工程师，都需要掌握哪些能力？
简单粗暴点，只需要掌握这张图里的能力就行了。
三大禁术
有了这三个，你基本可以写一些简单的页面了，但是仍然需要学一些经典的库和框架。
- 经典库：比如 JQuery,YUI2,YUI3
- 经典框架：比如 Bootstrap
LV3：前后端分离，打造 Web App
- Vue.js/AngularJS2/React
- 你需要熟悉并且习惯使用 Node，使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域
其他：
- 熟悉 Git 与 Shell 的使用
学习路径
入门 HTML + CSS
这里推荐一本书，Head First HTML与CSS（第2版）。
从原理到方法都介绍得很详细，通俗易懂，活泼有趣。html和css入门力荐。
学完大概 1-2 个周。
Head First HTML与 CSS
JavaScript + JQuery
JS：看 w3school 教程，花 2-3 天，但 w3school 教程有点过时，看完只能了解个基础，深入学习的话，推荐看《JavaScript 权威指南》，《JavaScript 高级程序设计》。两部都是大部头。看完还需要在去网上找 ES6 资料学习，推荐 ECMAScript 6入门，深入浅出ES6。
JQuery 的话，去官方文档看即可。
熟练掌握大概需要1个月。
Vue.js/Angular 2/React
Vue.js：查看官方中文文档大约需要 3 天左右。Vue 上手容易，但没有其他前端框架使用基础的人只看官方文档难以理解 Vue 高级用法以及在生产环境中的运用。目前 Vue 社区还比较小，除官方文档外难以找到优秀资料。
webpack & 测试
webpack 是目前应用最广泛的前端模块管理工具，功能强大。
测试相关的框架多且杂，大多是社区产物，较难系统学习。
以上的这些资源足够你学习几个月的，但它们不会带你走得更远。
但是，如果你已经学了这么多，你已经有足够的能力去继续前端的学习，直到你可以完美胜任一个前端工程师的要求。
最后留一点小的建议
你会经常地遇到 bug 和其它一些问题。这可能会让人沮丧，但你要尽量保持冷静，并系统地去思考。记住实践是解决问题的最佳方法。
我们采集的是石头，但是必须时刻展望未来的大教堂。
持续做一些小改进，慢慢地你就会惊奇地发现你的经验得到了怎么样的发展，你的技能得到了怎样的提升。
当然，如果你迫切地需要提高自己，也可以考虑去找一些在线培训，快速入门。
这里推荐一门课程，帮助你****3个月，从0基础小白到耀眼的 Web 全栈工程师。****
传送门：《Web 全栈工程师》
web交流群.jpg
网友评论