Web 开发 · 5-8 个月
前端技术学习路线
从 HTML、CSS、JavaScript 到 TypeScript、Vue、Nuxt 和工程质量，建立完整浏览器端开发能力。
MDN Web 学习区系统学习 Web 平台基础。访问官方资料 ↗学习方法
每个阶段都要完成三件事
能用自己的话解释
不要只记语法，先说清它解决什么问题。
从空目录做项目
减少照抄，主动处理输入、错误和边界情况。
通过检查再继续
不会的部分回到文档和调试器，而不是跳过。
学习顺序
前端技术的 10 个阶段
建议按顺序展开学习。时间为每周投入 8-12 小时的参考值。
01零基础 · 2-3 天认识 Web 与开发环境知道网页如何从地址栏来到屏幕，并能运行自己的第一个本地页面。
需要学习
- 浏览器、服务器、URL 和 HTTP 的基本关系
- VS Code、浏览器开发者工具和终端的用途
- 文件、目录、扩展名与相对路径
动手练习
- 创建 index.html 并用浏览器打开
- 用开发者工具修改页面文字和样式
- 在终端中进入项目目录并查看文件
进入下一步前
- 能解释 HTML、CSS、JavaScript 分别负责什么
- 能打开 Console 和 Network 面板
- 能看懂基本目录结构
官方资料与延伸阅读
MDN Web 入门从环境安装和第一个网站开始。打开 ↗02基础 · 1-2 周HTML：搭建有语义的页面能使用正确的元素组织文章、表单、导航和媒体内容。
需要学习
- 标题、段落、列表、链接与图片
- header、nav、main、section、article 等语义元素
- 表单 label、input、button 和基础可访问性
动手练习
- 制作个人介绍页
- 制作一篇包含目录和图片的文章页
- 制作登录或反馈表单
进入下一步前
- 页面没有全部使用 div
- 图片有合理 alt，表单有可见 label
- 标题层级连续且结构清楚
官方资料与延伸阅读
MDN HTML 学习按内容结构、链接、图片、表格和表单顺序学习。打开 ↗HTML 标准作为深入查询资料，不需要从头通读。打开 ↗03基础 · 3-5 周CSS：布局、响应式与视觉基础能把设计稳定实现为桌面和移动端页面。
需要学习
- 盒模型、选择器、层叠与继承
- Flexbox、Grid、定位和层级
- 响应式断点、相对单位和可访问的交互状态
动手练习
- 复刻一个新闻列表和一个产品卡片列表
- 实现桌面与手机导航切换
- 用 Grid 和 Flex 分别完成同一布局
进入下一步前
- 没有依赖大量绝对定位完成主布局
- 375px 下没有横向滚动
- 按钮有 hover、active 和 focus-visible 状态
官方资料与延伸阅读
MDN CSS 学习先掌握基础，再进入布局模块。打开 ↗web.dev Learn CSS包含现代 CSS 与可访问性实践。打开 ↗04核心 · 6-10 周JavaScript：理解语言和浏览器交互能独立实现交互、处理数据，并理解异步代码。
需要学习
- 变量、函数、数组、对象、作用域与模块
- DOM、事件、表单和浏览器 API
- Promise、async/await、事件循环和错误处理
动手练习
- 待办事项应用
- 调用公开 API 的搜索页面
- 带校验、加载和错误状态的表单
进入下一步前
- 能解释值类型、引用类型和闭包基础
- 会使用 map、filter、reduce 处理数据
- 能处理请求成功、失败和等待状态
官方资料与延伸阅读
MDN JavaScript 指南作为系统主线学习。打开 ↗JavaScript.info适合补充语言细节和浏览器知识。打开 ↗05必备工具 · 1 周Git 与 GitHub：保存和协作代码能安全记录修改、创建分支并把项目发布到远程仓库。
需要学习
- 仓库、提交、分支和合并
- clone、pull、push 与远程仓库
- 冲突产生原因和基本解决流程
动手练习
- 为学习项目建立 Git 仓库
- 每完成一个功能创建一次有意义的提交
- 创建分支并合并一个小功能
进入下一步前
- 不会提交 node_modules 和密钥
- 能用 git status 判断当前状态
- 能说明 pull 与 push 的方向
官方资料与延伸阅读
Git 官方教程了解基本命令和版本模型。打开 ↗GitHub Skills通过交互课程练习仓库协作。打开 ↗06进阶基础 · 2-3 周浏览器、HTTP 与调试能从 Network、Console 和缓存信息定位常见网页问题。
需要学习
- 请求方法、状态码、Header 和 JSON
- 缓存、Cookie、跨域和基础安全概念
- 渲染流程、事件循环和性能指标
动手练习
- 分析一个页面的请求瀑布图
- 观察缓存前后请求差异
- 定位一个跨域或接口错误
进入下一步前
- 能区分 4xx 与 5xx
- 知道强缓存和协商缓存的基本区别
- 能从 Network 面板复制请求和响应信息
官方资料与延伸阅读
MDN HTTP重点阅读请求、响应、状态码和缓存。打开 ↗Chrome DevTools跟随官方文档练习调试面板。打开 ↗07进阶 · 2-4 周TypeScript：给代码加上可靠边界能为接口、组件和业务状态设计清晰类型。
需要学习
- 基础类型、对象、函数与类型推断
- 联合类型、泛型、unknown 与类型收窄
- tsconfig 和第三方类型声明
动手练习
- 把一个 JavaScript 项目迁移到 TypeScript
- 为 API 返回值和错误状态建模
- 用联合类型描述加载状态
进入下一步前
- 不依赖大量 any
- 能区分类型检查与运行时校验
- 会阅读常见 TypeScript 报错
官方资料与延伸阅读
TypeScript Handbook按 Everyday Types、Narrowing、Generics 顺序学习。打开 ↗08框架 · 4-6 周Vue 3：组件化构建应用能用 Vue 和 TypeScript 完成中小型单页应用。
需要学习
- 模板、响应式状态和计算属性
- 组件 props、emit、slot 与组合式函数
- Vue Router、状态管理和异步数据
动手练习
- 带筛选和分页的列表应用
- 拆分可复用表单组件
- 实现路由、加载和空状态
进入下一步前
- 组件职责清楚且数据流单向
- 能区分 computed 与 watch
- 会处理组件卸载和异步副作用
官方资料与延伸阅读
Vue 官方教程先完成互动教程，再阅读指南。打开 ↗Vue 官方指南重点掌握基础、深入组件和逻辑复用。打开 ↗09应用框架 · 3-5 周Nuxt 3：SSR、SEO 与完整 Web 应用能构建可部署的内容站或包含服务端接口的 Vue 应用。
需要学习
- 文件路由、布局、中间件和插件
- useFetch、useAsyncData 与渲染模式
- SEO、Nitro API、缓存和部署
动手练习
- 制作带详情页的内容站
- 增加站点地图和结构化数据
- 实现一个服务端 API 与错误处理
进入下一步前
- 理解 SSR、CSR 和预渲染的区别
- 不会在服务端错误访问 window
- 能完成一次生产构建和部署
官方资料与延伸阅读
Nuxt 官方文档按项目结构、路由、数据获取和部署学习。打开 ↗10工程实践 · 持续学习工程质量：测试、性能与可访问性让项目不只“能运行”，还具备可维护、可验证和可访问的质量。
需要学习
- 单元测试、组件测试和端到端测试的边界
- Core Web Vitals、资源优化和性能预算
- 语义 HTML、键盘操作、对比度和屏幕阅读器
动手练习
- 为工具函数和关键流程补测试
- 用 Lighthouse 修复一轮问题
- 只用键盘完整操作自己的页面
进入下一步前
- 关键业务有自动化验证
- 移动端无横向溢出和明显布局偏移
- 交互控件有可见焦点和明确标签