04
4：实战阶段：项目
Jquery学习
基础语 法
事件
选择器
动画
DOM操 作
常用工 具
Jquery学习
Ajax
Jquery插 件编写
基本选择器 层次选择器 过滤选择器 表单选择器 ......
Jquery学习
选择器
查找节点 创建节点 插入节点 删除节点 复制节点
Jquery学习
DOM操作
Jquery学习
欢迎关注微信公众号：服务： omsoofw 和订阅：jobdata
背景 文本 字体 链接 列表 表格 轮廓 ......
CSS
CSS样式
内边距 边框 外边距 ......
CSS
CSS框模型
CSS
CSS定位
相对定位 绝对定位 浮动
元素选择器 选择器分组 类选择器 ID选择器 属性选择器 后代选择器
LOGO
2020
web前端学习路线图
演讲人 2025-11-11
01
1：基础阶段：HTML+CSS
1：基础阶段：HTML+CSS
HTML
A
属性
B
事件
C
标签
D
字符 集
E
......
CSS基
01
础教程
CSS定
04
位
CSS
CSS样
02
式
CSS选
05
择器
CSS框
03
模型
CSS高
06
级
CSS
......
CSS
CSS选择器
子元素选择器 相邻兄弟选择器 伪类 伪元素 ......
CSS
CSS选择器
对齐 尺寸 分类 导航栏 图片库
CSS
CSS高级
图片透明 盒子模型 媒体布局 ......
CSS
CSS高级
02
2：基础阶段：HTML5+CSS3
2：基础阶段： HTML5+CS
S3
HTML5
CSS3
字符
3：基础阶段：
串
数字
布尔
JavaScript
数据类型
D
E
F
数组
对象
Nul l
3：基础阶段：JavaScript
数据类型
Undefined
3：基础阶段：JavaScript
函数
01
内置函 数
02
自定义 哈数
A
B
C
Stri
Arr
Dat
3：基础阶段：
ng
ayBiblioteka eJavaScript
DOM对象
D
E
F
2：基础阶段：HTML5+CSS3
HTML5
HTML5 视频
HTML5 画布
HTML5 音频
HTML5 SVG
HTML5 拖放
HTML5 地理定位
2：基础阶段：HTML5+CSS3
HTML5
HTML5 Web存储
HTML5 应用缓存
HTML5 表单
......
2：基础阶段：HTML5+CSS3
模版语法 计算属性侦听器 Class与Style绑定 条件/列表渲染 事件处理
Vue
Vue基础
表单输入绑定 组件基础、注册 Prop 自定义事件 ......
Vue
Vue基础
State Getter Mutation Action Module ......
Vue
Vuex
认识路由 动态路由 嵌套路由 编程式导航 路由组件传参 ......
CSS3
CSS3
01
边框
CSS3
02
背景
CSS3文
03
本效果
CSS3
04
字体
CSS3
05
2D转换
CSS3 06 3D 转换
2：基础阶段：HTML5+CSS3
CSS3
0 1
CSS3 过渡
0 3
CSS3 多列
0 2
CSS3 动画
0 欢 迎4关 注 微信公众号 ：
服务：omsoofw 和订 阅：jobdata
Boo lean
Mat h
Num ber
3：基础阶段：JavaScript
DOM对象
......
3：基础阶段： JavaScript
BOM对象
WIndow Navigator Screen History Location ......
3：基础阶段：JavaScript
综合实例
欢迎关注微信公众号：服务：omsoofw 和订阅：jobdata
基础
高级
console（控制台） crypto（加密） debugger（调试器） fs（文件系统） http（网络） os（操作系统） path（路径） ......
Node
基础
NPM介绍及使用 MVC模式简介 Express框架学习 链接Mysql 链接Redis 项目实战
Node
高级
webpack
概念，主要讲什么 是入口，出口， loader，插件等
模式
入口 loader
输出 插件
webpack
配置
......
模块
欢迎关注微信公众号：服务： omsoofw 和订阅：jobdata
单个入口语法 对象语法 常见场景 ......
webpack
入口
用法 多个入口起点 高级进阶
4：实战阶段：项 目
ES6进阶
4：实战阶段：项 目
Bootstrap，同上
4：实战阶段：项 目
animate.css学习
4：实战阶段：项目
PS切图学习
欢迎关注微信公众号：服务：omsoofw 和订阅：jobdata
05
5：提升阶段：框架
Vue
Vue基 础
Vuex
Vuerouter
axios
DOM操作
替换节点 包裹节点 属性操作 样式操作 ......
事件绑定 事件冒泡 ......
Jquery学习
事件
Jquery学习
动画
show、hide fadeIn、fadeOut slideUp、slideDown 自定义动画animate 动画回调以及停止动画
Jquery学习
常用工具
浏览器及特性检测 数组和对象操作 ......
webpack
输出
webpack
模式
development production
实例 配置 ......
webpack
loader
剖析 用法 配置
webpack
插件
webpack
配置
基本配置 多个Target 使用其他语言配置
06
6：提升阶段：数据可视化
Vue
Vue-router
Vue
axios
认识axios，全局配置，发送POST、GET请求等
5：提升阶段：框架
React
A
认识 React
D
组件
B
React元 素渲染
E
State
C
JSX
F
Prop s
5：提升阶段：框架
React
事件处 理
组件 API
条件渲 染
组件声 明周期
列表
......
Node
03
3 ： 基 础 阶 段 ： J AVA S C R I P T
3：基础阶段：JavaScript
A
认识 JavaScr
ipt
D
基本 语法
B
DOM+ BOM综 合演练
E
变量
C
网页 特效
F
数据 类型
3：基础阶段：JavaScript
函数
DOM对 象
运算符
BOM对 象
流程控 制
综合实 例
A
B
C