Web 前端开发 · 学习路径 | 编程语言全景手册

← 返回主页学习路径 →

1 阶段一：前端基础（4-6 周）

打好 HTML、CSS、JavaScript 基础，这是前端开发的基石。

HTML 语义化标签、表单、多媒体、SEO 基础
CSS 选择器、盒模型、Flexbox、Grid、响应式设计
JavaScript 基础变量、数据类型、控制流、函数、DOM 操作
JavaScript 进阶 ES6+（箭头函数、解构、模块、Promise、async/await）
Git 基础版本控制、分支管理、GitHub 协作

2 阶段二：前端框架（6-8 周）

选择一个主流框架深入学习，掌握现代前端开发模式。

React（推荐） JSX、组件、Props、State、Hooks、Context、React Router
或 Vue.js 模板语法、响应式、组件、组合式 API、Pinia、Vue Router
或 Angular TypeScript、组件、依赖注入、RxJS、路由、表单
状态管理 Redux（React） / Pinia（Vue） / NgRx（Angular）
TypeScript 类型系统、泛型、接口、类型守卫、实用类型

3 阶段三：工程化与性能（4-6 周）

掌握现代前端工程化工具和性能优化技术。

构建工具 Vite / Webpack 配置、模块热替换、代码分割
包管理 npm / yarn / pnpm、依赖管理、语义版本
代码质量 ESLint、Prettier、Husky、Commitlint
测试 Jest / Vitest 单元测试、React Testing Library
性能优化代码分割、懒加载、图片优化、Core Web Vitals
部署 Vercel / Netlify / 云服务部署

4 阶段四：实战项目（4-8 周）

通过完整项目将所学知识融会贯通。

个人博客从零搭建自己的技术博客
管理后台完整的管理系统（仪表板、用户管理、权限控制）
电商网站商品展示、购物车、订单管理
全栈项目配合后端（Node.js/Go）完成完整应用

📚 推荐学习资源

🚀 练手项目

📝 个人博客网站
📊 数据仪表板
🛒 电商购物网站
📱 移动端适配的响应式网站
🎯 在线 Todo 应用（含后端 API）