With the further development of the Internet, front-end development engineer became a very sought-after talents on the market. Many students, including the UI done before, Java, or for IT students want to learn completely zero-based front-end. The figure is a widespread online learning front-end mind mapping, represents many beginners see these dense knowledge already dizzy. Indeed, the front is covered by a very broad subject. But you also want to learn the front do not panic, but there are numerous content tracked, as long as the front step by step not afraid to learn bad!
So in the end what front-end developers need to learn? How should we learn? Next Xiaobian teach you how to learn from zero front-end basis.
First, the front-end Starter
At an introductory level, you must first learn the basic skills: according to the draft design of the UI, HTML static pages to achieve production. This requires that you have to master HTML, CSS page layout and typography, style, landscaping and other skills.
At this stage you need to learn:
1, HTML + CSS foundation
to master the use of HTML tags, layout techniques, CSS positioning of layout, style landscaping, browser compatibility.
2, JavaScript basic
grasp of basic grammar JS, conditions, statements, loops, etc., to learn common algorithms, enhanced logic.
3, the tool commonly used
such Webstrom, Sublime, Dreamweaver like. Master the shortcut keys and other techniques, can rapidly improve the efficiency of development and debugging.
This stage of the learning curve relatively high, after the completion of these, we have been able to complete the production of static pages. Of course, this is just the entry, if you want to find a job with these skills, then it is quite difficult.
Second, the primary front-end development
In the next stage of this, our goal is to achieve the basic requirements of front-end development of the industry, so they have more confidence to go out to find a monthly salary of 8,000 work!
这个阶段我们要重点掌握这两方面的能力：
1、利用jQuery、Bootstrap等框架开发复杂的交互功能与效果；
2、利用HTML5、CSS3、Canvas进行移动端开发。
针对第一方面的能力，你需要学习：
1、JavaScript基本特效
能够实现图片轮播、拖拽、放大镜等常见网页特效。
2、jQuery基础
掌握jQuery常用API的使用方法，并且能够熟悉jQuery的插件开发机制。
3、Bootstrap响应式
掌握原生响应式实现机制，能够使用Bootstrap中的栅格式布局和响应式布局进行复杂页面的布局开发。
4、AJAX基础
充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。
5、UI流行框架
掌握jQueryUI的使用，快速高效实现页面的效果呈现。
学会了这些技能，你就能够独立制作电商类、企业类网站，实现常见JS动态效果，并且能够基于jQuery、Bootstrap等框架实现炫酷的效果和复杂的功能啦！
针对第二个方面的移动端开发，你需要学习：
1、HTML5、CSS3新特性
掌握HTML5、CSS3在移动端的使用技巧。
2、Canvas基础
掌握Canvas的基本画图API，做到能实现Canvas在报表和广告展示效果方面的应用，并且能够实现炫酷的展示效果。
3、移动Web框架
能够基于jQuery Mobile/Zepto等框架进行移动端JS功能开发。
掌握这两大方面的技能，你就能达到市场上对前端工程师的基本要求了。根据市场反馈数据看，薪资普遍在8000-13000元/月，赶快加油学习吧！
三、前端开发进阶
就知道你是一个有理想要抱负的人，不会满足于做一个初级的前端开发工程师。在接下来的这个阶段，我们将走上前端开发的进阶之路，将自己的能力再往上拔高一个等级。同样，薪资也会往上升一个等级！
但是，如果你是一个前端菜鸟，接下来的文章中可能会出现一些你没有用过或者没有听过的知识点。不要着急，你可以先将文章收藏下来，今后慢慢理解。
言归正传，在这个阶段，我们要重点掌握以下两个方面的能力：
1、在实现功能的同时，考虑代码的优雅性，注重代码的性能和重用性；
2、深入理解前端框架实现原理，并且能够开发和重构通用的前端组件。
在这个阶段你需要学习以下知识：
1、面向对象开发思维
2、JavaScript面向对象
3、JavaScript闭包、作用域链、原型链等高级特性
4、常用的设计模式
5、使用原生JavaScript的原理实现框架封装
6、jQuery框架封装原理
7、jQuery插件的实现原理
掌握jQuery插件的实现原理，深刻理解插件的两种扩展方式的实现机制。
8. 组件化和模块化开发：SeaJS、RequireJS
如果你熟练掌握以上技能，就能够具备解决复杂问题和技术难点的能力，并且能够独立设计开发复杂的功能模块。如果你达到这个水平，恭喜你已经能满足前端行业的中级需求，根据市场反馈数据看，薪资普遍在 13000-20000元/月！
四、前端开发高级
写到这里，连小编自己也激动了，因为在接下来的这个阶段，我们的目标是：进军全栈开发工程师！全栈开发工程师就是那种既精前端，又通后台，遇到问题能快速定位问题、解决问题的一类大牛！据职友集数据统计，北京全栈开发工程师月薪在20K-50K之间的占比高达60%，而且人才非常缺乏！
要晋级为全栈开发工程师，我们在这个阶段得做这些事情：
1、能从前端的全局角度认识流行框架的原理与实现模式；
2、深刻理解移动App的开发模式和技术选型；
3、熟悉Node.js的全栈式解决方案；
4、了解主流的后台技术和前后端协作方式，能从全局角度理解项目的整个生命周期。
相应的，你需要学习以下这些内容：
1、Web开发工作流框架：Yeoman/Grunt/Gulp/Bower等
掌握流行的前端工作流工具，可以让前端开发更方便更高效！
2、MVC/MVVM框架：AngularJS等
掌握前端MVC/MVVM框架实现机制，通过AngularJS的实践深刻理解MVC的开发模式，理解双向数据绑定等相关概念。
3、HTML5响应式框架
4、UI流行框架：jQueryUI、EasyUI、ExtJS等
掌握常见UI框架的封装原理，通过源码分析，深入理解组件化开发思想。
5、Ionic、Angular
掌握移动端混合开发模式，通过Ionic、Angular的结合，理解使用HTML5、CSS3、JS实现App开发的整体流程和实现机制。
6、React Native
掌握移动端ReactNative的开发模式。
7、HTML5 Plus
8、Node.js全栈式开发