前端不是「学完再做」的，是「做着做着就学会了」。
我回头看自己的进步曲线，真正让我往前走的从来不是「把某个知识点学透」，而是「手上有个东西必须做出来，被迫去搞清楚它」。所以我这份路线和你在网上看到的很多版本不一样——每个阶段都有明确的「过关标志」，达到就往下走，剩下的在实践中补。时间是我按「每天能投入 2-3 小时」估的，仅供参考——它最大的作用不是让你卡点，而是让你知道大概要熬多久，别在第 3 周就怀疑自己天赋不行。二、阶段一：地基（HTML + CSS）
学什么
HTML：常用标签、语义化、表单。不用背全，知道「有这回事、要用时能查」就够了。CSS：盒模型、Flex 布局、定位、选择器优先级。其中Flex 是现代布局的主力，重点学。加上移动端适配的基础概念（rem / vw 这类），够用了。过关标志
给你一张网页设计图，你能用 HTML + CSS 把它静态还原出来，过程中不太需要查资料。
更具体一点：能自己还原一个登录页、一个卡片列表页。做到这个程度就可以走了。常见坑
别在 CSS 里深挖奇技淫巧。CSS 能玩出花，但对新手来说性价比极低，先会做常见布局移动端适配别一开始就追求全懂。先会用一种方案（比如 rem 或 rpx）解决问题，剩下的遇到再说三、阶段二：JavaScript（这条路的分水岭）
这是整条路线里唯一值得你学两遍的部分。别急着一次学到底。第一遍：会用
变量、函数、数组和对象操作、循环判断、DOM 操作、事件、请求接口、回调函数。目标是能写出有交互的页面。第二遍：想通
作用域、闭包、this、原型链、事件循环（宏任务/微任务）、Promise 和 async-await。这一遍才是真正拉开差距的地方。过关标志
第一遍：能写一个「输入关键词 → 请求接口 → 渲染列表」的页面。
第二遍：写代码时不再出现「为什么这个变量是 undefined」这类困惑，面试能讲清闭包和事件循环。
常见坑
第一遍就死磕原型链。会很痛苦，而且记不住。先用起来，第二遍再回头看只看不写。JS 是手上功夫，「看懂」和「写出」是两个完全不同的能力，看十篇不如自己写一个四、阶段三：工程化（从「会写」到「能协作」）
这块很多自学的人直接跳过，但它恰好是从「能写页面」到「能进团队」的门槛。学什么
Git：branch / commit / merge / PR。这是硬门槛，必须会，不是可选项npm 与包管理：装包、卸载、看懂 package.json构建工具：知道 Vite / Webpack 在干什么就行（打包、转译、热更新），不用会手写配置过关标志
能把自己的项目推到 GitHub，能 clone 别人的项目并跑起来，遇到报错会看终端输出而不是直接懵掉。
常见坑
一开始就想搞懂 Webpack 配置。没必要，先用脚手架（Vite 就很好），遇到报错再一点一点理解不用 Git。这个习惯的代价会在你入职第一天集中爆发五、阶段四：框架（选一个，别贪多）
Vue 还是 React？选一个就行。判断方法很朴素：看你所在城市或目标公司的招聘要求，哪个多选哪个。国内中小公司 Vue 的岗位更多，大厂和出海团队 React 更常见。学什么
状态管理：Pinia / Redux（先会用，别急着研究原理）路由：Vue Router / React Router顺带补上 TypeScript 基础：类型标注、接口、泛型入门。现在大部分团队都用它写项目，越早接触越省事过关标志
能独立做出一个多页面应用：有列表页、详情页、表单提交、接口请求、加载状态。
常见坑
Vue 和 React 一起学。两套概念会互相干扰，先吃透一个只学框架不补 JS。框架里遇到的坑，最后几乎都会回到 JS 基础，绕不开的六、阶段五：做项目（最重要的一步）
做项目不是「学完之后的应用」，它本身就是最好的学习方式。
选什么项目
别做 to-do list 和后台管理系统。教程烂大街，做完也没人用，你自己也没有动力打磨我的例子
我做的是个起名小程序。原因很朴素：朋友生娃为起名发愁，市面上的 App 不是广告满天飞就是要充会员，我想「不如自己做一个」。后端怎么弄——我选了微信云开发，不用买服务器、不用配域名，前端就能写跨端兼容到底有多少坑——同一套绘制逻辑，iPhone 上很完美，安卓上字体变形、弱网卡死怎么让用户搜到你的产品——小程序上线只是开始，搜索优化才是另一半怎么知道用户在用什么——我搭了一套零成本的埋点体系，才发现之前完全是盲飞审核和合规的红线在哪——我有个功能做完测试通过，结果被审核驳回这些东西没有任何一份教程会完整教你，因为它们只有在「真的要做出来」的时候才成为问题。相关文章
【内链】《零基础也能上线！我用微信小程序云开发做了个「起名神器」》【内链】《微信小程序搜索优化实战：5 个零成本可落地的优化项》【内链】《微信小程序海报生成实战：我踩过的 7 个跨端兼容坑》【内链】《小程序埋点体系：不接第三方 SDK，我用 90 行代码搭了一套》七、阶段六：往上走（工作之后）
深度方向：性能优化、浏览器原理、源码阅读
广度方向：Node.js 全栈、跨端（小程序 / RN / Flutter）、可视化
工程方向：CI/CD、监控体系、团队规范
这个阶段没有标准答案，我的建议是跟着手上的问题走：遇到性能问题就学性能，遇到部署问题就学部署。为了学而学的效率，远低于为了解决问题而学。另外单独说一句算法和数据结构：它属于面试导向，不在这条路线的必要路径上。如果你的目标是进大厂，需要单独安排刷题；如果只是想做出东西，可以先跳过。按你的目标决定，不用被别人的焦虑带节奏。八、几个我想强调的原则
不要按顺序「学完再走」。每个阶段达到过关标志就往下，剩下的在实践中补。回头看，我浪费最多时间的阶段，都是在基础里无限深挖的那几周项目要早点做。我建议在阶段二结束就开始动手，边做边补阶段三、四的内容这份路线会持续更新。我会把新写的文章链接补进对应的阶段里，建议收藏本文，过一两个月回来看看路线图不是任务清单。它的作用是让你知道大致方向和当前进度，不是必须按部就班打卡的作业如果你在某个阶段卡住了，或者想聊聊自己在做的项目，可以点菜单里的「加入营地」加我微信。
