前端三剑客 · 实战项目精讲
📚 30章完整版
K12 风格
01
HTML基础与第一个页面
HTML发展史
文档结构
常用标签
创建页面
02
CSS入门与样式美化
引入方式
选择器
常用属性
盒模型
03
JavaScript基础与交互
变量与数据类型
运算符
条件/循环
DOM操作
04
实战项目一：个人简历页面
页面结构
导航区
技能列表
页脚
05
实战项目二：待办事项列表
布局设计
添加/删除
标记完成
localStorage
06
HTML进阶：表格与表单
表格标签
表单元素
验证属性
语义化
07
CSS进阶：布局与定位
浮动/清除
定位
Flexbox
Grid
08
JavaScript进阶：数组与对象
数组操作
对象属性
JSON
事件委托
09
实战项目三：图片画廊
网格布局
点击放大
左右切换
懒加载
10
CSS动画与过渡
transition
transform
@keyframes
性能优化
11
JavaScript DOM操作深入
创建/插入节点
删除替换
节点遍历
classList
12
实战项目四：手风琴菜单
菜单结构
展开/收起
多级菜单
图标切换
13
响应式设计入门
视口设置
媒体查询
响应式图片
移动优先
14
Bootstrap框架快速上手
引入方式
栅格系统
常用组件
自定义主题
15
实战项目五：响应式博客页面
头部导航
文章列表
响应式适配
评论区域
16
JavaScript ES6+新特性
let/const
箭头函数
模板字符串
模块化
17
异步编程与Ajax
回调地狱
Promise
fetch
async/await
18
实战项目六：天气查询应用
获取地理位置
调用API
展示数据
错误处理
19
前端工程化入门
npm
Webpack/Vite
环境区分
ESLint/Prettier
20
实战项目七：个人作品集网站
项目规划
多页面路由
动画交互
部署
21
CSS预处理器：Sass/SCSS
变量/嵌套
mixin/继承
函数运算
文件拆分
22
JavaScript设计模式
单例模式
工厂模式
观察者模式
模块模式
23
实战项目八：简易计算器
界面布局
输入逻辑
清空功能
键盘事件
24
前端性能优化
图片优化
代码压缩
缓存策略
渲染路径
25
实战项目九：音乐播放器
播放器界面
音频控制
播放列表
进度条/音量
26
前端安全基础
XSS防御
CSRF防御
HTTPS
CSP
27
实战项目十：表单验证库
自定义规则
实时反馈
错误信息
整体验证
28
版本控制与Git
仓库/提交/分支
常用命令
分支管理
GitHub Pages
29
前端测试基础
单元测试(Jest)
UI测试(Cypress)
TDD
覆盖率
30
综合实战：全栈博客系统(前端)
架构设计
登录注册
文章发布
评论点赞
前后端联调