web 前端开发学习路线

初级

HTML 5

• HTML 5 与 HTML 4 的区别
• HTML 5 新增的主体结构元素
• HTML 5 新增的非主体结构元素
• HTML 5 表单新增元素与属性
• HTML 5 表单新增元素与属性（续）
• HTML 5 改良的 input 元素的种类
• HTML 5 增强的页面元素
• HTML 5 编辑 API 之 Range 对象（一）
• HTML 5 编辑 API 之 Range 对象（二）
• HTML 5 音频视频
• HTML 5 拖放
• HTML 5 Canvas 标签的使用
• HTML 5 Canvas 使用路径
• HTML 5 Canvas 绘制渐变图形与绘制变形图形
• HTML 5 Canvas 图形绘制处理
• HTML 5 Canvas 应用
• SVG
• HTML 5 File API 的应用
• HTML 5 File API 的应用进阶
• Web 存储
• HTML 5 应用缓存与 Web Workers
• 服务器推送事件
• 响应式布局基础
• 响应式布局之 Bootstrap
• 使用 HTML 5 构建应用布局和页面

CSS 3

• CSS 入门基础知识
• CSS 基本样式讲解
• CSS 定位
• CSS 盒子模型
• CSS 常用操作
• CSS 选择器
• CSS 动画 — 页面特效
• HTML 与 CSS 简单页面效果实例
• CSS 3 选择器详解（一）
• CSS 3 选择器详解（二）
• CSS 3 选择器详解（三）
• CSS 3 文字与字体相关样式
• CSS 3 盒子相关样式
• CSS 3 背景与边框相关样式
• SVN 介绍和应用
• CSS 3 中的动画功能
• 老式浏览器支持 HTML 5 和 CSS 3
• CSS 3 布局属性全接触

初级开发工程师实战

• HTML 5 实战：图片与标签配合制作网页
• HTML 实战－极客学院播放视频页面布局
• HTML 5 开发项目实战：照片墙
• HTML 5 开发项目实战：导航栏
• HTML 实战 - 极客学院路径图页面布局实现
• 响应式布局之 Bootstrap

初级前端工程师面试题

中级

JavaScript

• JavaScript 基础教程
• JavaScript 语法详解
• JavaScript 函数
• JavaScript 异常处理和事件处理
• JavaScript DOM 对象
• JavaScript 事件详解
• JavaScript 内置对象
• JavaScript DOM 对象控制 HTML元素详解
• JavaScript 浏览器对象
• JavaScript 瀑布流
• JavaScript 面向对象详解
• JavaScript 正则表达式

中级前端开发工程师常用的库—— jQuery

• jQuery 简介及语法
• jQuery 选择器和事件
• jQuery HTML 之捕获、设置、元素添加、元素删除
• jQuery 效果之隐藏与显示、淡入淡出、滑动、回调
• jQuery AJAX 之异步访问和加载片段
• jQuery 的扩展与 noConflict
• jQuery CSS 操作及 jQuery 的盒子模型
• jQuery 之元素的遍历与元素的过滤
• jQuery 菜单
• jQuery 实例：标签切换

中级前端开发工程师常用的库—— jQuery UI

• jQuery UI 的下载与使用
• jQuery UI Interactions
• jQuery UI Widgets（1）
• jQuery UI Widgets（2）

中级前端开发工程师常用的库—— Backbone

• Backbone 概述

中级前端开发工程师常用的库—— AngularJS

• AngularJS 入门
• AngularJS 进阶
• AngularJS 进阶 - Services 与指令的使用
• AngularJs 内置服务 $ http 的使用
• AngularJS 进阶 - Directive 的使用
• AngularJS 之移动 App 开发

中级前端开发工程师常用的库—— Bootstrap

• Bootstrap 简介
• Bootstrap CSS 栅格、代码和表格
• Bootstrap CSS 表单、按钮和图片
• Bootstrap 组件之下拉菜单、按钮组、按钮式下拉菜单
• Bootstrap 输入框组、导航和导航条
• Bootstrap 媒体对象、面板和Well
• Bootstrap 过度效果、模太框和下拉菜单
• Bootstrap 基本组件
• Bootstrap 警告框、进度条和列表组
• Bootstrap 滚动监听、标签页和工具提示
• Bootstrap 实例
• Bootstrap 进阶

