国内最新最全的Web前端开发学习路线图

准备篇

适合人群:适合零基础小白

目标:掌握HTML、CSS、JavaScript等前端基本技术,满足市场对于静态页面布局的需求。

开发工具安装配置

●sublime
●webstorm
●Visual Studio Code

HTML

●理解如何浏览和创建网页
●基本的语法规范
●网页之间的链接与跳转
●标签节点层级节点

CSS

●基本语法
●盒模型的高级用法
●常用布局模型

JavaScript入门

●基础语法和变量
●数据类型和转换
●分支与循环
●函数、数组等内置对象

等待中...

京东首页实战

●CSS代码抽象与复用
●浮动的盒子布局
●层级的使用
●定位特性的各种使用场景

基础篇

适合人群:有一定HTML、CSS、JS基础的同学

目标:掌握JS前端页面交互。

JavaScript基础

●JS语言的基本构成
●变量与表达式
●数据类型
●语句结构
●函数基础

DOM + BOM

●节点对象的操作
●事件特性及使用
●常见的内置DOM对象
●常见的BOM功能

网页特效与进阶

●在网页特效中常用的编程接口
●动画编程与事件
●缓动框架封装和应用
●正则表达式及应用

Jquery

●选择器
●常用API
●插件机制
●原理分析
●项目实战

核心篇

适合人群:有一定HTML、CSS、JS基础的同学

目标:掌握web编程核心技能。

HTML5 + CSS3

●语义化结构
●其他常见API
●CSS3选择器和新属性
●CSS3过渡和动画
●CSS3伸缩布局

等待中...

服务器编程

●端的概念
●Web服务器的概念
●XML和JSON

等待中...

PHP

●PHP基础语法
●PHP服务端编程基础

AJAX

●异步数据交互
●模板引擎的使用
●跨域的实现方案

移动Web开发

●响应式布局
●Bootsulap框架剖析
●Zepto.js库
●预编译CSS

进阶篇

适合人群:有一定HTML、CSS、JS基础的同学

目标:达到对编程思想的提高与升华。

面向对象

●面向对象理论
●对象的基本概念
●对象的属性和方法

等待中...

常用的模式与思想

●开闭原则
●MVC思想
●高内聚低耦合
●工厂模式

JavaScript高级特性

●通过构造函数创建对象
●原型对象和原型链
●继承的多种实现方式
●函数本质以及function构成

等待中...

造函数

●作用域链
●闭包

封装一个自己的框架

●选择器框架
●CSS操作封装
●属性操作封装

高级篇

适合人群:有一定HTML、CSS、JS基础的同学

目标:掌握当下最前沿的全样式解决方案。

等待中...

前端工作流

●自动化流程工具使用
●源代码版本控制
●依赖项目管理工具
●项目模板脚手架

流行框架

●Angular基本使用
●Angular高级特性
●VueJS基本入门和路由
●项目实战:豆瓣电影

等待中...

模块化开发

●模块化开发规范
●常用的模块化开发工具
●RequireJS与SeaJS
●AMD/CMD
●统一规范UMD

NodeJS

●Node介绍
●基本操作
●常用内置模块
●高级特性
●常用框架

移动APP开发

适合人群:有一定HTML、CSS、JS基础的同学

目标:熟练使用各种模式开发移动应用。

混合式应用开发

●混合式平台架构
●混合式开发实践
●京东APP端实战

微信开发

●微信公众号介绍
●平台API对接
●X5兼容处理
●内置接口

等待中...

模块化开发

●模块化开发规范
●常用的模块化开发工具
●RequireJS与SeaJS
●AMD/CMD
●统一规范UMD

等待中...

React

●组件化思想
●核心特性
●JSX
●TODOMVC案例

等待中...

其他移动APP开发框架

●PhoneGap
●AppCan
●HTML5+

岗位名称
\
实习生\见习生
初级培训\初级前端开发工程师
高级培训\初级前端开发工程师
初级前端开发工程师
中级前端开发工程师
高级前端开发工程师
资深前端开发工程师
前端技术专家

层次
\
实习
P1
P2
P3
P4(aliwork)
P5
P6
P7

