第一章 · 前端基础与生态
01
基础
42:18
前端开发环境搭建与工具链介绍
从零开始配置Node.js、npm、VS Code等开发工具，了解现代前端开发的基础设施和常用工具链
02
基础
38:52
HTML5语义化标签与页面结构设计
深入学习HTML5新增的语义化标签，掌握如何构建清晰合理的页面结构，提升可访问性和SEO友好度
03
基础
51:34
CSS3现代布局技术：Flexbox与Grid实战
通过实际案例学习Flexbox弹性布局和Grid网格布局，掌握现代响应式页面布局的核心技术
04
基础
46:25
JavaScript ES6+核心特性详解
系统学习ES6到ES2024的新特性，包括箭头函数、解构赋值、Promise、async/await等现代JavaScript语法
05
基础
39:18
浏览器DevTools调试技巧与性能分析
掌握Chrome DevTools的高级用法，学会使用断点调试、性能分析、网络监控等工具提升开发效率
第二章 · 现代前端框架
06
框架
55:42
Vue3组合式API与响应式系统深入
从零开始学习Vue3的Composition API，理解响应式原理，掌握ref、reactive、computed等核心API的使用
07
框架
48:35
Vue Router与Pinia状态管理实战
学习Vue生态的路由管理和状态管理方案，构建完整的单页应用，实现页面跳转与全局状态共享
08
框架
52:16
React Hooks从入门到精通
深入学习React Hooks的设计理念和使用方法，包括useState、useEffect、useContext等常用Hooks以及自定义Hooks开发
09
框架
44:29
React性能优化技巧与最佳实践
学习React应用性能优化的各种技巧，包括memo、useMemo、useCallback的使用，虚拟列表、懒加载等优化方案
10
框架
41:53
Next.js服务端渲染与静态站点生成
探索Next.js框架的强大功能，学习SSR、SSG、ISR等渲染模式，构建高性能的React应用
第三章 · 工程化与实战项目
11
工程化
49:37
TypeScript类型系统与实战应用
全面掌握TypeScript的类型系统，学习接口、泛型、类型推断等高级特性，提升代码质量和开发体验
12
工程化
43:28
Vite构建工具与开发体验优化
深入了解Vite的原理和配置，体验极速的开发环境，学习插件开发与构建优化技巧
13
工程化
47:15
ESLint与Prettier代码规范配置
建立统一的代码规范体系，配置ESLint和Prettier，集成Git Hooks实现自动化代码检查和格式化
14
工程化
56:42
前端单元测试与集成测试实践
学习使用Vitest和Testing Library编写测试用例，掌握测试驱动开发方法，保障代码质量
15
项目
68:25
实战项目：响应式电商平台首页开发
综合运用HTML、CSS、JavaScript技术，从零开始构建一个完整的响应式电商首页，包含导航、轮播、商品展示等功能模块
16
项目
72:18
实战项目：Vue3音乐播放器应用
使用Vue3 + Vite搭建一个功能完整的音乐播放器，实现播放控制、歌词同步、播放列表管理等核心功能
17
项目
65:33
实战项目：React任务管理看板系统
采用React + TypeScript构建类似Trello的任务管理系统，实现拖拽排序、状态管理、本地存储等功能
18
综合
54:47
前端性能优化综合实战与部署上线
总结前端性能优化的各种方法，包括资源压缩、代码分割、CDN加速、缓存策略等，并实践项目的生产环境部署流程
本期要点时间轴
00:00
课程总体介绍与学习路线规划，了解完整的前端技术栈体系和学习建议
02:45
基础三件套的深入学习，掌握HTML5语义化、CSS3现代布局和JavaScript ES6+核心特性
05:20
Vue3与React两大主流框架的系统学习，理解组件化开发思想和响应式原理
08:10
TypeScript类型系统与工程化工具链配置，提升代码质量和开发效率
10:35
三个完整项目实战开发，从电商首页到音乐播放器再到任务管理系统
12:15
性能优化与部署上线实践，学习生产环境的最佳实践和常见问题解决方案
观看指南与学习建议
本合集按照前端学习的自然进阶路线组织内容，建议按照课程顺序观看以获得最佳学习效果。课程分为三个阶段：基础夯实、框架进阶和工程实战。
- 第一阶段（01-05集）适合完全零基础或基础薄弱的同学，系统学习HTML/CSS/JavaScript三大基础技术
- 第二阶段（06-10集）进入现代框架学习，重点掌握Vue3和React两大主流框架的核心概念和最佳实践
- 第三阶段（11-18集）提升工程化能力，学习TypeScript、构建工具、代码规范和测试，并通过三个完整项目巩固所学
- 每节课后建议实际动手练习，遇到问题可以在评论区交流讨论，也可以查看课程配套的代码仓库
- 项目实战章节的代码建议完整跟做，这是将知识转化为能力的关键环节