步骤1: HTML5基础语法与标签

本周是入门前端的第一步，学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周内容可以进行简单的页面结构搭建。

第1课
前置引导课（课前必看）
本课程主要讲解行业前景、学习方法指导以及环境搭建。
第2课
HTML5语法与基础标签
本课程主要讲解HTML5概念、语法及常用基础标签。
第3课
列表标签
本课程主要讲解列表标签及属性的应用。
第4课
多媒体与语义化标签
本课程主要讲解图片、超链接以及音视频标签及属性的应用。
第5课
表单标签
本课程主要讲解表单概念、语法及创建，并通过案例掌握知识。
第6课
表格标签
本课程介绍表格概念、语法、操作，并通过案例掌握知识。

步骤2: CSS3基础语法与盒模型

CSS3是网页的"美容师"，本周开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发。

第1课
CSS3基础入门
本课程主要讲解CSS3语法、书写位置等基础内容。
第2课
CSS3选择器
本课程主要讲解CSS3选择器、继承、层叠及权重等内容。
第3课
文本与字体属性
CSS3为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。
第4课
盒模型
本课程学习一下css的盒子模型，理解了盒子模型，才能更好的排版，进行页面布局。

步骤3: CSS3浮动定位与背景样式

简单的样式开发还不够，通过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。能够进行特殊图形绘制，开发更美观的网页效果。

第1课
浮动与定位
本课程主要介绍了浮动的作用和定位的知识，带领大家用更好的方式来布局页面。
第2课
边框与圆角
带来神奇的圆角边框、阴影框及其图片边框等，非常具有实用价值的新属性
第3课
背景与渐变
本课程带领大家了解一下背景颜色、背景图片的相关知识，掌握网页背景控制技能
第4课
2D与3D转换
深入讲解元素如何扭曲、移位或旋转，让我们可以更自由得装饰和变形HTML组件

步骤4: CSS3动画与穷游首页开发实战

CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。

第1课
过渡与动画
一起探索如何通过CSS3属性值的变化实现动画效果，如何触发这些动画产生交互
第2课
HTML5&CSS3测试
本课为考评，满分100学分，共20道题，限时30分钟
第3课
“仿穷游”首页静态项目
本课程通过实战的讲解，带领大家体验真实开发中的的布局样式。

步骤5: JS基础语法与表达式

JS是网页编程的第一步，本周开始学习JS编程语言，掌握基础语法结构、变量声明和命名规则、数据类型、表达式和操作符，学完本周内容可以进行简单的JS代码编写。

第1课
JS语法与变量
本课程主要讲解JS的语法、变量与命名规则，带你见识多彩的JS世界。
第2课
JS基本数据类型
本课程主要讲解数据类型及类型转换，掌握JS数据类型的千变万化。
第3课
表达式与操作符
本课程主要讲解表达式与操作符，掌握JS计算式和逻辑操作符，为特效编写夯实基础。

步骤6: JS流程控制语句与数组

本周继续深入学习JS编程语言，掌握条件分支语句、循环语句和数组，学完本周内容可以用简洁的代码实现强大功能。

第1课
流程控制语句
本课程主要讲解条件分支语句和循环语句的使用，用简洁的代码实现强大功能。
第2课
数组
本课程主要讲解数组，掌握数组方法，操作数据更便捷。

步骤7: JS函数与DOM

如想实现更炫的动态效果，那么操控网页元素很重要，通过掌握函数编程、DOM操作、事件以及BOM对象，让你能实现典型的触发和动态交互效果。

第1课
函数
掌握函数的使用，学习函数的封装，体会代码复用的过程和它带来的便利
第2课
DOM
本课程全面讲解节点获取、节点操作、节点移除和克隆以及为页面中的元素绑定事件，从而可以触发和实现我们想要的交互效果。
第3课
BOM基础
学习浏览器对象模型“BOM”，可以对浏览器窗口进行访问和操作，与浏览器“对话”。

步骤8: 面向对象

面向对象是开发中非常重要的思想，在本周我们将开始运用面向对象思想进行程序开发，编写高质量代码，解决企业级编程协同问题。

第1课
面向对象
本课程主要讲解对象的概念、声明方式等及js中的继承与封装。

步骤9: 项目实战：仿穷游JS特效开发

