黑马网页开发前端基础班+就业班+中级进修班课程大纲/前端学习路线

HTML&JS+前端基础班课程大纲

所处阶段

主讲内容

技术要点

学习目标

第一阶段：
HTML5 + CSS3

HTML5

1、 浏览器与浏览器内核2、语法及使用、3、 常用标签4. 语义化5、 表单元素6、 HTML 、7 新增标签

可掌握的核心能力：

掌握 HTML5 常用标签；
掌握 CSS 语法及使用技巧；
掌握CSS3新增选择器；
掌握CSS3新增样式属性；
掌握 DIV+CSS 布局方式；
掌握常见网页布局技巧；
掌握企业级、电商级网页开发基本的流程、规范；
掌握语义化、模块化、兼容性的PC端网页开发；
掌握 Photoshop 切图以及插件切图；
熟练使用调试工具进行页面调试；
掌握基本的动画效果。


可解决的现实问题：

能够独立把美工提供的PSD效果图还原成PC端静态代码页面。

市场价值：

具备PC端静态网页开发的能力，还达不到企业用人标准。

为后面学习网页编程阶段打下坚实基础。

CSS3基础

1、CSS基本语法规范2、 常用的选择器用法与技巧 3、复合选择器使用4、 数值与单位5、文字文本样式 6、 CSS3新增选择器

CSS3进阶

1、 CSS盒子模型 2、 CSS背景技巧 3、 圆角/阴影/过渡  4、 定位和浮动 5、 伪类和伪元素  6、chrome调试工具  7、CSS高级技巧（精灵图、CSS三角、图标字体等）8、. CSS常见布局技巧大全 9、 网页开发规范以及流程 10、CSS企业级网页开发 11、网页开发常见问题以及解决方案 12、 CSS常见兼容性问题以及解决方案   13、CSS3新增属性 14、 Photoshop 切图 15、cutterman插件一键切图

电商项目

1、代码组织原则 2、项目开发实战流程 3、 电商类复杂页面布局规范 4、CSS初始化技术选择（Normalize.css使用）5、 CSS字体图标使用 6、CSS 属性书写顺序规范7、完整的多页面开发 8、 网页语义化设计 9、 CSS页面模块化开发 10、favicon图标制作 11、复杂网页结构排版技巧 12、 常见动画过渡特效 13、电商类常见布局问题解决方案 14. 将电商项目部署到web服务器

HTML&JS+前端就业班课程大纲

所处阶段

主讲内容

技术要点

学习目标

第二阶段：
移动Web网页开发

CSS3动画

1、CSS3的2D和3D变换2、animation动画3、炫酷页面开发（地图大数据热点图、大风车、旋转木马轮播图等）

学员能力体现：


掌握CSS32D、3D变换、动画效果；
了解移动端屏幕、移动端浏览器、操作系统的

不同；
掌握主流移动端调试方法；
掌握常用移动端适配方案（流式布局、

flex布局、rem适配）；
掌握主流移动端页面开发技术选型与解决方案；
掌握CSS预处理器less的使用；
掌握常用移动端框架使用方法；
掌握常见移动端页面开发流程与规范；
掌握响应式布局开发；
掌握Bootstrap开发响应式页面；
掌握适配不同终端的移动端页面开发。

可解决的现实问题：

能够独立开发移动端页面，并适配

不同移动端终端。

市场价值：

具备移动端页面开发，但是还不能达到

企业的用人标准。为后面学习网页编程

阶段打下坚实基础。

移动端页面开发

1、传统布局的局限性2、移动端屏幕介绍3、移动端浏览器介绍4、物理像素&物理像素比5、真机调试、6、viewport视口、7、移动端技术选型、8、移动端主流适配解决方案、9、移动端特殊样式、10、百分比布局&流失布局、11、Flex布局优势、12、盒子父级常见属性设置、13、盒子子级常见属性设置、14、携程网Flex移动端页面开发、15、rem单位使用、16、rem适配、17、预处理器less、18、media媒体查询、19、淘宝flexible.js移动端适配、20、cssrem插件使用、21、cutterman二倍图三倍图切图、22、移动端页面开发流程与规范、23、京东移动端首页开发

Bootstrap

1. Bootstrap框架的优势、2. 准备工作、3. 如何引入包、4. 最常用的样式模块、5. 什么是栅格系统、6. 常见的栅格参数、7. 栅格系统的预定义类、8. 响应式工具、9. 阿里百秀响应式页面开发

