web前端学习大纲

一、HTML5 + CSS3

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

HTML5

浏览器与浏览器内核
语法及使用
常用标签
语义化
表单元素
HTML
新增标签

CSS3基础

CSS基本语法规范
常用的选择器用法与规范
复合选择器使用
数值与单位
文字文本样式
CSS3新增选择器

CSS3进阶

CSS盒子模型
CSS背影技巧
圆角/阴影/过渡
定位和浮动
伪类和伪元素
Chrome调试工具
CSS高级技巧（精灵图、CSS三角、图标字体等）
CSS常见布局技巧大全
网页开发常见问题以及解决方案
CSS常见兼容性问题以及解决方案
CSS新增属性
Photoshop切图
cutterman插件一键切图

电商项目

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

二、移动WEB网页开发

目标：能够独立开发移动端页面，并适配不同的移动端终端

CSS3动画

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

移动端页面开发

传统布局的局限性
移动端屏幕介绍
移动端浏览器介绍
物理像素&物理像素比
真机调试
viewport视口
移动端技术选型
移动端主流适配解决方案
移动端特殊样式
百分比布局&流式布局
flex布局优势
盒子父极常见属性设置
盒子子级常见属性设置
携程网flex移动端页面开发
rem单位使用
rem适配
预处理器less
media媒体查询
淘宝flexible.js移动端适配
cssrem插件使用
cutterman二倍图三倍图切图
移动端页面开发流程与规范
京东移动端首页开发

BOOTSTRAP

传统布局的局限性
移动端屏幕介绍
移动端浏览器介绍
物理像素&物理像素比
真机调试
viewport视口
移动端技术选型
移动端主流适配解决方案
移动端特殊样式
百分比布局&流式布局
flex布局优势
盒子父极常见属性设置
盒子子级常见属性设置
携程网flex移动端页面开发
rem单位使用
rem适配
预处理器less
media媒体查询
淘宝flexible.js移动端适配
cssrem插件使用
cutterman二倍图三倍图切图
移动端页面开发流程与规范
京东移动端首页开发

三 、JAVASCRIPT网页编程

目标：能够使用JavaScript/jQuery开发网页特效/网页应用

JAVASCRIPT基础

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

WEBAPIS编程

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

网页应用/网页特效

