如何从前端小白变身为前端大神

作为刚刚接触前端的童鞋，对学习的方向可能会感到迷茫，通过阅读者篇文章相信会对你的学习方向有所帮助！

A. 初级阶段

本阶段主要是基本的网页技术，学会这些技术你就会制作一些常见的网页和简单的特效。

Photoshop：几乎无人不知的作图软件，对于做前端的朋友来说可以作图，还可以用来切图；

http://www.ps-xxw.cn/shiyongjiqiao/2538.html

互联网原理和HTML：作为前端工程师就要了解互联网的基本原理，像是协议、网站运行原理等等；HTML不用多说必须熟练掌握的超文本标记语言；

http://www.w3school.com.cn/html/index.asp

CSS基础和高级技巧：CSS作为层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，作为前端工程师必须掌握。

http://www.w3school.com.cn/css/index.asp

JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，作为前端工程师必须掌握，否则你就只能算是个美工；

http://www.w3school.com.cn/js/index.asp

DOM：文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

http://www.w3school.com.cn/htmldom/index.asp

jQuery：一个快速、简洁的JavaScript框架，写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。是前端最常用的框架之一；

http://www.w3school.com.cn/jquery/index.asp

B. 中级阶段

本阶段主要是一Java Script为主进行深入的学习了解，与此同时了解一门后端语言，这对今后于后端对接时有一定帮助；

JavaScript 进阶：对原生 JavaScript 的闭包、函数式编程、原型等知识点进行学习和深入理解。掌握好 JavaScript，首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰，全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点。把握好这一点之后，才有可能进一步使用好这门语言。

http://www.w3school.com.cn/js/index_pro.asp

Ajax ：他是将之前学到的HTML、CSS、XML、js等web知识结合起来使用的一门技术,通过XMLHttpRequest对象实现异步的操作，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

http://www.w3school.com.cn/ajax/index.asp

服务器知识和PHP：了解学习些服务器的知识同时学习一门后端语言，这对今后进一步学习至关重要；

http://www.w3school.com.cn/php/index.asp

HTML5：主要是在HTML的基础上进行了增减了，针对增减内容学习即可，像是canvas标签 vidoe标签等等；

http://www.w3school.com.cn/html5/index.asp

CSS3：CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

http://www.w3school.com.cn/css3/index.asp

Bootstrap：是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。响应式布局佳品；

http://www.bootcss.com/

C. 高级阶段

这个阶段主要对各个组六框架学习，通过这些框架可以自己发服务器端，手机端等等！

Node.js：基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

http://nodejs.cn/

Angular.js：AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

http://www.runoob.com/angularjs/angularjs-tutorial.html

Backone.js：复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序

http://www.css88.com/doc/backbone/

vue.js：一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

https://cn.vuejs.org/

react native：开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

http://reactnative.cn/

React.js：用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

http://react-china.org/