实战出真知，本周综合运用H5、CSS3和JS所学知识，从0到1完成一个具备CSS3动画和JS特效的多特效旅游网页。掌握企业常见的网页开发方式和各类特效实现方案。

第1课
正则表达式
本课程主要讲解正则表达式的创建、匹配字符串、转义、字符类常用字符。
第2课
JS测试组卷
本课为考评，满分100学分，共20道题，限时30分钟
第3课
“仿穷游”首页动态项目
本课程结合前面所学内容，通过实战的讲解，带领大家体验真实开发中的JS特效开发。

步骤10: ES6基础入门

ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率。

第1课
初识 ES6
本课程主要讲解ES6声明变量与常量的方式，以及与使用var声明变量的区别。
第2课
模板字符串与箭头函数
本课程主要讲解模板字符串的使用。以及箭头函数的特点与应用。
第3课
解构赋值
本课程主要讲解对象、字符串、数组的解构赋值的使用。
第4课
对象字面量的增强与函数参数的默认值
本课程主要讲解对象字面量的简洁表达方式，以及函数参数默认值的使用。

步骤11: ES6语法扩展

本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。

第1课
剩余参数与展开运算符
本课程是将易混淆的剩余参数与展开运算符对比讲解，便于更好的区分与使用。
第2课
Set 和 Map 数据结构
本课程主要是讲解ES6中新增的数据类型Set与Map。
第3课
遍历器与 for...of 循环
本课程主要讲解Iterator 遍历器与 for...of 循环
第4课
ES6 的新增方法
本课程主要是对于ES6新增的一些方法的讲解。

步骤12: ES6之Promise与Class类

Promise 和 Class（类）是ES6中非常重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来作为对象的模板使用，强化面向对象的使用。

第1课
Promise
Promise是用来解决回调地狱的，是异步编程的一种解决方案。
第2课
Class 类
Class类是ES6中新引入的概念，类似于我们之前学习的构造函数。

步骤13: ES6之Module模块与Babel编译

ES6 在语言标准的层面上，实现了模块功能。可以实现将一个大程序拆分成互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使前后端差异越来越小。

第1课
Module 模块
本课程讲解模块化的开发方式 ，带大家体验如何将一个复杂的功能，拆分为一个个的小的模块，从而提高代码复用率，也便于更好的维护代码。
第2课
Babel 与 Webpack
本课程讲解Babel与Webpack的使用，带领大家解决ES6的兼容性，以及掌握Webpack项目构建。
第3课
ES6测试
本课为考评，满分100学分，共20道题，限时30分钟

步骤14: HTTP 协议、存储、Ajax

本周将开启前后端数据交互的学习，来理解前后端开发的区别，了解网络通信的相关概念，并对与后台通信、获取数据有一个初体验。概念比较抽象，先作为了解。在后面项目开发环节，随着对知识的运用，对概念会有更深一步的理解。

第1课
前后端数据交互与 HTTP 协议
该课程讲解在开发过程中，前后端的区别，以及理解HTTP协议，熟悉网络通信相关概念。
第2课
本地存储
本课程主要讲解在本地存储数据的几种方式，以及如何操作。
第3课
Ajax&Fetch 与跨域请求
实际开发中，数据一般不是前台写死的，而是从后端请求的，本课程中主要讲解的就是前端如何向后台请求数据。

步骤15: 项目实战：仿穷游组件化开发

组件化开发是一种高级编程思想，适用于团队协作开发，是企业中常见的一种开发模式。本周会使用组件化方式来完成“仿穷游商城首页”的重构。掌握组件化开发能够更好的促进团队协作，提高开发和调试效率，可维护性更高。

第1课
“仿穷游”首页组件化开发
本课程通过实战讲解，将ES6、webpack、网络请求等知识串联起来，使用组件化方式来完成“仿穷游商城首页”的重构。

步骤16: 移动基础

移动开发基础是进行webApp开发第一步。本周将开启前端学习的新篇章。通过移动端基础知识的学习，能够独立实现适配不同移动端终端的页面。

