| 第一阶段：HTML&CSS基础，Photoshop，JavaScript基础 | ||
| 阶段 | 课程列表 | 课程目标 |
|---|---|---|
| HTML&CSS详解 | 浏览器与服务器的交互；HTML的语义化；HTML中常用的标签以及每个标签的语义 | 可掌握的核心能力： （1）了解语义化的概念； （2）能够掌握HTML，CSS使用技巧； （3）能够掌握DIV + CSS布局模式； （4）熟练使用ps对图的处理。 可解决的现实问题： 与美工对接，完成网站静态页面的开发，为后期编写页面动态效果打基础。 市场价值： 了解网页的组成，能够实现静态页面编写，但是无法完成页面上的动态效果。 |
| CSS语法；选择器；字体样式；边框；背景；图片格式详解；定位；浮动；CSS盒模型；常见布局 | ||
| HTML+CSS综合项目 | 三层分离原则,使用div+css布局完成一个完整的页面 | |
| Photoshop | 使用ps将美工设计的PSD图转成静态页面，了解网站前台页面的开发 | |
| JavaScript基础 | JavaScript发展历史，JavaScript的基础语法 | |
| 第二阶段：JavaScript面向对象，DOM综合项目，BOM操作，正则表达式，jQuery综合项目 | ||
| 阶段 | 课程列表 | 课程目标 |
|---|---|---|
| 电商项目 | html+css应用、网页布局、Web服务器部署 | 可掌握的核心能力： （1）能够掌握JavaScript基本语法； （2）掌握DOM的各种操作； （3）熟练使用面向对象思想进行DOM编程； （4）掌握使用jQuery操作DOM； （5）熟练使用和编写jQuery插件； （6）独立完成电商网站的页面搭建（包括HTML结构、CSS样式、JavaScript特效组件）； （7）掌握应对业务编程的能力。 可解决的现实问题： 学生具备JavaScript开发能力，能够完成常见页面效果开发，为就业班后期课程打下基础。 市场价值： 具备JavaScript语言编程思想，但是还不能达到企业的用人标准。 |
| JavaScript面向对象 | JavaScript基本语法、算法基础、常用数据结构、企业编程规范 | |
| 面向对象思想、JavaScript中的对象、JSON、闭包、原型、字符串和数组的常用方法 | ||
| DOM基本操作&综合项目 | DOM编程思想、事件、DOM节点操作、动画 | |
| 特效实现、页面布局、事件处理、浏览器兼容性处理 | ||
| BOM操作 | 网页重定向、定时器、history对象、navigator对象 | |
| 正则表达式 | 基本元字符、JavaScript中的正则表达式对象、表单验证 | |
| jQuery基本操作&综合项目 | jQuery的优势、jQuery选择器、jQuery中的动画、jQuery插件;jQueryUI | |
| jQuery编程思想、编写jQuery插件、基本元素操作、事件处理 | ||
| 第三阶段：服务器+Ajax+综合案例 | ||
| 阶段 | 课程列表 | 课程目标 |
|---|---|---|
| 客户端服务器基础 | 计算机基本组成、网络相关概念（IP、域名、端口、DNS）、服务器环境配置 | 可掌握的核心能力： （1）能够建立客户端服务器交互模型，熟悉网络通信相关概念； （2）熟悉基本的php基础语法，能够开发简单的后台接口； （3）了解数据库基本功能； （4）熟悉原生Ajax请求流程与细节，并掌握常见跨域技巧； （5）能够基于jQuery的Ajax相关API熟练开发常见的前端功能； （6）能够独立开发基于后台接口的前端渲染形式的项目。 可解决的现实问题： 学生能够建立起客户端服务器交互模型，熟练使用Ajax实现前端功能点、能够进行前后端协作开发、能够独立开发基于后台接口的数据管理平台项目。 市场价值： 掌握前后端协作开发相关知识点、能够快速融入实际的工作场景。 |
| 后台编程语言php | php基础语法（变量、数据类型、分支循环语句、数组、函数、参数传递get/post）、动态网站、后台接口开发 | |
| 数据库 | 数据库基本概念、基本SQL语句、php连接数据库进行基本增删改查 | |
| Ajax与跨域 | 同步与异步概念、原生Ajax、jQuery的Ajax相关API使用、低层原理分析、实用案例 | |
| bootstrap | bootstrap栅格系统、常用样式布局、常用jQuery插件 | |
| 综合项目 | 前端bootstrap布局、后台接口调用、jQuery相关插件、文件上传、基于后台接口的前端渲染分析 | |
| 第四阶段：HTML5&CSS3与移动Web开发实战 | ||
| 阶段 | 课程列表 | 课程目标 |
|---|---|---|
| HTML5 | HTML5新语义标签、新语义标签兼容性问题及解决方案 | 可掌握的核心能力： （1）熟练使用HTML5&CSS3实现网页特炫效果； （2）掌握常用移动端框架使用方法； （3）掌握常用移动端调试方法； （4）掌握常用移动端适配方法； （5）熟练使用移动端touch事件及手势封装； （6）掌握响应式布局的写法； （7）掌握CSS预处理器Sass的使用； （8）掌握移动端整站开发架构搭建、项目开发、性能优化等整站开发能力。 可解决的现实问题： 学生具备移动端web开发能力,拥有根据设计图转化为对应的web,同时处理移动设备适配问题。 市场价值： 备移动web开发能力,能够和后台交互，独立开发移动端的交互网站。 |
| HTML5新表单元素、HTML5新表单属性，HTML5新输入类型 | ||
| HTML5音频播放、HTML5视频播放、HTML5DOM扩展、HTMl5自定义属性、HTML5data-*配套dom语法地理定位、文件读取、元素拖拽、多媒体加强、应用缓存、历史管理、web存储 | ||
| CSS3选择器 | 属性选择器、伪类选择器、伪元素选择器 | |
| CSS3特效 | 过渡属性、动画属性、第三方动画库使用 | |
| CSS3新增样式 | 阴影、盒子模型、背景新增属性、颜色、2d&3d变换 | |
| CSS3字体 | 字体图标、web字体、iconfont使用、iconmoon使用 | |
| CSS3兼容性 | CanIUse网站使用、CSS3兼容性查询、浏览器前缀、渐进增强、优雅降级 | |
| CSS3布局 | 多行布局、flex布局 | |
| 移动开发基础与调试 | 移动端屏幕介绍、移动端浏览器介绍、移动端操作系统介绍 | |
| Chrome模拟调试、真机调试 | ||
| 屏幕适配 | Viewport、rem、vw、主流适配方案 | |
| 响应式布局 | 媒体查询、设备尺寸划分、主流响应式布局框架 | |
| 触屏事件 | touch事件、手势封装 | |
| 移动端框架 | iScroll、swiper、fastclick、zepto、framework7 | |
| Canvas | Canvas基础API、绘制复杂图形报表、echart | |
| Sass、Less开发 | CSS预处理器、Sass变量、嵌套、、混合、函数、继承、运算等 | |
| 第五阶段：综合项目&流行框架 | ||
| 阶段 | 课程列表 | 课程目标 |
|---|---|---|
| 电商综合项目 | 项目环境搭建;mysql数据库的使用;前后端分离与传统架构的区别、移动端部分使用mui搭建页面布局、下拉刷新、滚动加载效果、使用localstorage完成搜索历史记录、后台管理部分jQuery、bootstrap、文件上传、echarts报表团队协作工具的使用 | 可掌握的核心能力： （1）了解项目开发的流程 （2）能够熟练开发移动端和PC端的交互式网站； （3）能够用目前热门JavaScript框架Vue.js来开发项目； （4）掌握Angular框架的使用； （5）掌握React框架的使用； （6）能够利用webpack、gulp打包工具实现网站资源的打包； （7）掌握源代码管理软件的使用。 可解决的现实问题： （1）能够完全胜任公司项目框架从0到1的搭建； （2）能够读懂公司已有的利用webpack搭建好的框架结构或者是使用vuejs开发的项目； （3）能够利用webpack提高项目团队的开发效率； （4）能够使用现在市场上流行的框架进行开发常见项目； （5）能够进行团队合作开发项目。 市场价值： 学完以后能够一个人胜任前端项目的独立开发，从项目框架搭建开始到业务功能的实现，以及后台api的调用均能胜任，使课程不仅仅只有教还有练，让学生能够快速上手企业项目开发。 |
| Vue | vue1.0与vue2.0的区别、指令、Vue实例上的属性、方法、事件、过滤器、事件处理、Vue组件、Vue过渡效果(动画)、路由(vue-router库）、vue-resource;es6语法、从到有开发项目;webpack的使用 | |
| Angular | 单页应用、MVC、常用指令、双向绑定和单向绑定、模块、控制器controller、$watch、自定义指令、jqLite、过滤器、格式化过滤、数据过滤、服务$http、$location;前端路由、http拦截器 | |
| React | 快速入门、数据渲染、虚拟DOM、交互与动态UI、JSX 语法、组件组件化、组件复用、flux;redux、集成工具、附加模块;生命周期、state props context等 | |
| 第六阶段：JavaScript高级，微信小程序 | ||
| 阶段 | 课程列表 | 课程目标 |
|---|---|---|
| JavaScript高级 | 面向对象特征、继承的实现、原型链、单例模式、工厂模式、观察者模式 | 可掌握的核心能力： （1）了解常见的设计模式； （2）掌握NodeJS的基本使用； （3）掌握Express的使用； （4）掌握微信小程序； （5）掌握ReactNative。 可解决的现实问题： （1）能够使用面向对象的思想解决问题； （2）能够解释代码的执行过程； （3）能够使用NodeJS开发后台接口，打通前后端； （4）能够开发微信小程序的应用； （5）能够使用ReactNative开发WebApp，打包安装。 市场价值： 具有开发简单的小程序的能力, 能跟上最新技术的脚步,具有前后端开发能力的前端开发者。 能熟练使用各种前端工具, 具有开发WebApp并打包上线的能力, 能与其他开发者合理沟通协作开发项目, 符合企业高端需求。 |
| JavaScript高级 | 面向对象特征、继承的实现、原型链、单例模式、工厂模式、观察者模式 | |
| 微信小程序 | 小程序入门概念及演示、小程序开发工具介绍与创建quick_start项目、小程序文件结构、wxml、wxss、常用组件(view,image,text,navigator,swiper等)、小程序常用api | |
| NodeJS | NodeJS历史、发展、特征与现状、同步与异步、环境安装, 文件操作、网络操作、模块化基础、 npm、异步编程、Express | |
| React Native | 环境搭建、快速入门、属性与状态、样式与宽高、Flexbox布局、常用控件(TextInput, ScrollView, ListView等)、网络处理、导航、事件、动画与计时器、硬件调试 | |
