LEARNING ROADMAP
完整学习路线图
从零基础到能独立交付项目，五阶段路线图。每一步都标注了要学的知识点与建议时长，让自学不再靠摸黑。
路线说明
HOW TO USE
这是一份可以照着走的路线图
这份路线图来自作者五年自学经验的总结，把零基础到独立交付拆成五个清晰阶段。每个阶段都有明确的目标、知识点清单和建议时长，不会让你在「接下来该学什么」上浪费精力。
路线图不是教条，节奏可以根据自己的情况调整。但建议严格遵循阶段顺序——跳过基础去学框架，是自学最大的时间杀手。
- 每个阶段都有「完成标志」，达标再进入下一阶段
- 知识点清单可点击进入对应分类的实战日记
- 建议时长按每天有效学习 2-3 小时估算
FIVE STAGES
五阶段学习路线
从打地基到能交付，五个阶段循序渐进。每个阶段的圆圈数字代表它的顺序，下方是知识点与建议时长。
01
STAGE
夯基础
把 HTML / CSS / JS 三件套真正吃透
这个阶段不碰任何框架，专注把前端三件套的基础打牢。重点不是「知道有这个标签」，而是「能用它独立写出一个页面」。每个知识点都要配 demo，写不出来的就是没懂。
HTML 语义化
盒模型
Flex 布局
Grid 布局
响应式设计
JS 基础语法
DOM 操作
事件机制
ES6+ 新特性
02
STAGE
练手感
用原生 JS 做几个能跑的小项目
基础学完不等于会用。这个阶段要逼自己用原生 JS 完成 3-5 个小项目，不带任何框架和库。目的是把零散的知识点串成「能完成一件事」的能力。
待办应用
天气查询
图片画廊
计算器
本地存储
fetch 请求
简单动画
表单验证
03
STAGE
做项目
进入框架世界，用 React 或 Vue 做完整项目
有了原生 JS 的底子，框架学起来会快很多。这个阶段选择一个框架深入（推荐 React 或 Vue 二选一），用它完成 1-2 个有真实数据、有路由、有状态管理的完整项目。
React / Vue 基础
组件化思维
Hooks / Composition API
状态管理
路由
API 联调
Git 协作
Vite / Webpack
04
STAGE
查缺漏
补算法、补工程化、补全栈视野
能写项目之后，要回头补那些「不补也能跑、补了更专业」的东西。这个阶段开始刷 LeetCode、学 Node.js、了解 CI/CD 与部署，让能力从「能写」升级到「能写好」。
数据结构
常见算法
LeetCode 刷题
Node.js 基础
数据库入门
工程化
Docker
性能优化
05
STAGE
能交付
独立完成从需求到上线的完整交付
最后这一阶段不是学新东西，而是把前面所有能力整合到一次完整交付里。从需求沟通、UI 设计、开发、联调到上线部署全程一个人扛，真正具备「能交付」的能力。
需求拆解
UI 设计基础
架构设计
联调与测试
部署上线
线上排障
项目复盘
沟通协作
路线是地图，脚步要自己走
每个阶段都要靠真实代码积累，看十遍不如写一遍