第三阶段：
JavaScript网页编程

JavaScript基础

1、基本输入输出方法2、变量3、数据类型4、类型转换5、运算符6、流程控制语句7、数组8、函数9、自定义对象10、内置对象和常用方法11、网页版小娜小项目

学员能力体现：

能够掌握JavaScript基本语法；
掌握常见JavaScript算法；
掌握DOM的各种操作；
熟练使用面向对象思想进行DOM编程；
掌握JavaScript的高级语法；
熟练使用jQuery操作DOM；
熟练使用和编写jQuery插件；
独立完成电商网站的页面搭建

（包括HTML结构、CSS样式、

JavaScript特效）；
掌握应对业务编程的能力；
掌握JavaScript常见兼容性方案；
掌握团队合作开发流程。

可解决的现实问题：

能够使用JavaScript/jQuery开发

网页特效/网页应用。

市场价值：

具备网页开发的基础能力(网页布局和

网页应用开发)，但是无法和服务器交互，

还达不到企业用人的标准。

WebAPIs编程

1、获取页面元素的常用方法2、页面中的事件和事件机制3、操作元素的样式和属性4、新增元素和移除元素5、BOM操作大全

网页应用/网页特效

1、轮播图2、页面放大镜3、待办事项列表4、购物车5、tabs6、JSON7、其它常用网页特效

jQuery快速开发

1、jQuery的优势2、jQuery选择器3、jQuery中的动画4、jQuery中的DOM操作5、链式编程和隐式迭代6、插件使用和制作7、常见网页特效制作大全

面向对象编程

1、面向对象思想、2、创建对象、3、JavaScript中的对象深入理解、4、闭包原理以及使用场景、5、原型以及原型链深入剖析、6、作用域链深入分析、7、函数的调用方式及this指向总结、8、Class类、constructor、super

第四阶段：
Node.js与AJAX

AJAX编程

1、AJAX的作用2、原生AJAX3、同步与异步4、http协议5、AJAX的封装6、jQuery的AJAX7、缓存问题及解决方案8、跨域请求及解决方案9、前端模板引擎

学员能力体现：

能够建立客户端服务器交互模型，熟悉网络通信相关概念；
能够使用Node.js进行Web服务端开发；
能够掌握JavaScript异步编程模型；
能够掌握JavaScript模块化编程方式；
能够使用Node.js操作MySQL数据库；
能够理解HTTP协议；
熟悉原生Ajax请求流程与细节，并掌握常见跨域技巧；
能够基于jQuery的Ajax相关API熟练开发常见的前端功能；
能够独立开发基于后台接口的动态网站、Ajax数据交互的项目；
能够独立完成企业网站从前台到后台的基本开发工作。

可解决的现实问题：

能够具备开发具有简单交互能力的网站，能够使用源代码管理工具。

市场价值：

具备基本的网站开发能力，满足企业对初级前端开发的要求。

git

1、git历史2、git与svn3、git基本使用4、git分支5、git远程仓库6、git冲突及解决方案

综合项目：
阿里百秀

1、项目初始化2、前后端分离开发3、Postman工具使用4、用户注册/登录/退出5、文章管理模块6、评论管理模块7、用户中心模块8、项目部署与发布

ES6

1、es6简介2、新增语法3、内置对象扩展4、Promise5、Async函数6、解构7.展开运算

Node.js基础

1、node.js环境安装2、如何用node.js运行代码3、Commonjs4、模块化5、模块与包6、NPM7、CNPM和Yarn8、核心模块使用9、第三方模块使用10、RESTFulAPI

服务端开发(Node.js)

1、静态和动态网站2、http模块使用3、请求响应原理4、HTTP协议5、处理页面请求6、处理表单7、会话技术(Cookie、Session)

MySQL

1、MySQL的概念2、MySQL安装3、建库和建表4、增删改查语句5、Node.js操纵MySQL

Express

1、express的概念2、express的安装3、后端路由4、静态资源托管5、中间件的原理6、常用中间件7、模板引擎8、异常处理9、Express常用API10、RESTFulAPI

第五阶段：
Vue.js项目实战

Vue.js基础

