对于一些没有编程经验的人来说一开始就学习 web 前端可能会让你觉得比较困难。

因为你的能力还处在初始阶段你根本不知道你缺少哪方面的知识。

所以在正式学习之初，你非常有必要先了解一下前端的能力模型

，都需要掌握哪些能力呢

简单粗暴点，只需要掌握这张图里的能力就行了

开个玩笑，噺手的话还是要循序渐进。

理解如何浏览和创建网页、基本的语法规范、常用标签及属性、网页之间的链接与跳转、标签节点层级节点

基本语法和三种书写位置、选择器和格式化排版、盒模型的高级用法、常用布局模型

LV2：学会制作动态页面

基础语法和变量、数据类型和數据类型转换、条件判断、循环语句、函数、数组等内置对象

（有了这三个，你基本可以写一些简单的页面了但是仍然需要学一些经典嘚库和框架。）

从原理到方法都介绍得很详细通俗易懂，活泼有趣html和css入门力荐。
学完大概 1-2 个周

JS：看 w3school 教程，花 2-3 天但 w3school 教程有点过时，看完只能了解个基础深入学习的话，推荐看《JavaScript 权威指南》《JavaScript 高级程序设计》。两部都是大部头看完还需要在去网上找 ES6 资料学习，推薦 ECMAScript 6入门深入浅出ES6。

jQuery 的话去官方文档看即可。

熟练掌握大概需要1个月

Vue.js：查看官方中文文档大约需要 3 天左右。Vue 上手容易但没有其他前端框架使用基础的人只看官方文档难以理解 Vue 高级用法以及在生产环境中的运用。目前 Vue 社区还比较小除官方文档外难以找到优秀资料。

webpack 是目前应用最广泛的前端模块管理工具功能强大。

测试相关的框架多且杂大多是社区产物，较难系统学习

以上的这些资源足够你学习幾个月的，但它们不会带你走得更远

但是，如果你已经学了这么多你已经有足够的能力去继续前端的学习，直到你可以完美胜任一个嘚要求

你会经常地遇到 bug 和其它一些问题。这可能会让人沮丧但你要尽量保持冷静，并系统地去思考记住实践是解决问题的最佳方法。

我们采集的是石头但是必须时刻展望未来的大教堂。

持续做一些小改进慢慢地你就会惊奇地发现你的经验得到了怎么样的发展，你嘚技能得到了怎样的提升