主要职责
\
1、页面及需求联系
2、基本技能联系
1、页面及需求联系
2、基本技能联系
1、独立完成需求
1、完成前端的日常需求。2、根据视觉和交互原型的要求，实现htmldemo的交互效果。
3、倾听客户需求，在指导下完成商业意思明确的前端开发任务
1、完成前端的日常需求
2、根据视觉和交互原型的要求，实现htmldemo的交互效果。
3、倾听客户需求，在指导下完成商业意思明确的前端开发任务
4、完成普通的前端项目开发
1、完成前端项目开发
2、对新人的专业培训
3、跟踪客户需求，独立完成需求解决方案
4、参与组件或类库的编写工作
1、参与各种项目开发环节，提供前端解决方案
2、负责前端代码审核和规范制定
3、设计前端架构并带领项目成员进行组件开发
与项目相关方协作，保障项目进度和质量
1、参与各种项目需求，提供前端解决方案。
2、设计前端架构并带领项目成员进行组件开发
3、展技术难点攻关研究，提供技术解决方案
4、负责技术专利的发掘和专利申请的初步审核

基本条件
教育程度
工作年限
\
\
\
\
\
\
\
\
\
1年以上前端开发经验
\
2年以上前端开发经验
\
3年以上前端开发经验
\
\

HTML技能
了解HTML技术，能运用一些HTML标签
了解HTML技术，能运用一些HTML标签，了解HTML各个版本的特性，有一定的基础理论知识
熟练使用HTML标签，对HTML标签特性有一定理解
熟练使用HTML标签，对HTML标签特性有一定理解。对HTML语义化有一定了解
熟练使用HTML标签，对HTML标签特性有一定理解。HTML代码符合语义化要求，可续性强。了解不同的HTML版本及对应的标签特性
1、对HTML(包括HTML的不同版本)有深入的研究
2、对HTML应用有一定见解
3、HTML代码语义话和结构明晰，可读性强，可扩展和维护性强
1、对HTML(包括HTML的不同版本)有深入的研究
2、有丰富的HTML应用经验
1、对HTML(包括HTML的不同版本)有深入的研究
2、有丰富的HTML应用经验

CSS技能
了解CSS，能运用一些CSS属性
有一定的CSS基础理论知识，能运用CSS属性进行网页布局和视觉实现。
熟练使用CSS属性及选择器，能使用一些CSShack
熟练使用CSS属性及选择器，能使用一些CSShack。对模块化和栅格化布局有一定的了解。
熟练使用CSS属性及选择器，能使用CSShack。对模块化和栅格化布局有一定的了解。
1、熟悉各种CSS属性和选择器
2、对各个版本的CSS属性有深入研究
3、对选择器性能和应用有一定见解
1、熟悉各种CSS属性和选择器
2、对各个版本的CSS属性有深入研究
3、对选择器性能和应用有一定见解
1、熟悉各种CSS属性和选择器
2、对各个版本的CSS属性有深入研究
3、对选择器性能和应用有一定见解

脚本编程技能
了解一门脚本语言
了解脚本语言基本语法，能自己手写简单的demo
能独立使用JS完成一些简单的需求
能独立使用JS完成一些简单的需求
能熟练使用JS或AS等脚本语言编程
1、能熟练使用JS或AS等脚本语言编程
2、熟悉ECMA(包括ECMA262\ECMA357等)规范
3、对DOM编程性能有一定的了解
4、能自己封装一些常用的函数类库
1、深刻了解脚本语言的各种规范
2、对程序算法和结构有深入研究
3、至少熟练两种脚本编程语言
1、深刻了解脚本语言的各种规范
2、对程序算法和结构有深入研究
3、熟练各种脚本编程语言
4、有丰富的设计模式应用经验

专业能力
框架应用能力
无
至少了解一种前端框架
至少能使用一种前端框架或函数库
至少能使用一种前端框架或函数库
能熟练的使用主流的前端框架
1、能熟练的使用主流的前端框架
2、对主流的前端框架有一定的研究
3、熟练使用各种wedget组件
1、对主流的前端框架有深入的研究
2、有丰富的前端框架开开发
3、丰富的wedget组件开发经验
1、有丰富的前端框架开开发
2、丰富的wedget组件开发经验

WEB开发技能
无
无
无
有一定的WEB开发基础
熟悉AJAX开发，对基本的数据传输协议有一定了解
1、至少熟练使用一门服务端变成语言
2、有一定的WEB开发经验
3、了解各种网络协议
4、能使用各种开放API
5、或熟悉flex开发
1、有丰富的WEB开发经验
2、熟悉各种数据传输协议和开放接口
3、有丰富的开放性API开发经验
1、有丰富的WEB开发经验
2、有丰富的开放性API设计经验
3、有丰富的开发模式应用经验
4、有丰富的系统设计经验