1、Vue实例2、文本与属性绑定3、计算属性computed4、侦听器watch5、Class与Style绑定6、条件渲染7、列表渲染8、事件处理9、表单输入绑定10、Vue实例生命周期11、开发Vue插件和模板过滤器12、自定义指令13、Vue组件系统14、Vue过渡和动画15、VueRouter路由系统16、组件通信17、axios请求库18、VueCLI脚手架工具19、VueDevTools调试工具20、在Vue中操作DOM

可掌握的核心能力：

能够掌握使用Vue技术栈进行项目开发；
能够掌握源代码管理工具的使用；
能够熟练掌握前后端分离开发模式；
能够掌握使用主流框架开发门户网站、管理系统、移动Web等客户端；
能够掌握Webpack项目构建配置流程；
能够掌握Web项目的部署与发布模式；
能够掌握常见网站业务模块开发。
掌握使用echarts/d3.js进行大数据可视化交互开发；

可解决的现实问题：

使用Vue技术栈开发企业级项目
掌握前后端分离的开发方式
掌握项目的打包和发布

市场价值：

理解Vue的开发理念、内部运行原理，梳理使用Vue组件开发常见功能。满足前端开发行业中的常见需求。

社交媒体-
黑马头条自媒体管理系统

1、使用VueCLI初始化项目2、使用Git+Github管理项目源代码3、使用echarts开发数据可视化4、使用axios与服务端交互5、使用VueRouter管理项目中的路由6、使用ElementUI框架7、使用Sass预处理器8、基于JWT的前后端token鉴权9、富文本编辑器解决方案10、项目打包发布上线

webpack

1、安装与基本配置2、打包JavaScript模块3、打包CSS模块4、打包图片和字体文件模块5、打包less/sass资源模块6、ES6转ES57、打包.vue资源模块8、配置ESLint代码校验工具9、使用clean-webpack-plugin插件清除打包结果目录10、使用HtmlWebpackPlugin打包HTML资源11、处理打包结果的Sourcemaps12、监视打包模式13、使用webpack-dev-server14、模块打包热更新15、treeshaking打包优化16、生产环境和开发环境分离打包17、打包优化之CodeSplitting代码分割18、打包优化之模块懒加载19、打包优化之缓存

社交媒体-
黑马头条

1、使用VueCLI初始化项目2、使用Git+Github管理项目源代码3、使用axios与服务端交互4、使用VueRouter管理项目中的路由5、使用VantUI框架6、使用Vuex管理组件状态7、使用Sass预处理器8、基于JWT的前后端token鉴权9、使用Socket.io进行实时通信10、移动端富文本编辑器解决方案11、使用Cordova打包移动App12、项目打包发布上线

Vue进阶

1、组件封装进阶2、MVVM数据绑定原理3、Render方法原理4、$nextTick方法的使用5、发布订阅模式

服务端渲染

1、SSR核心概念2、SSR基本用法3、编写通用代码4、路由和代码分割5、构建配置6、Nuxt.js

大数据可视化

1、数据库可视化基础2、echarts/d3.js入门3、其它可视化库4、大数据可视化实战项目：组件开发

第六阶段：
微信小程序

小程序基础

1、小程序注册2、小程序开发者工具使用教程3、小程序配置文件4、小程序常用组件5、小程序的模板语法6、小程序中的样式编写7、小程序中的JavaScript8、小程序应用及页的生命周期9、小程序常用API10、小程序中的自定组件11、小程序插件开发12、小程序分包加载13、小程序基础库版及兼容处理14、小程序运行机制15、小程序性能分析及优化16、小程序云开发、云函数、云数据库17、小程序上线和发布

可掌握的核心能力：

能够掌握小程序的开发基础；
能够独立开发小程序项目；
能够掌握小程序的部署与发布；
能够掌握微信支付的使用；
能够掌握小程序开发框架的使用；
掌握第三方AI平台的使用。


可解决的现实问题：

掌握整个小程序开发和传统web开发的区别；
掌握企业小程序开发、发布和上线的整体流程；
拥有解决和实现市场上主流小程序的功能需求。

市场价值：

掌握前端行业的小程序发展趋势，熟悉小程序项目的整体运作流程，并且具备独立开发企业级小程序的能力，既可以使用原生小程序也可以使用小程序框架来完成项目。

小程序项目：
黑马优购商城