中级前端开发工程师常用的库—— ReactJS

• React 概述
• JSX 语法及特点介绍
• React 生命周期详解
• React 属性和状态详解
• React 中事件的用法
• React 组件的协同使用
• React 表单详解

项目实战

• HTML 5 开发项目实战：列表切换
• HTML 实战：标签切换效果
• jQuery 实例：标签切换
• HTML 5 开发项目实战：幽灵按钮
• JavaScript 瀑布流
• jQuery 瀑布流
• HTML 5 开发项目实战：侧边栏固定
• HTML 5 实战：回到顶部功能实现

中级前端工程师面试题

高级

CSS 在工程中的改变

• 面向对象的 CSS
• Less 介绍和应用
• SASS 介绍和应用
• CSS 后处理器

项目构建与部署

• Grunt 介绍和应用
• Gulp 介绍和应用
• Bower 介绍和应用
• Yeoman 介绍和应用
• FIS 介绍和应用
• 深入理解 Git 远程操作
• Git 远程协作
• 理解 Git 中 push.default 配置的作用
• 使用 Git 进行问题定位以及代码查找
• SVN 介绍和应用

前端常用的库与实用技术

• JavaScript 模块化
• JavaScript 数据推送
• JavaScript 高级函数
• JavaScript 高级技巧
• JavaScript 面向切面编程
• JavaScript 多线程

常见设计模式

• JavaScript 设计模式简介
• JavaScript 设计模式之 单例模式
• JavaScript 设计模式之 构造函数模式
• JavaScript 设计模式之 建造者模式
• JavaScript 设计模式之 工厂模式
• JavaScript 设计模式之 外观模式
• JavaScript 设计模式之 代理模式
• JavaScript 设计模式之 观察者模式
• JavaScript 设计模式之 策略模式
• JavaScript 设计模式之 命令模式
• JavaScript 设计模式之 迭代器模式
• JavaScript 设计模式之 职责链模式
• JavaScript 设计模式之 适配器模式
• JavaScript 设计模式之 模板方法
• JavaScript 设计模式之 原型模式

前端开发其他工程师配合

• 前端工程师和美工配合的那些事
• 和 Node.js 配合的那些事
• 和产品经理配合的那些事
• 和 PHP 配合的那些事

Web 安全

• Web 安全介绍与基础入门知识
• XSS 入门与介绍
• 跨站伪造请求（CSRF）

Windows & Linux 基础

• Linux 用户、群组和权限
• SSH 服务实战应用
• bash shell 的学习
• 文件的压缩与打包
• Linux 文件和目录管理

Node.js

• 初识 Node.js
• Node.js 开发环境搭建
• Node.js 实战项目开发：极客学院 “技术问答”
• 使用 loopback 快速搭建用户系统
• 基于 Node.js 平台的下一代 web 开发框架 koa
• NodeJS 爬虫系统

游戏开发

• TypeScript 环境搭建
• TypeScript 基本数据类型
• TypeScript 类 ( Class )
• TypeScript 函数
• TypeScript 接口（ Interface ）
• TypeScript 泛型
• TypeScript 模块
• Egret 实例开发小游戏：测专注力
• Egret 环境搭建
• Egret 显示对象
• Egret 显示容器
• Egret 事件机制
• Egret 绘图、文本、动画和计时器
• Egret 位图纹理
• Egret 声音和网络
• Egret 实例及屏幕适配
• Egret GUI 库
• Cocos2d-JS 第一步
• Cocos2d-JS 基础数学知识
• Cocos2d-JS 基础元素
• Cocos2d-JS Action 动作与特效
• Cocos2d-JS v3 对象缓冲池
• Cocos2d-JS v3 事件管理器
• Cocos2d-JS v3 对象
• Cocos2d-JS v3 工作流
• Cocos2d-JS CocosStudio 2.x 基础控件
• Cocos2d-JS CocosStudio 2.x 容器控件
• Cocos2d-JS 虚拟手柄

资深前端开发工程面试题

Google V8 引擎 的实际应用