前端小白该如何学习？以及掌握哪些能力才能从事前端开发工程师

对于一些没有编程经验的人来讲，一开始就学习 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 个周。

2.JavaScript + jQuery

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

jQuery 的话，去官方文档看便可。

熟练掌握大概须要1个月。

3.Vue.js/Angular 2/React

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

4.webpack & 测试

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

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

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

可是，若是你已经学了这么多，你已经有足够的能力去继续前端的学习，直到你能够完美胜任一个前端工程师的要求。

最后留一点小的建议

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

咱们采集的是石头，可是必须时刻展望将来的大教堂。

持续作一些小改进，慢慢地你就会惊奇地发现你的经验获得了怎么样的发展，你的技能获得了怎样的提高。

若是你迫切的须要提高本身的能力，>这里推荐一下个人前端学习交流=q=u=n=：491404389 ，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。最新技术，与企业需求同步，好友都在里面学习交流，天天都会有大牛定时讲解前端技术! 点击：加入