第一阶段（PC端页面重构）

核心内容

1. XMind思维导图工具
2. HTML语义化标签
3. 相对路径及绝对路径
4. 搜索引擎原理
5. 网页SEO优化
6. Table布局
7. HTML表单元素
8. CSS样式选择器及权重计算
9. 文本样式美化
10. 精灵图及CssSprite工具
11. float水平排版
12. inline-block水平排版
13. flex弹性布局
14. position定位
15. css代码优化
16. 开发者调试工具
17. Markman标注工具
18. PC端页面布局技巧
19. BootStrap/LayUI框架
20. git基础命令
21. gitpages静态页发布

阶段目标

• 使用XMind记录学习笔记，养成良好的学习习惯
• 熟悉BS软件开发模式，了解标签语义化的根本目的
• 了解form表单提交规范
• 合理使用html标签搭建页面结构，使用css精准控制元素样式
• 使用蓝湖或markman高度还原UI效果图

第二阶段（JavaScript基础）

核心内容

1. js简史及语法版本
2. 变量声明规则
3. 基本数据类型
4. 复合数据类型
5. 运算符
6. 断点调试
7. if及switch语句
8. 三元表达式
9. 循环语句(for、while等)
10. 引用类型和值类型
11. 堆和栈
12. 函数传参
13. 变量提升
14. js内置对象
15. es5数组操作方法(forEach、map、reduce等)
16. 显式和隐式类型转换
17. DOM选择器
18. 节点内容和属性操作
19. 样式的设置和获取
20. DOM事件绑定
21. event事件对象
22. 事件传播机制
23. 2级DOM事件
24. setInterval&setTimeout

阶段目标

• 熟练掌握js语法，提升自身编码及调错能力
• 熟练使用函数复用代码逻辑
• 熟练使用DOM操作页面元素，实现网页动效交互
• 通过项目实战提升开发效率并总结实战开发经验及心得

第三阶段（JavaScript高级程序设计）

核心内容

1. 函数的防抖和节流
2. 浏览器重绘和回流
3. 事件委托机制
4. Ajax网络请求
5. 同源策略
6. 数据按需加载
7. cookie数据存储
8. Jsonp跨域请求
9. BOM
10. 正则表达式
11. 正则高级概念
12. this指向细则
13. IIFE
14. 闭包
15. 面向对象编程
16. 原型链及继承
17. 插件封装
18. jQuery
19. jQuery第三方插件
20. jQuery插件封装
21. 网页性能优化

阶段目标

• 具备面向对象编程思想，对常用js模块进行封装
• 熟练使用正则表达式对内容进行精准匹配
• 熟练使用Ajax、Jsonp进行前后端数据交互
• 轻松使用第三方插件及UI框架提升项目开发效率

第四阶段（移动端&响应式开发）

核心内容

1. css3新增选择器
2. css3新增排版属性
3. transition元素过渡
4. animation
5. 3D转换
6. viewport
7. rem
8. vw&vh
9. @media媒体查询
10. html5新增语义化标签
11. touch事件
12. video&audio
13. swiper
14. iscroll
15. webWorks
16. webSocket
17. canvas
18. svg
19. FormData&FileReader
20. 本地存储
21. 离线存储
22. 地理定位
23. 百度地图SDK
24. echarts
25. Dcloud混合应用

阶段目标

• 熟练掌握移动端屏幕适配及移动端特有交互
• 熟练使用媒体查询进行响应式网站开发
• 熟练使用echarts、websocket实现大屏可视化数据展示

第五阶段（Nodejs服务器端开发及前端工程化）

核心内容

1. Nodejs环境安装
2. http模块
3. fs模块
4. commonjs模块规范
5. Npm包管理工具
6. 网络爬虫
7. express web开发框架
8. ejs模板引擎
9. mysql
10. redis
11. restful接口规范
12. scoket.io
13. session
14. token验证机制
15. 服务器代理
16. CORS配置
17. PM2负载均衡
18. 服务器部署
19. BrowserSync
20. sass&less
21. es6&babel编译
22. promise
23. async
24. proxy数据劫持
25. class的定义与继承
26. webpack构建工具
27. gulp构建工具

阶段目标

• 深入理解前后端分离的开发模式和交互细节
• 遵循Restful风格进行项目接口开发
• 掌握es6语法及新特性
• 熟练使用webpack、gulp构建前端工程化项目

第六阶段（大前端框架开发Vue&React）

核心内容

1. MVVM
2. 数据响应原理
3. 虚拟DOM
4. 数据劫持
5. 发布订阅者模式
6. 组件式开发
7. 第三方插件整合
8. Hash&History
9. 路由
10. 状态管理
11. 服务器端渲染
12. 代理服务器配置
13. Vue-cli
14. Nuxt.js服务端渲染
15. Vue3.0
16. React全家桶
17. Next.js服务端渲染
18. React高阶组件
19. ReactHook
20. ElecmentUI
21. Vant
22. Taro
23. AntDesign

阶段目标

• 理解MVVM框架原理
• 熟练掌握组件式开发方式
• 熟练使用UI框架提升项目开发效率
• 能够使用Next/Nuxt进行SPA应用SEO优化

第七阶段（微信小程序开发）