1、原生框架的搭建2、商品首页模块3、分类商品模块4、商品列表模块5、商品详情模块6、支付和登录模块7、收藏模块8、购物车模块9、订单模块10、搜索页面模块11、个人中心模块12、意见反馈模块13、项目的优化和发布上线

第七阶段：
React.js项目实战

React.js基础

1、create-react-app脚手架工具2、JSX语法3、条件渲染4、列表渲染和key5、React组件系统6、PureComponent7、setState()8、事件处理9、表单处理10、组件通讯11、render-props12、高阶组件13、虚拟DOM和Diff算法14、ReactRouter路由系统15、Redux状态管理架构16、axios请求库17、AntDesign组件框架、18、CSSModules

可掌握的核心能力：

能够理解React的开发理念；
能够掌握React的基本使用；
能够理解React的内部原理；
能够使用React及其常用组件库进行项目开发；
能够使用React封装项目中用到组件实现复用；
能够掌握React项目中常见问题的解决方案；
能够掌握React-Redux进行状态管理；
能够掌握声明式编程的思想；
能够掌握组件化开发的思想；
能够掌握React项目优化、部署。

可解决的现实问题：

具备使用React开发能力，配合React内部原理，增强解决项目中复杂业务问题的能力，从项目搭建到项目开发再到项目部署上线，让学员可以完成常见企业级项目的开发。

市场价值：

理解React的开发理念、内部运行原理，熟练运用React组件完成项目常见功能开发，配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求。

好客租房
PC端项目

1、项目初始化2、管理员登录退出3、用户管理4、用户已发布房源查看5、房源列表6、房源列表检索等功能7、使用redux进行状态管理

好客租房
移动Web项目

1、项目初始化2、首页搭建3、地理定位4、城市选择5、地图找房6、房源搜索7、关键词搜索8、房源详情9、个人中心10、用户登录/注册/退出11、房源收藏12、查看用户收藏房源列表13、房源发布14、已发布房源列表查看15、权限路由组件封装16、移动端长列表性能优化17、React复杂表单处理18、React动画等常见解决方案

HTML&JS+前端中级进修课课程大纲

所处阶段

主讲内容

技术要点

学习目标

第八阶段：
框架原理与进阶

前端工程化

工程化概念、模块化开发及常用工具（Webpack4、Parcel、Rollup）、项目规范化及常用工具（ESLint、StyleLint）、前端自动化及常用工具、自动化测试及常用工具（istanbul、jest、benchmark）

学员能力体现：
- 能够轻松运用目前市场主流工具应对工程化项目需求；
- 能够基于无服务端平台快速开发应用并了解国内主流的平台服务；
- 能够使用静态站点构建方案快速开发企业站；
- 能够使用 Flow、TypeScript 完成复杂应用业务代码的编写；
- 能够掌握使用 Angular 技术栈进行项目开发；
- 能够理解 React.js / Vue.js 一类的 MVVM 框架的实现原理；
- 能够使用不同的数据流框架应对不同技术栈在大型项目中的数据状态管理；
- 能够使用服务端渲染解决方案解决 React.js / Vue.js /

Angular 框架在 SEO 方面的问题；
- 能够掌握不同框架的服务端渲染的实现及运用；
- 能够使用 React16 + Redux4 + ReactRouter4 + Next.js

完成社交类项目的开发。

关键词：
工程化、自动化、无服务端、Gatsby、TypeScript、Flow、

Angular、MVVM 框架原理、Mobx、RxJS、SSR、Next.js、

Nuxt.js、Universal

闲云旅游项目

无服务端方案（LeanCloud）、静态站点生成工具（Gatsby、React Static、VuePress）、旅游类项目业务

JavaScript 进阶

Flow 类型检查、TypeScript 适应超大型的应用编码

Angular 实战开发

Angular 组件的定义及使用、Angular 服务、Angular 路由、表单、依赖注入

MVVM 框架进阶与实现

Vue.js 原理、Vue.js 使用进阶、模拟实现 Vue.js 框架

数据流框架的应用

Redux、Mobx、Vuex、RxJS、ngrx

服务端渲染 SSR 专题

React.js 服务端渲染方案及 Next.js 框架、Vue.js 服务端渲染方案及 Nuxt.js、Angular 服务端渲染方案及 Universal Angular

学成在线项目

React16、Redux4、ReactRouter4、Next.js

跨平台桌面应用开发

Electron、Vue.js / React.js 在 Electron 中的使用

