小编整理了一套针对小白的web前端学习路线，通过本教程的学习，可以从零开始，一步步的掌握前端开发的各项相关技能，最终达到企业对初级前端开发工程师，中级前端开发工程师，高级开发工程师，等职位的要求。
本学习路线涉及web前端知识点包含：HTML入门知识以及CSS基础语法，javascript日常开发，能够实现所有常见特效及数据交互动作，nodeJS、vue.js、react、Angular4等开发知识，vue、小程序、移动端页面、HTML+css等的实战应用，及掌握node.js、vue、js等web前端面试常见的问题。
1. 基础 （前端页面重构）
对于web前端学习小白来说，html+css基础尤为重要，可以说是编程小白的必经之路，学完后能写出你看到的静态页面。
1）PC端网站布局
包含知识点： HTML基础，CSS基础，CSS核心属性；CSS样式层叠，继承，盒模型；容器，溢出及元素类型；浏览器兼容与宽高自适应……
2）HTML5+CSS3基础
包含知识点： HTML5新增的元素与属性；表单域增强元素；CSS3选择器；文字字体相关样式；CSS3位移与变形处理……
3）WebApp页面布局
包含知识点： 移动端页面设计规范； 移动端切图； 流式布局（100%布局）； 等比缩放布局（rem布局）；响应式布局； 淘宝移动端页面适配方案……
2. JavaScript高级程序设计
本阶段主要针对，想要学习前端以及全栈开发工程师的，0 基础入门学员。教程集合了图文、视频、代码、项目所有内容， 让你全方位立体式的进行 JavaScript 的学习。
可以让你在 40 天内完成从新手到大师的成长。学习完成本课程以后，可以具有编写类似于小米、华为等 PC 端电商网站的能力。
1）原生JavaScript交互功能开发
包含知识点：基本语法；循环语句；函数与数组；String与Date；BOM与DOM；事件；拖拽效果；cookie存储；正则表达式；Ajax；面向对象基础；运动与游戏开发……
2）面向对象进阶与ES5/ES6/ES7应用
包含知识点：Promise；设计模式（观察者模式等）；原型链；构造函数；执行上下文栈与执行上下文；变量对象与活动对象；作用域链；闭包；this；ES5； ES6； ES7……
3）JavaScript工具库自主研发
包含知识点：DOM库；事件库；AJAX库；原型和继承库；MVVM核心库；基于SPA的路由库……
3. PC端全栈开发
本阶段主要讲解了大部分 JQuery 常用的方法，拥有通过 JQuery 编写完成前后端项目的整站能力。
1） jQuery经典交互特效开发
知识点包含：时间轴特效；tab页面切换效果；网页定位导航特效；滑动门特效； 焦点图轮播特效；导航条菜单效果；瀑布流特效；弹出层效果；倒计时效果；抽奖效果……
2）PHP+MySQL后端基础
知识点包含：Apache；PHP；MySQL；HTTP(s)协议详解；Ajax进阶、跨域与Defered；Apache与Nginx 环境搭建与配置；接口的定义；Mock数据；Restful；前后端联调；前端安全(XSS,CSRF,JSON注入)……
3）前端工程化与模块化应用
知识点包含：Gulp；Webpack；NPM；Linux命令；Git/SVN；CommonJS；AMD；CMD；ES6模块化……
4）PC端全栈开发项目
知识点包含：大首页；列表页与详情页；展示与交互特效；搜索；登录与注册；购物车； jQueryUI 与 jQuery EasyUI；Bootstrap(ACE)；Highcharts/Echarts；ArtTemplate；velocity；smarty； 云平台系统前端；Apache+PHP+MySQL服务器搭建……
4. Node.js后端开发
主阶段主要讲解NodeJs服务器端开发以及常用框架搭建服务器。掌握服务器端开发以及模块化原理。包括服务器代理、权限认证、及时通信、IO 操作等。
1）Node.js基础
包含知识点：Node.js介绍；MongoDB；GraphGL；Express；Koa2；测试框架mocha；socket 即时通信项目……
2）Node.js高级全栈项目
包含知识点：基于M站+Node.js+MongoDB高级全栈项目开发……
5. Vue.js前端框架
Vue.js 致力于构建数据驱动的 web 应用开发框架，是一个精简的 MVVM。Vue.js专注于 MVVM 模型的 ViewModel 层。简单的数据操作，就可以完成页面的更新，当然也有很多类似的框架，如 Angular，React，但是 Vue 以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。
1）Vue.js开发基础
包含知识点：WebApp开发基础；MVVM模式；前端组件化； 单文件组件；组件间传值；Vue实例；E19Vue实例生命周期； Vue的模版语法；计算属性,方法与侦听器；Vue中的条件渲染；Vue中的列表渲染；Vue中的set方法；Vue动画……
2）应用Vue.js开发WebApp项目
包含知识点：环境配置；项目代码介绍；单文件组件与Vue中的路由；单页应用VS多页应用；Mint UI；Element UI；项目的联调，测试与发布上线……
6. React前端框架
本阶段以实战开发为出发点，从零开始讲解 React 的使用，从基础的组件、路由、状态、属性、数据通信各类问题到 Webpack、Redux 等主流框架和工具之间的配合。配合丰富的实战案例及项目，帮你从入门到真正会用 React。
1）React 开发基础
包含知识点：React简介；React开发环境准备；React中的组件；JSX语法；拆分组件与组件之间的传值；React developer tools 安装及使用；PropTypes 与 DefaultProps 的应用；props，state 与 render 函数的关系；深入了解React虚拟DOM；虚拟 DOM 中的 Diff 算法；React 中 ref 的使用；React的生命周期函数及使用场景；使用Charles实现本地数据mock；React 中实现 CSS 动画效果；React-redux 中间件使用……
2）应用React开发WebApp项目
包含知识点：Ant Design组件库；React Router 4 路由；项目组件编写；使用 Immutable.js 来管理store中的数据；项目的联调、测试与发布上线……
7. 混合开发(Hybrid,RN)
1）微信公众号开发
包含知识点：初识微信公众号；订阅号的基本功能；使用百度BAE实现代码的快速上线；使用Git完成线上代码部署；公众号开发权限及功能接入；微信JSSDK接口API；微信场景项目开发与接入……
2）各类混合应用开发
包含知识点：自主原生Navtive Hybrid(iOS、Android)；第三方Hybrid框架Cordova/Phone gap；第三方Hybrid框架MUI + HTML5……
3）阿里钉钉企业E应用（支付宝小程序）
包含知识点：E应用功开发入门；E应用开发流程；E应用开发基础；E应用开发实战……
8. 小程序开发
本阶段主要针对微信小程序最新特性，全面讲解小程序最新特性，通过学习本课程全面掌握小程序开发。
1）微信小程序开发
包含知识点：微信小程序初探；小程序入门必学；小程序组件体验；小程序大功能；项目实战带你征服小程序……
2）多端小程序开发
包含知识点：支付宝小程序；百度小程序；字节跳动小程序……
9. 原生APP开发
Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。
在开发时可以提供毫秒级热重载，拥有富有表现力，漂亮的用户界面，接近原生的性能。同 时也可以非常方便的与原生代码集成，是移动端 app 开发的不二选择。
1）React Native
包含知识点：React Native初探；React Native 项目导航； React Native 项目文本框；React Native 项目滚动分页；React Native 其他组件……
2）Flutter开发
包含知识点：开发准备；快速起步；界面结构；基础部件；布局；视图；Sliver；路由；表单；按钮； 输入；对话框；状态管理；网络请求；动画；测试、发布与部署……
10. Angular前端框架
知识点包含：TypeScript 基础与进阶；； 开发环境配置；； Hello World；； 架构、模块与组件； 模板；元数据、数据绑定与数据显示；表单；服务与指令；依赖注入； 路由； Ionic 3 框架……
11. 大数据可视化
知识点包含：数据可视化基础；Echars、Hignchars； D3.js 入门； D3.js 进阶；D3.js 选择集与数据； D3.js 高级应用；D3.js 应用工具：NVD3、n3-charts……