平台及环境兼容与性能
无
熟悉几种主流浏览器
能处理(IE系列，firefox3.0+，chrome10+)几种浏览器的兼容
兼容各种主流浏览器
兼容各种主流浏览器
1、兼容各种浏览器
2、对移动终端平台有良好的支持
3、有较高的WEB性能
4、了解linux等操作系统并能使用一些简单的shell命令
1、有一定的桌面软件或移动终端软件开发能(air,Android，ios...)
2、有在windows,linux，IOS等平台下进行前端开发的能力
3、有丰富的性能优化经验
4、对安全机制有深入的理解
1、有丰富的多平台开发经验
2、对平台兼容性有深入的研究
3、有丰富的性能及安全经验
4、能提供基于平台开发的解决方案

开发工具及调试工具使用
会使用PS，会使用DW等文本编辑工具
会使用PS，会使用DW等文本编辑工具
熟练使用PS，熟练使用DW等文本编辑工具
熟练使用视觉设计软件和文本编辑软件，至少能简单使用浏览器开发调试工具
熟练使用视觉设计软件和文本编辑软件，会使用浏览器开发调试工具
1、熟练使用各种浏览器调试工具
2、熟练使用各种开发软件及开发平台
1、有一定的浏览器插件开发经验
2、有一定的开发工具插件开发技能
1、熟悉浏览器插件开发等技术
2、提供基础应用的开发工具程序

文档及代码质量
无
无
无
代码结构明晰工整
代码工整，有明晰的结构，可读性强，可维护性强，有一定的文档编写能力。有规范的代码注释风格。
1、有编写技术文档的能力
2、熟悉JsDoc Toolkit等文档工具
3、熟悉YUICompress等代码压缩工具
1、较强的文档设计能力
2、代码的规范以及技术说明的撰写
3、能编写项目流程对应环节的文档
1、有系统的文档撰写能力
2、提供具有参考价值的技术文档和规范文档。
3、提供具有参考学习价值的案例教程

关注细节
一般
一般
一般
良好
良好
优秀
卓越
卓越

客户专注度
一般
一般
一般
良好
良好
优秀
卓越
卓越

素质能力
责任感
一般
一般
一般
良好
强烈
强烈
强烈
强烈

主动性
一般
一般
一般
良好
积极
积极
积极
积极

沟通能力
一般
一般
一般
良好
优秀
优秀
卓越
卓越

学习能力
一般
一般
一般
良好
优秀
优秀
卓越
卓越

特别要求
项目经验
无
无
无
无
无
对项目技术难点有一定的解决能力
有丰富的项目解决能力，并提供优质高效的解决方案
有丰富的项目管理经验

六大阶段
学完后目标
知识点
视频资源(附笔记+PPT+模板+源码)
密码/播放地址

准备篇
学习周期：15天

学完后目标：

1、熟悉媒体查询和响应式设计，使得设计有适配不同的移动;

2、熟悉基础CSS的格式和CSS盒模式;

3、理解网页间是如何链接的、如何设计多列布局，可以处理表单字段和媒体元素;

4、理解如何创建和浏览一个基本的网页。

市场价值：

熟练掌握之后，可以满足市场静态页面布局，但是市场就业工资相对较低，还需继续往下学习。
开发工具的安装配置的介绍
sublime、webstorm、Visual Studio Code

HTML
理解如何浏览和创建网页、基本的语法规范、常用标签及属性、网页之间的链接与跳转、标签节点层级节点

CSS
基本语法和三种书写位置、选择器和格式化排版、盒模型的高级用法、常用布局模型

JavaScript入门
基础语法和变量、数据类型和数据类型转换、条件判断、循环语句、函数、数组等内置对象

京东首页实战
CSS代码抽象与复用、浮动的盒子布局、padding和margin 使用、层级的使用、定位特性的各种使用场景
《视频：前端开发基础环境配置》
《笔记：前端开发基础环境配置》

《前端轻松入门： HTML超强视频分享》

《前端轻松入门：CSS超强视频分享》
《CSS梅兰商城项目实战视频教程传智出品，无偿分享！》

《快速入门JavaScript 三天视频教程分享》

正在玩命更新中.....
更新中

更新中

更新中

更新中

更新中

基础篇
学习周期：20天

学完后目标：

1、能够基于jQuery实现炫酷效果和复杂的功能模块；

2、能创造或添加自定义效果到网页上；

3、能熟练添加标准的动画效果到网页上；

4、熟练操作DOM模型。

市场价值：8-13K
JavaScript基础
JS语言的基本构成、变量、数据类型、表达式、选择结构、循环结构、短路语句、函数基础

DOM + BOM
DOM基本结构、节点对象的操作、事件特性及使用、常见的内置DOM对象、常见的BOM功能