第1课
移动Web开发入门
本课程带领大家了解移动Web开发的基本概念，以及入门基础知识，为后面学习移动技能打下基础。
第2课
响应式布局
本课程带领的大家学习可以处理不同大小屏幕的布局方式——响应式布局。
第3课
移动端屏幕适配
本课程带领大家学习移动端的适配方案，结合实际案例，掌握移动端的适配布局。

步骤17: 移动进阶之高效开发

移动端高质量的开发，是移动端开发的必备技能。本周继续移动端的学习，学习移动端的事件、开发中的常见问题，以及如何使项目的性能更加优化。

第1课
移动端事件
本阶段将带领大家学习移动端最常用的touch事件等，并通过一个幻灯片案例综合运用。
第2课
移动调试和终端检测
本课程，讲解移动端的浏览器调试、真机调试、远程调试、多终端调试，以及终端检测。
第3课
移动常见问题
本课程带领大家提前解决容易出错的地方，比如兼容性处理、文字溢出、居中等问题。
第4课
移动性能优化
本课程从HTML、CSSS、JS三方面展开，讲解这三种语言不同的性能优化方案。
第5课
移动基础测试
本课为考评，满分100学分，共20道题，限时30分钟

步骤18: 项目实战：仿穷游移动webapp开发

接下来的一周，我们将迎来webApp项目的开发，实现从PC端开发迈向移动端。从项目分析、组件划分、结构搭建、功能实现、性能优化。体验真实企业中移动端项目的开发流程

第1课
Swiper触摸滑动插件
本课程介绍了如何使用 Swiper 触摸滑动插件
第2课
“仿穷游”商城webapp
本课程结合前面所学内容，通过实战的讲解，带领大家体验真实的wenapp开发流程。

步骤19: 小程序基础与慕课小程序实战

本周开始学习爆火的轻应用开发技术——小程序 。通过对小程序知识的学习，能够独立开发企业级小程序，拥有解决主流小程序功能需求的能力。

第1课
小程序基础API
本课程带领大家从appid申请到基础API讲解。带你掌握小程序开发的基础知识。
第2课
慕课小程序实战开发
本课程完成慕课小程序开发，掌握页面配置、数据绑定、列表渲染、事件机制、以及模块化。

步骤20: React.js基础语法与新闻网站实战

React.js是企业开发热门框架之一 。通过对React.js基础和项目的学习，具备构建企业级项目和解决核心业务问题的能力，快速接入企业项目。

第1课
React开发环境准备
本课程主要讲解React开发环境搭建以及项目目录结构，带你了解React项目骨架
第2课
React基础入门
本课程主要讲解react中的基础知识，包括组件、JSX语法、数据驱动的设计思想和事件绑定、TodoList功能等。
第3课
React组件与生命周期
本课程主要讲解组件拆分与组件之间的传值、Props, State 与 render 函数、ref 、生命周期函数、Ant Design 组件库的使用以及React 中的前端路由
第4课
项目：React实现新闻网站核心功能
本课程将带你结合组件拆分、样式布局、获取组件数据、路由配置、动态路由的使用等知识点完成新闻网站的详情页、登录等核心功能

步骤21: Sass基础与Vue.js基础语法

Vue.js是企业开发另一热门框架，易用、灵活、高效，对于初学者很友好。本周通过对Vue.js基础和Sass布局技术的学习，为后续的全栈项目开发打下基础。

第1课
Sass基础
本课程老师将带领大家学习Sass的基础知识，掌握Sass环境安装、基础语法和样式布局。
第2课
vue基础入门（上）
本课程，从学习方法开始介绍，通过一个小例子开启Vue起步。最后讲解基础语法，一步步解剖vue，让大家对vue有个新的认识。
第3课
vue基础入门（中）
本课程深入讲解 Vue 组件使用的细节点，从父子组件的参数传递及校验入手，逐步深入到非父子组件间传值、插槽、作用域插槽、动态组件等内容的讲解。
第4课
vue基础入门（下）
本课程主要讲解vue3.0新增加的内容。

步骤22: 项目实战：Vue.js仿京东到家电商全栈项目前端开发（上）

从本周开始进入到电商全栈项目开发，首先使用Vue.js前端实战的第一部分首页和商家详情页，还原实际开发流程，综合运用所学知识，完成页面开发，掌握开发中常见问题解决技巧。

