对于一些没有编程经验的人来说，一开始就学习 web 前端可能会让你觉得比较困难。
因为你的能力还处在初始阶段，你根本不知道你缺少哪方面的知识。
所以，在正式学习之初，你非常有必要先了解一下前端的能力模型。
前端工程师，都需要掌握哪些能力呢？
简单粗暴点，只需要掌握这张图里的能力就行了。

开个玩笑，新手的话，还是要循序渐进。
LV1：学会制作静态页面（Web + Mobile）
HTML、HTML5：
理解如何浏览和创建网页、基本的语法规范、常用标签及属性、网页之间的链接与跳转、标签节点层级节点。
CSS:
基本语法和三种书写位置、选择器和格式化排版、盒模型的高级用法、常用布局模型
LV2：学会制作动态页面
JavaScript ：
基础语法和变量、数据类型和数据类型转换、条件判断、循环语句、函数、数组等内置对象

（有了这三个，你基本可以写一些简单的页面了，但是仍然需要学一些经典的库和框架。）
经典库：比如 jQuery,YUI2,YUI3
经典框架：比如 Bootstrap
LV3：前后端分离，打造 Web App
Vue.js/AngularJS2/React
Node.js，使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域
自动化测试
其他：
熟悉 Git 与 Shell 的使用
学习路径
1.入门 HTML + CSS
这里推荐一本书，Head First HTML与CSS（第2版）。
从原理到方法都介绍得很详细，通俗易懂，活泼有趣。html和css入门力荐。
学完大概 1-2 个周。