第九阶段：
移动 App 开发

混合式 App 开发框架

Cordova、Phonegap、Ionic

学员能力体现：
- 能够使用混合式 App 开发框架快速开发移动 App；
- 能够配合原生应用开发 App 内嵌 H5 页面并可以通过 JSBridge

调用原生接口；
- 能够使用 wepy / mpvue 框架开发小程序或快应用项目；
- 能够使用 taro 多端统一解决方案同时完成移动 App、移动 Web、

小程序的开发；
- 能够独立使用 React Native 开发原生 App；
- 了解 Weex / Flutter 等其他原生应用的前端技术开发方式。

关键词：
Cordova、Ionic、Webview + H5、JSBridge、mpvue、taro、

Weex、Flutter

H5 配合原生开发 App

Webview + H5、JSbridge、NativeScript

黑马证券 App 项目

Vue.js 开发移动H5、配合原生 Webview 构建 App、金融业务项目

小程序/快应用开发框架

WEPY、MPVUE、Taro 统一开发解决方案

原生应用开发框架

Flutter、React Native、Weex

好客租房 App 项目

React Native 构建租房类 App 项目

第十阶段：
Node.js 进阶

Node.js 网络通信

TCP 协议、net 模块、Socket

学员能力体现：
- 能够基于 net 模块开发 Socket 应用并深度理解 HTTP 协议；
- 彻底理解 Node.js 中的事件循环特性；
- 能够使用 Cluster 开发多进程应用充分发挥多核 CPU；
- 能够操作常见的 NoSQL 数据库并能够通过 Node.js 操作；
- 能够掌握主流的 MVC Web 应用开发框架 Adonis、Egg；
- 能够升入理解基于 GraphQL 标准开发现代化的应用层接口；
- 能够掌握 Node.js 中途岛在企业级项目中的应用；
- 能够使用 Node.js 开发基本的网络爬虫应用。

关键词：
Socket、EventLoop、Cluster、Redis、MongoDB、Memcached、

Adonis.js、Egg.js、GraphQL、微服务、Nightmare、Puppeteer

Node.js 事件循环与多进程

EventLoop、Cluster

NoSQL 数据库

Redis / MongoDB / Memcached 基本使用及如何通过 Node.js 操作

Web 应用开发框架

Adonis.js、Egg.js、Koa

BaaS 接口标准

GraphQL

十次方项目

Node.js 中间层、社交类业务项目

网络爬虫开发

Cheerio、Nightmare、Puppeteer

第十一阶段：
可视化与游戏

网页游戏开发基础

Canvas

学员能力体现：
- 能够使用 HTML5 技术开发网页游戏；
- 能够使用 WebGL 技术完成炫酷 3D 类图形效果；
- 能够掌握常用的可视化库的应用；
- 能够使用 Three.js 开发简单的 3D 网页游戏；
- 能够使用 HTML5 游戏引擎开发网页游戏。

关键词：
WebGL、Three.js、H5 游戏、游戏引擎、Cocos2d-x、Egret

网页高性能图形编程

WebGL

图形化开发库

Three.js、D3.js

HTML5 游戏引擎

Cocos2d-x、Egret

第十二阶段：
架构与运维

前端性能优化

JSPerf、YSlow、PageSpeed

学员能力体现：
- 能够通过不同的工具发现 Web 项目的性能瓶颈并加以解决；
- 能够掌握使用不同的工具和平台对项目及代码进行质量监测；
- 能够使用不同的自动化测试框架完成项目的单元测试和集成测试；
- 能够使用 Jenkins、TravisCI 等工具对项目进行持续集成和持续部署；
- 能够掌握基本的 Linux 服务器操作与维护；
- 能够掌握 Nginx Web 服务器的搭建与配置；
- 了解 Docker 容器化平台的基本操作。

关键词：
JSPerf、YSlow、PageSpeed、E2E、QA、Jest、AVA、Nightmare、

持续集成、持续部署、Jenkins、Nginx、Docker

项目质量监测

Lint、e2e test、codecov、Benchmark

自动化测试

Mocha、Jest、AVA、Karma、Nightmare

持续集成与持续部署

Jenkins、TravisCI、CircleCI

Linux 服务器

Nginx、HTTP(s)、ECS、RDS、SLB 云服务

容器化运维操作

Docker 操作、部署、运维