网页特效与进阶
在网页特效中常用的编程接口、动画编程、事件对象和冒泡、缓动框架封装和旋转木马案例、正则表达式及应用

Jquery
选择器、基本操作API、动画API、事件API、插件机制、原理分析、项目实战
《五天Javascript基础加强视频分享！》

正在玩命更新中.....

正在玩命更新中.....

正在玩命更新中.....
更新中

更新中

更新中

更新中

核心篇
学习周期：20天

学完后目标：

1、能够基于jQueryMobile/Zepto等框架进行移动端js功能开发；

2、能够熟练使用html5/css3/ canvas进行移动端页面和功能效果开发，并且能够基于原生和框架进行响应式效果开发；

3、能够基于jQuery、bootstrap等框架实现炫酷效果和复杂的功能模块；

4、能够独立制作电商类，企业类网站，以及常见js动态效果。

市场价值：13-18K
HTML5 + CSS3
语义化结构、多媒体、本地存储、其他常见API、CSS3 选择器、CSS3 边框、背景、阴影、CSS3 过渡和动画、CSS3 伸缩布局、Canvas

服务端编程
端的概念、Web 服务器的概念、服务器搭建、XML与JSON

PHP
PHP基础语法、PHP服务端编程基础

AJAX
基本编程接口、异步数据交互、模板引擎的使用、跨域的实现方案、增量加载

移动Web开发
响应式布局、Bootstrap框架深度使用、Zepto.js库、预编译CSS
《五天Javascript基础加强视频分享！》

正在玩命更新中.....

正在玩命更新中.....

《2016年最新AJAX教程》

《传智前端就业班视频分享：移动web开发课程》
更新中

更新中

更新中

更新中

更新中

进阶篇
学习周期：15天

学完后目标：

1、熟练使用闭包、高级函数、立即执行函数（匿名函数）等；

2、试炼使用元编程，解决Callback等

3、熟悉JavaScript基本语法

市场价值：18-22K
面向对象中在JS中的体现与实践
面向对象理论、对象的基本概念、对象的属性和方法、通过字面量创建对象

开发过程中常用的模式与思想
开闭原则、MVC思想、高内聚低耦合、工厂模式

JavaScript高级特性
通过构造函数创建对象、原型对象、继承的多种实现方式、原型链、函数的本质以及Function构造函数、作用域链、闭包、沙箱模式

封装一个自己的框架
选择框架、CSS操作封装、属性操作封装、其他DOM操作的封装、事件框架的封装
《JavaScript高级面向对象配套源码+笔记+PPT》（已更新）

正在玩命更新中.....

正在玩命更新中.....

《传智播客前端就业班视频分享:JavaScript高级框架设计》
《JavaScript高级框架课程配套笔记+PPT+源码》
更新中

更新中

更新中

更新中

高级篇
学习周期：20天

学完后目标：

1、了解主流的后台技术和前后端协作方式，从全局角度理解项目的整个生命周期；

2、熟悉nodeJs的全栈式解决方案

3、从前端的全局角度认识相关的框架

4、熟练使用VueJS,AngularJS等框架完成复杂的前端功能，熟悉前端工作流。

市场价值：22K+
前端工作流
自动化流程工具使用、源代码版本控制工具使用、依赖项管理工具、项目模板脚手架

流行框架
Angular基本使用、Angular高级特性、VueJS基本入门和路由、项目实战:豆瓣电影

模块化开发
模块化开发规范、常用的模块化开发工具、RequireJS、AMD/CMD、统一规范UMD、SeaJS

NodeJS
Node介绍、基本操作、常用内置模块、高级特性、常用框架
正在玩命更新中.....

正在玩命更新中.....

正在玩命更新中.....

正在玩命更新中.....
更新中

更新中

更新中

更新中

移动APP开发
学习周期：8天

学完后目标：

1、深刻理解移动APP的开发模式和技术选型；

2、熟练使用各种模式开发移动应用；

3、了解微信企业公共号开发

市场价值：22K+
混合式应用开发
混合式平台架构、混合式开发实践、京东APP端实战

微信开发
微信公共号介绍、平台API对接、X5兼容处理、内置接口

React
组件化思想、基本使用、核心特性、JSX、TODOMVC案例

React Native
环境与工具、实现思路、常用组件、常用插件、综合案例：豆瓣电影

移动其他APP开发框架
PhoneGap、AppCan、HTML5+、Framework7
正在玩命更新中.....

正在玩命更新中.....

正在玩命更新中.....

正在玩命更新中.....

正在玩命更新中.....
更新中

更新中

更新中

更新中

更新中