我懂 Web Dev，但我什么都建不出来——这是我改变的

Source: Dev.to

如果你是刚入门的新人，或者已经看了无数教程、课程和播放列表，却仍然没有自己动手做过项目——这篇文章适合你。

我也曾经历过。 看视频、读文档、单独理解各种概念，却从未有足够的自信独立开始一个项目。常见的借口总是：

“我还不够懂。”

事实是，你永远不会觉得自己“准备好”。你需要的是一种结构化的学习方式，学够用、付诸实践、不断前进。

本指南记录了我在重新学习前端开发时的收获——以及你如何走同样的路线，构建自己的第一个真实项目，即使它很基础。

注意： 本指南并不追求完美，而是强调构建可运行的东西。如果你能独立完成一次，你以后就有能力构建更复杂的项目。

本指南适用人群

• 被全栈教程淹没的新人
• 陷入“教程地狱”的人
• “会”MERN 但无法启动项目的开发者
• 想要一条清晰、端到端学习路径的绝对初学者

如果以上描述符合你，请继续阅读。

第 1 阶段 – 最少的 HTML/CSS，最多的 JavaScript 理解

必学要点

• 基础 HTML 标签
• 基础 CSS
• Flexbox

真正的重点应该放在 JavaScript 上。

JavaScript 真正重要的内容

• 代码执行方式
• 预测代码片段的输出
• async/await 与 Promise
• 箭头函数
• 作用域与闭包
• 调用栈与事件循环（概念层面）

仅靠阅读是学不会 JavaScript 的。只有当你：

• 预测输出
• 编写小片段代码
• 故意让代码出错
• 修正误解

时，它才会“点通”。

第 2 阶段 – 先学后端（大多数人会跳过这里）

核心后端主题（按顺序）

1. Node.js
2. HTTP 服务器
3. Express.js
4. Postman（接口测试）
5. 中间件
6. Header 与查询参数
7. 认证（自行编写 auth 接口）
8. JWT 与授权
9. MongoDB（基础 CRUD）
10. 密码哈希
11. Zod / 输入校验

目标是会用，而不是精通。如果你能写路由、用认证保护路由、存取数据，并在 Postman 中全部测试通过——说明进展顺利。

第 3 阶段 – 构建一个基础后端项目（不使用 AI，不走捷径）

项目示例

• Todo 应用
• 简易电商后端
• 任意基于 CRUD 的系统

构建步骤

• 阅读官方文档
• 在 Google 上搜索错误信息
• 利用 Stack Overflow
• 手动调试

设计清单

• 自己的数据库 schema
• 认证流程
• 控制器
• 路由

在 Postman 中测试所有接口。若全部通过——恭喜你，已经掌握了约 70% 的后端开发内容。

第 4 阶段 – 学习 React（最后的大坎）

学习内容

• React
• Tailwind CSS

因为已经有了后端，你已经知道：

• 需要哪些数据
• 一个真实的目标

任务

为你刚才创建的后端构建前端。

明智使用 AI

• 可以请 GPT 帮你梳理组件结构或解答疑问
• 不要盲目复制；阅读、理解后自行重写

随着时间推移，React 会不再神秘，而变得合乎逻辑。

第 5 阶段 – 用 TypeScript 与真实数据库升级

新技能

• TypeScript
• WebSockets
• PostgreSQL
• Prisma

第二个项目示例

一个基础的聊天应用。

仍然沿用之前的做法：

• 数据库建模
• 认证
• 控制器
• 路由
• Postman 测试

此时你已经掌握了约 95% 的实用 Web 开发能力，能够理解并参与大多数公司的代码库。

剩余的 5% – 市场真正需要的东西

产品化主题

• Next.js
• Monorepos / Turborepo
• 基础 DevOps
• CI/CD
• Docker
• Kubernetes（概念层面）

这些技能能把开发者提升为能够：

• 构建
• 部署
• 维护
• 扩展

的工程师。市场更看重能够端到端理解产品的人，而不是只会写代码的人。

最后感想

这条路并不光鲜，也不快，更别指完美。

但只要你独立完成一次，你就再也不会卡住。 以后面对新项目、代码库或面试时，你不会再害怕，因为你已经在“构建”，而不是仅仅跟随教程。