从零基础到顶级前端
6 个阶段 · 覆盖全技术栈 · 每阶段含学习目标、技能清单与精选资源
- 1阶段一：零基础启蒙从一行 HTML 开始，搭建你的第一个网页1–2 个月
学习目标
- 理解网页是由什么构成的（HTML 结构、CSS 样式、JS 行为）
- 能独立写出一个完整的静态页面
- 掌握盒模型、Flexbox 布局
- 了解浏览器开发者工具的基本使用
掌握的知识点 / 技能
- HTML5 语义化标签（header / main / section / article / footer）
- CSS 选择器、盒模型、display / position
- Flexbox 布局（flex-direction / justify-content / align-items）
- CSS 变量（--color-xxx）、简单动画（transition / animation）
- 浏览器 DevTools：Elements / Console / Network 面板
- 基础 Git 操作（init / add / commit / push）
推荐学习资源
- 文档 / 教程MDN Web Docs — HTML 入门
Mozilla 官方教程，中文完整，零基础必读
- 文档 / 教程MDN Web Docs — CSS 第一步
从 CSS 是什么到选择器、盒模型、布局，系统入门
- 文档 / 教程Flexbox Froggy — 游戏学 Flex
通过闯关游戏掌握 Flexbox 布局，寓教于乐
- 文档 / 教程roadmap.sh — 前端学习路线图
业界最权威的前端技术图谱，可按节点逐一勾选
⭐ 300k+ Stars，前端 / 后端 / DevOps 全路线可视化
- 搜索提示入门视频教程
B站搜：黑马程序员 HTML5+CSS3 零基础
黑马程序员出品，时长约 40h，配套代码完整
- 书籍《HTML与CSS设计与构建网站》
Jon Duckett 著，图文并茂，排版极好，适合初学者翻阅
- 2阶段二：JavaScript 核心让页面动起来，理解编程思维2–3 个月
学习目标
- 掌握 JS 基础语法与 ES6+ 新特性
- 能操作 DOM，实现交互效果
- 理解异步编程（回调 → Promise → async/await）
- 能独立实现一个带有数据交互的小项目（如 Todo List、天气查询）
掌握的知识点 / 技能
- JS 数据类型、作用域、闭包、原型链
- ES6+：let/const、解构、扩展运算符、箭头函数、模板字符串
- Array 方法：map / filter / reduce / find / some
- DOM 操作：querySelector、addEventListener、classList
- 异步：setTimeout / Promise / async-await / Fetch API
- 模块化：ESModules（import / export）
- 错误处理：try-catch、Promise.catch
推荐学习资源
中文翻译完整，从基础到高级，是目前最好的 JS 在线教程
⭐ 145k+ Stars，Airbnb 出品，工业级 JS 最佳实践
⭐ 185k+ Stars，JS 实现的算法与数据结构，中文说明
- 书籍《JavaScript高级程序设计》第4版（红宝书）
前端必读经典，权威且全面，建议先跳过难点、多次翻读
- 书籍《你不知道的JavaScript》上中卷
深入理解作用域、闭包、this、原型，适合有一定基础后阅读
- 搜索提示JS 进阶视频
B站搜：尚硅谷 JavaScript 高级
尚硅谷出品，覆盖 ES6+ 和异步编程，免费高质量
- 文档 / 教程ES6 入门教程 — 阮一峰
阮一峰著，开源免费，系统讲解 ES6 到 ES2023 所有新特性
- 3阶段三：工程化入门像职业开发者一样组织项目1–2 个月
学习目标
- 能用 Git 进行多人协作（branch / merge / rebase / PR）
- 理解 npm/pnpm 包管理与 node_modules
- 能用 Vite 搭建一个现代前端项目
- 掌握 SCSS/CSS 模块化写法
- 能配置 ESLint + Prettier，保持代码规范
掌握的知识点 / 技能
- Git：branch / merge / rebase / cherry-pick / stash / conflict 解决
- GitHub：Fork、Pull Request、Code Review 流程
- npm / pnpm：依赖管理、scripts、版本锁
- Vite：项目脚手架、HMR、构建优化
- SCSS：嵌套、变量、mixin、@use
- ESLint + Prettier：代码质量与格式统一
- Chrome DevTools：Network / Performance / Sources 面板
推荐学习资源
- 文档 / 教程Vite 官方文档
中文官方文档，极速构建工具，现代前端标配
- 文档 / 教程Pro Git 中文版
Git 权威教材，免费在线阅读，从入门到高级
- GitHubpnpm 官方文档
比 npm 更快更省空间的包管理器，monorepo 首选
- 文档 / 教程Sass 中文文档
CSS 预处理器，掌握变量 / 嵌套 / mixin 即可满足日常开发
- GitHubvitejs/vite
⭐ 67k+ Stars，阅读 examples/ 目录学习最佳实践
- 搜索提示Git 入门视频
B站搜：尚硅谷 Git 教程
含 GitHub/GitLab 协作流程，适合完全没用过 Git 的同学
- 4阶段四：Vue.js 体系掌握国内主流框架，达到可就业水平2–3 个月
学习目标
- 能用 Vue 3 Composition API 独立开发完整的单页应用
- 掌握 Vue Router 实现多页路由
- 掌握 Pinia 进行状态管理
- 了解 Vue 2 Options API（维护存量项目用）
- 能完成一个带增删改查、路由跳转、状态共享的完整项目
掌握的知识点 / 技能
- Vue 3 核心：ref / reactive / computed / watch / watchEffect
- Composition API：setup()、<script setup>、composables 抽象
- Vue Router 4：动态路由、嵌套路由、路由守卫、懒加载
- Pinia：defineStore、storeToRefs、持久化插件
- Vue 2：data / methods / computed / watch / 生命周期
- v-model 双向绑定原理（Vue2 vs Vue3 差异）
- 组件通信：props / emit / provide-inject / 事件总线
- 单文件组件（SFC）：<template> / <script> / <style scoped>
- Vite + Vue 3 项目结构最佳实践
推荐学习资源
- 文档 / 教程Vue 3 中文官方文档
官方中文文档质量极高，含交互式示例，入门必看
- 文档 / 教程Vue Router 4 中文文档
Vue 官方路由，覆盖所有路由场景
- 文档 / 教程Pinia 中文文档
Vue 官方推荐的状态管理库，比 Vuex 更简洁
- GitHubvuejs/core — Vue 3 源码
⭐ 47k+ Stars，可读 packages/reactivity 理解响应式原理
- GitHubvuejs/awesome-vue
Vue 生态精选资源合集，含组件库、插件、开源项目
- 书籍《Vue.js设计与实现》— 霍春阳（HcySunYang）
深度剖析 Vue 3 响应式、渲染器、编译器原理，进阶必读
- 搜索提示Vue3 全家桶视频（免费）
B站搜：尚硅谷 Vue3 全家桶 2023
尚硅谷张天禹老师，含 Vue3 + Pinia + Vue Router，约 60h
- 搜索提示Vue2 维护参考
B站搜：尚硅谷 Vue2 完整版
工作中遇到老项目时快速对照使用
- 5阶段五：TypeScript + 进阶工程写出可维护、可扩展的生产级代码2–4 个月
学习目标
- 能在 Vue 3 项目中全量使用 TypeScript（strict 模式）
- 掌握泛型、工具类型、类型推导等高级用法
- 能进行性能分析与优化（LCP / FID / CLS）
- 能封装并发布一个组件库或工具库
- 掌握单元测试与 E2E 测试
掌握的知识点 / 技能
- TS 基础：type / interface / union / intersection / literal
- TS 进阶：泛型、工具类型（Partial / Required / Pick / Omit / ReturnType）
- TS 在 Vue3 中：defineProps<T>()、useXxx 类型推导
- tsconfig.json 配置（strict / paths / moduleResolution）
- 性能优化：懒加载、代码分割、Tree-shaking、虚拟列表
- 性能指标：LCP / FID / CLS（Core Web Vitals）
- 单元测试：Vitest + @vue/test-utils
- E2E 测试：Playwright
- 组件库开发：Vite library mode + 类型声明文件
- CI/CD 基础：GitHub Actions 自动化部署
推荐学习资源
- 文档 / 教程TypeScript 中文手册
官方文档，含在线 Playground，可实时验证类型
- 文档 / 教程type-challenges — 类型体操练习
⭐ 40k+ Stars，从 easy 到 extreme，是提升 TS 类型能力的最佳练习题库
- GitHubmicrosoft/TypeScript
TS 官方仓库，可查看 issues 了解语言演进方向
- 文档 / 教程Vitest 中文文档
Vite 原生测试框架，API 与 Jest 兼容，速度极快
- 文档 / 教程web.dev — Core Web Vitals
Google 出品，LCP / FID / CLS 权威解读与优化指南
- 文档 / 教程Playwright 官方文档
微软出品的 E2E 测试框架，多浏览器支持，截图/录像能力强
- 搜索提示TypeScript 视频教程
B站搜：TypeScript 入门到实战 2024
搜近年出品的视频，优先选择基于 TS 5.x 版本的教程
- 书籍《TypeScript编程》— Boris Cherny
O'Reilly 出版，类型系统讲解深入，适合有 JS 基础者
- 6阶段六：高级 & 顶级前端从执行者到架构师，从写代码到影响工程文化持续修炼，无固定期限
学习目标
- 能主导大型前端项目的架构设计与技术选型
- 深度理解浏览器渲染原理与 JS 运行时
- 能设计并落地微前端 / Monorepo 方案
- 有开源项目贡献或自建技术影响力
- 能做跨端开发（小程序 / 桌面端）或全栈拓展（Node.js）
掌握的知识点 / 技能
- 浏览器原理：事件循环、渲染流程、V8 内存管理、JS 引擎
- 设计模式：观察者、策略、工厂、装饰器、单例在前端中的应用
- 微前端：qiankun / Module Federation / single-spa 原理
- Monorepo：pnpm workspaces / Turborepo / Nx
- SSR / SSG / ISR：Next.js / Nuxt.js 的渲染策略对比
- Node.js 基础：Koa / Express / Hono，能写 BFF 层
- WebAssembly 基础概念与使用场景
- 跨平台：uni-app / Electron / Tauri 了解
- 技术写作与分享：掘金 / GitHub / 技术博客
- AI 辅助开发：Cursor、GitHub Copilot 深度使用
推荐学习资源
- GitHubYou-Dont-Know-JS（YDKJS）
⭐ 178k+ Stars，JS 最深度系列书籍，免费在线阅读，理解原型/闭包/异步必读
- 文档 / 教程Next.js 文档
React SSR/SSG 框架，理解 SSR 渲染策略的最佳实践参考
- 文档 / 教程Nuxt.js 中文文档
Vue 生态的 SSR 框架，与 Next.js 对应
TC39 JavaScript 语言提案列表，了解 JS 未来方向
- 搜索提示浏览器原理视频
B站搜：浏览器渲染原理 李兵
极客时间《浏览器工作原理与实践》作者，有免费节选视频
- 书籍《现代JavaScript库开发》
周冠亚著，从零开发工具库到发布到 npm，含测试与 CI