1、轮播图
2、页面放大镜
3、待办事项列夹
4、购物车
5，tabs(标签）
6. json
7、其它常用网页特效

JQUERY快速开发

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

面向对象编程

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

四、NODEJA与AJAX

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

AJAX编程

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

GIT

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

阿里百秀

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

ES6

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

NODEJS基础

1, node.js环境安装
2.如何用nodejs运行代码
3, Commonjs
4、模块化
5、模块与包
6. NPM
7. CNPM和Yarn
8、核心模块使用
9、第三方模块使用
10、RESTFuIAPI

服务端开发(NODEJS)

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用API查看原图
10. RESTFuIAPI

五、VUE.JS项目实践

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

大数据可视化

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

服务端渲染

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

Vue进阶

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

VUEJS基础

1.Vue.js
2.文本与属性绑定、
3.计算属性computed
4.侦听器watch
5. Cass 与Sstyle绑定
6.条件渲染
7.列表渲染
8.事件处理
9、表单输入绑定
6. Vue实例生命周
11,开发Vue播件和模板过油器
12、自定义指令
7. Vue组件系统
14, Ve过渡和动画
15. VeRouter路由系统
16.组件通信
17、 axios请求库
18、vuecli脚手架工具
19. VueDevTools调试工具
20,在Vue中操作DOM

WEBPACK

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

黑马头条

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

六、微信小程序

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

黑马优购商城

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

小程序基础

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

七、REACT.JS项目实践

目标：具备使用 react开发能力；配合react内部原理；增强解决项目中复杂业务问题的能力；从项目搭建到项目开发再到项目不是上线；可以完成常见企业级项目的开发

REACTJS基础

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

好客租房移动WEB端

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

好客租房PC端

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

八、框架原理与进阶

目标：能够轻松运用目前市场主流工具应对工程化项目需求；能够基于无服务端平台快速开发应用并了解国内主流的平台服务；能够使用静态站点构建方案快速开发企业站；能够使用flow、typescript完场复杂应用业务代码的编写；能够掌握angular技术栈进行项目开发；能够理解react.js/Vue.js一类的MVVM框架的实现原理；能够使用不同的数据流框架应对不同技术栈在大型项目中的数据状态管理；能够使用服务端渲染解决方案解决react.js/Vue.js//angular框架在SEO方面的问题；能够掌握不同框架的服务端渲染的实现与运用；能够使用React16+Redux4+ReactRoute4+Next.js完成社交类项目的开发

前端工程化

工程化概念
慢块化开发及常用工具(Webpack, Parcel, Rollup)
项目规范化及M用工具( EsLint stylelin)
前端自动化及常用工具
自动化测试及端用工具(istanbul, jest, benchmark)

闲云旅游项目

无服务端方案 (Leancloud)
静志站点生成工具(Gatsby, React Static, VuePress)
旅游类项目业务

JAVASCRIPT进阶

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

ANGULAR实战开发

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

MVVM框架进阶与实现

Vuejs原理, Vuejs使用进阶、模拟实现Vejs框架

数据流框架的应用

Redux, Mobx。Vuex, Rxis。ngrx

服务端渲染SSR专题

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

学成在线项目

React16、Redux4、 ReactRouter4 、Next.js

跨平台桌面应用开发

Electron, Vuejs / Reactjs在 Electron中的使用

九、移动APP开发

混合式APP开发框架

cordova、Phonegap、lonic

H5配合原生开发APP

webview+ H5， JSbridge.NativesScript

黑马证券APP项目

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

小程序/快应用开发框架

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

原生应用开发框架

Flutter、React Native、Weex

好客租房APP项目

eact Native构建租房类App项目

目标：能使用混合式APP开发框架快速开发移动App；能够配合原生应用开发App内嵌H5页面并可以通过JSBridge调用原生接口；能够使用wepy/mpvue框架开发小程序或快应用项目；能够使用taro多端统一解决放啊同时完成移动App、移动web、小程序的开发；能够独立使用react native开发原生App；了解weex/flutter等其他原生应用的前端技术开发方式

十、NODE.JS进阶

NODE.JS网络通信

TCP协议、net模块、SOcket

NODE.JS时间循环与多进程

EventLoop、Cluster

NOSQL数据库

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

WEB应用开发框架

Adonis.jsEgg.js、Koa

BAAS接口标准

GraphQL

十次方项目

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

网络爬虫开发

Cheerio、Ninghtmaare、Puppeteer
目标：能够基于net模块开发socket应用并深度理解HTML协议；彻底接近觉node.js中的事件循环特性；能够使用cluster开发多进程应用充分发挥多核CPU；能够操作常见的nosql数据库并能够通过node.js操作；能够掌握主流的MVC web应用开发框架adonis、egg；能够深入理解基于graphQL标准开发现代化的应用层接口；能够掌握node.js中途岛在企业级项目中的应用；能够使用node.js开发基本的网络爬虫应用。

十一、可视化与游戏

网页游戏开发基础

Canvas

网页高性能图形编程

WebGL

图形化开发库

Three.js、D3.js

HTML5游戏引擎

Cocos2d-x、Egret
目标：
1、能够使用HTML5技术开发网页游戏
2、能够使用webGL技术完成炫酷3D类图形效果
3、能够航我常用的可视化库的应用
4、能够使用three.js开发简单的3D网页游戏
5、能够使用HTML5游戏引擎开发网页游戏

十二、架构与运维

前端性能优化

JSPerf、YSlow、pageSpeed

项目质量监测

Lint、e2e test、codecov、benchmark

自动化测试

Mocha、Jest、AVA、Krma、Nightmare

持续集成与持续部署

Jenkins、TravisCl、CricleCl

LINUX服务器

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

容器化运维操作

Docker操作、部署、运维
目标：
1、能够通过不同的工具发现Web项目的性能瓶颈并加以解决；
2、能够掌握使用不同的工具和平台对项目及代码进行质量监测
3、能够使用不同的自动化测试框架完成项目的单元测试以及及成果测试；
4、能够使用jenkins、TravisCI等工具对项目进行持续集成和持续部署；
5、能够掌握基本的Linux服务器操作与维护
6、能够掌握Nginx web服务器的搭建与配置
7、了解docker容器化平台的基本操作