第1课
项目：仿京东到家首页开发
本课程从环境的基础配置开始讲解，分析工程代码目录结构，之后开启项目开发环节，将带大家完整的实现项目中的首页。
第2课
项目：仿京东到家商家详情开发
本课程主要讲解商家详情开发以及数据渲染和购物车联动功能开发。

步骤23: 项目实战：Vue.js仿京东到家电商全栈项目前端（下）

Vue.js前端项目实战的第二部分，实现电商核心业务订单和地址管理模块，掌握开发中常见问题解决技巧，真实数据访问，开发完整的Vue.js电商前端项目。

第1课
项目：仿京东到家订单页开发
本课程主要讲解订单页开发以及数据渲染，掌握订单页地址与地址管理的数据联动。
第2课
项目联调与打包发布
本课程主要讲解地址管理页开发，掌握电商应用中新建地址、修改地址等功能开发流程。

步骤24: 全栈必备基础Node.js

学前端不至于前端，从本周开始学习服务端基础知识，掌握什么是服务端以及服务端必备node.js，夯实基础，迈进前端全栈开发。

第1课
前后端那些事儿
本课程重点介绍服务端开发和前端开发思路上的区别，为后续的服务端开发做一个基础的铺垫。
第2课
Node.js基础入门
本课程主要学习什么是node.js，node.js与其他服务端语言的区别和优势，以及下载安装、npm 插件、common.js 模块化、debug调试以及node.js 和 js 的区别。
第3课
Node.js处理HTTP
本课程主要讲解如何使用原生 node.js 处理的http请求，包括路由分析和数据返回，实现技术方案设计中的各个API ,为后面学习框架做铺垫。

步骤25: koa2中间件与MongoDB数据库

真实企业开发离不开数据库，Koa2框架有效的提高开发效率，本周掌握前端必备的前端全栈开发知识，为后面开发全栈项目蓄力。

第1课
Koa2框架
koa2是企业使用的nodejs框架，因此，本课程将详细讲解koa2框架的基本使用、中间件机制以及洋葱圈模型。
第2课
MongoDB数据库
本课程讲解连接数据库，实现真正的数据存储和查询。从mongodb的安装和使用，到用node.js操作mongodb，最后将mongodb应用到已经开发完的API 中。

步骤26: 项目实战：node.js仿京东到家电商全栈项目后端开发

本周开始进入到电商全栈项目的后端开发，对标企业标准开发流程。从登录实现方案、项目需求分析、接口和数据结构设计到业务开发，帮你打通前后端任督二脉，突破全栈技术瓶颈，为就业加码。

第1课
登录实现方案与实践
用户登录是一个系统必备的功能，也是作为后端开发必须要学会的能力。因此，本课程主要讲解cookie和登录校验、session存储用户信息、 koa2实现登录、登录中间件。
第2课
项目：留言板
本课程主要讲解从需求分析、设计数据结构、设计接口、项目环境搭建、再到开发接口的全流程，详细讲解社交类留言板系统的功能开发。
第3课
项目：仿京东到家全栈项目
本课程主要讲解仿京东到家到家项目的数据库设计、接口设计以及后端与前端界面对接。掌握前后端分离开发技术与服务端开发能力。

步骤27: 就业必备基础技术面试分析

面试是通往成功就业的关键一步，本周包含布局基础以及JS和ES6等常见考点和经典面试题分析，带你把知识串成线，掌握前端面试技巧，顺利通关基础技能面试。

第1课
HTML与CSS面试课程
本课程老师带领大家一起分析面试过程中常见的面试题，分析问题本身，掌握考察点，并讲解参考答案。
第2课
JavaSript面试课
本课程老师带领大家一起分析面试过程中常见的JS和ES6面试题，分析问题本身，掌握考察点，并讲解参考答案。

步骤28: 就业必备框架与全栈技术面试分析

框架、小程序以及全栈相关内容也是面试必考。本周带大家梳理的常见考点和经典面试题分析，理清面试解题方法论，完成最后一厘米的冲刺。

第1课
框架面试课
本课程老师带领大家一起分析面试过程中常见的主流框架面试题，分析问题本身，掌握考察点，并讲解参考答案。
第2课
全栈面试
本课程老师带领大家一起分析面试过程中常见的全栈面试题，分析问题本身，掌握考察点，并讲解参考答案。