核心内容

1. 小程序注册发布流程
2. 开发者工具详细使用
3. 小程序全局和页面配置
4. 模板语法
5. 屏幕适配
6. wxs
7. 内置组件
8. 网络请求
9. 本地存储
10. 用户身份获取
11. 分享
12. 位置信息
13. 文件下载和上传
14. 界面交互
15. 组件开发
16. 路由
17. 分包加载
18. 云函数
19. UniApp
20. Taro

阶段目标

• 熟练使用小程序进行项目业务功能开发
• 使用模板、组件、分包优化代码包体积
• 借助UniApp、Taro提升项目开发效率

第八阶段（跨平台全端开发）

核心内容

1. 混合App开发模式
2. UniApp
3. Weex
4. React-native
5. Flutter
6. webAr
7. Three.js
8. 网络安全
9. Electron
10. 区块链
11. 语音识别
12. 鸿蒙OS App开发
13. 数据加密
14. 物联网
15. 车载应用开发
16. 华为智慧屏
17. 高德地图二次开发

阶段目标

• 熟练掌握混合应用开发技术，了解其底层运行原理
• 洞察行业发展趋势，扩展技术视野
• 提前了解鸿蒙OS系统软件开发

web前端课程架构梳理相关推荐

1. 【持续..】WEB前端面试知识梳理 - CSS部分

   传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分 最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...

2. 小程序弹出层禁止列表滑动_是时候展现真正的技术了！小程序教程来了——百战Web前端课程更新05.07...

   百战程序员十大精品课程,实时更新,保持行业领先.本次更新课程Web前端第二十九阶段安心食疗-微信小程序全部7个章节及课程资料.小程序是依托微信而生的,是一种不用下载就能使用的应用,也是一项创新,经过近 ...

3. 2019新版《黑马web前端课程+项目实践课程》

   黑马web前端课程+项目实践课程 黑马web前端课程+项目实践课程 黑马web前端课程+项目实践课程 下载地址:百度网盘

4. HTML5期末大作业：橙色精美零食网站设计——橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码

   HTML5期末大作业:橙色精美零食网站设计--橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人. 美食. 公司. 学 ...

5. HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码

   HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码 常见网页设计作业题材 ...

6. HTML+CSS大作业——电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码

   HTML5期末大作业:电影网站设计--电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...

7. 静态HTML网页设计作品商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码

   HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计 文章目录 HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CS ...

8. [上海线下活动] Web前端工程化架构实践 -- 沪江技术沙龙

   报名链接:www.huodongxing.com/event/53996- Web前端工程化历经了:2011年的Shell&(YUICompress || Google Closure Com ...

9. ajax 更新模型数据_DuangDuangDuang，重点来啦！高薪全靠它——百战Web前端课程更新03.11...

   百战程序员九大专业运营,周周有课程更新,保持行业领先.本次更新课程Web前端第三十阶段经典面试题解析章节1-5及课程资料.本次更新可谓是诚意满满,针对市场面试需要,总结经典面试题集,为你揭开企业技术要 ...

10. Web前端知识体系梳理，值得收藏！

    前言 现在是信息时代,经过 web1.0 时期.web2.0 时期到现在的移动互联网时期,信息获取越来越高效,坐着不动就会有大量的新闻.博客.资讯向你推荐而来. 作为一名靠谱的程序员,你免不了要查阅大 ...

最新文章

1. 剑指offer---包含min函数的栈
2. js 获取字符串最后一位的4种方法
3. pptv多屏互动服务怎么删除
4. 三星如何抄袭苹果 产品对比一目了然
5. excel 2016 新建时 出现 内存或磁盘不足错误的解决方法
6. Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数
7. VC++动态链接库编程之DLL木马（转）
8. 一个简单的apk破解
9. Microsoft官网 Windows10 系统重装教程
10. 盗墓小说和西高穴：真真假假曹操墓
11. java dismiss_Android dialogFragment dismiss()报错
12. 零基础学习CANoe Panel（13）—— 滑条（TrackBar ）
13. 网络营销试卷（参考答案及评分标准）
14. char码值对应列表大全
15. 51单片机控制步进电机-电路连接
16. 应用程序存在文件包含漏洞（Unix系统） WASC Threat Classification 解决办法
17. 用pytorch官网命令 安装pytorch1.10.1+CUDA11.1报错
18. python批量评论_手把手教你 Python挖掘用户评论典型意见并自动生产报告
19. 布施改变命运的亲身证明_huadingjin_新浪博客
20. 〖全域运营实战白宝书 - 运营角色认知篇⑤〗- “运营“ 是否有前途？

热门文章

1. 用两个栈实现队列（Java）
2. 【网易云信】直播推流SDK特性、系统架构、使用说明
3. ubuntu16.04.4环境下mingw32交叉编译环境搭建
4. 矢量绘图软件：Sketch最新版82.1中文版
5. Sketch的下载与安装
6. Sketch 56.2 Mac中文版
7. json rpgmv 加密_【RPG Maker MV插件编程】【实例教程6】存档的加密解密与保护
8. 特殊符号大全分享给大家，直接复制粘贴就可以使用了！
9. Unity外部资源无法拖入Unity
10. Unity 粒子特效看不见