我学编程第一个月就干了一件蠢事——决定做"一个完整的电商网站"。当时我觉得，既然学了 HTML、CSS、JavaScript，那做点"像样的东西"不过分吧？结果两周后，我连商品列表都没做完，整个人被登录、购物车、库存、支付这些概念按在地上摩擦，差点放弃。后来我才明白：新手的第一个项目，不是用来炫技的，而是用来"走通一遍流程"的。这篇文章讲讲我后来想通的事。

一、为什么别一上来就做大型项目

大型项目最大的问题不是"难"，而是"模糊"。新手最大的敌人不是某个具体知识点，而是不知道下一步该做什么。做电商时我每天都在纠结：是先写数据库还是先写页面？是先做后台还是先做前端？这种"不知道做什么"的状态会迅速榨干你的动力。

大型项目还隐藏着大量你尚未接触的概念：状态管理、权限控制、数据校验、并发、部署……每一项都能单独写一本书。把它们塞进第一个项目，等于让一个刚学会颠勺的人去准备一桌满汉全席，结果只能是崩溃。

所以新手的第一个项目应该满足三个条件：范围小到一周内能做完、只用到你已学的知识、能跑起来给你正反馈。

二、我推荐的三个入门项目

下面这三个项目，是我后来带新手时反复验证过的，难度递增，每一个都能在一周内完成。

1. 待办清单（Todo List）

只做最核心的：添加一条、勾选完成、删除。不要做用户登录，不要做云同步，数据存 localStorage 就行。它会逼你练到 DOM 操作、事件监听、数组方法、本地存储——这些是前端的基本功。

2. 个人主页（静态站）

用纯 HTML + CSS 做一个介绍自己的页面，包含头图、关于我、技能列表、联系方式。重点练的是布局、响应式、字体配色。做完部署到 GitHub Pages，你能第一次拥有"自己的网址"，那种成就感非常关键。

3. 简易天气查询

调用一个免费的天气 API，输入城市名返回当前天气。这是你第一次接触网络请求、JSON 解析、异步处理。它把"前端 = 画页面"的认知，扩展到"前端 = 画页面 + 拿数据 + 渲染数据"。

三、需求拆解方法

选好项目后，别急着写代码。先把需求拆成"最小可执行的任务清单"。我用的方法是：把每个功能拆成"用户故事 → 操作步骤 → 涉及数据"三层。

以"待办清单"为例，拆解如下：

• 用户故事：作为用户，我想添加一条待办，这样我能记住要做的事。
• 操作步骤：在输入框打字 → 按回车 → 列表里多出一条。
• 涉及数据：一个数组，每项包含 {id, 文字, 是否完成}。
• 用户故事：作为用户，我想勾选完成，这样我能区分已做和未做。
• 操作步骤：点击条目前的圆圈 → 圆圈变色 → 文字加删除线。
• 涉及数据：更新该条目的"是否完成"字段，并重新渲染。

拆到这一层后，每一条都是 10-30 分钟能搞定的小任务，写代码时就不会再陷入"我到底要干嘛"的茫然。这是我从放弃电商到重新爱上编程的关键转折。

新手写不下去，90% 不是因为不会写代码，而是因为不知道接下来要写什么。

四、我踩过的坑（列表）

下面这些坑我全都踩过，希望你能绕开：

• 功能蔓延：做着做着就加需求，待办清单非要加标签、提醒、日历视图，最后什么都做不完。
• 不写 CSS 直接堆 div：以为先把功能做完再美化，结果 CSS 乱成一团，改一个地方崩三处。
• 不存代码版本：改坏了不知道怎么改回去，最后只能整文件复制备份成 todo_v1、todo_v2、todo_最终版_真的最终版。
• 照着教程抄不思考：跟着视频敲完能跑，关掉视频一行都写不出。后来我改成"看完一节就关掉自己写"，才真正学会。
• 没有"完成"标准：永远觉得还差点什么，项目永远不结束。后来我学会了给每个项目定一个"完工定义"，达成就提交，不再纠结。
• 过度追求新技术：第一个项目就要上 React + TypeScript + Tailwind + Vite，光配环境就耗了三天。

五、写在最后

第一个项目的意义，不是产出多厉害的作品，而是让你完整体验"从一个想法到能跑的东西"的全过程。这个过程一旦走通一次，你就有信心走第二次、第三次，然后慢慢做大。所以请务必挑一个小的、明确的、一周能做完的项目，把它做完、提交、部署、分享出去。这一步走通了，你才算真的入门了。