围绕一个小作品，每天做一个看得见的改动：四周从一页静态网页走到一个可维护、已上线的资料站。
- 学习结果
- 做出并上线一个资料导航站，能独立新增内容、看懂报错、重新部署，并清楚自己下一步该补什么。
- 时长
- 30 天计划
- 难度
- 零基础
- 核验
- 未核验
正文
零基础学做产品，最常见的失败方式是一直在“准备”：先看完 HTML 课，再看 CSS 课，再学 JavaScript，看了两个月还没做出任何能给别人看的东西。动力就是在这个阶段耗光的。
这条路线反过来：从第一天起就围绕一个具体的小作品，每天做一个看得见的改动。遇到不懂的，才去补那一块。三十天后你手里有一个真实上线的作品，也很清楚自己哪里还不会。
做什么作品
推荐做一个资料导航站：收录十条你关心的领域的资料（工具、文章、课程都行），有列表页、详情页和分类筛选。
选它是因为它刚好覆盖了做产品的核心基础：页面结构、样式、数据、页面之间的跳转和部署，却不涉及登录和收款这些容易劝退新手的部分。而且你真的会用到它。
四周安排
第一周：让一个页面跑起来。
- 第 1–2 天：打开三个你常用的网站，用浏览器开发者工具看它们的标题、链接和图片是怎么写的。
- 第 3–4 天：在本地写一个 HTML 页面，介绍你的导航站要收录什么，能在浏览器里打开。
- 第 5–6 天：用 CSS 调整字体、宽度和间距，让它在手机上也好读。
- 第 7 天：复盘，写下这一周卡住过的三个地方。
产出：一页能打开的介绍页。
第二周：做出可复用的卡片。
- 第 8–10 天：做一张资料卡片，有标题、简介、链接和一张图。
- 第 11–12 天：让卡片在手机上排一列、电脑上排三列。
- 第 13 天：处理特殊情况：标题特别长、没有图片、列表为空。
- 第 14 天：把重复的样式整理到一起。
产出：一个十张卡片的列表页。可以参考别人的信息组织方式，但不要复制别人的商标、付费图片和文章。
第三周：让数据驱动页面。
- 第 15–17 天：把十条资料整理成数据文件，每条都有统一的字段：标题、网址标识（slug）、分类、链接、简介。
- 第 18–19 天：用数据自动生成列表，加上按分类筛选。
- 第 20 天：每条资料有自己的详情页。
- 第 21 天：检查有没有重复的网址标识、失效的链接。
产出：新增第十一条资料时，只需要在数据文件里加一条，不用复制任何页面代码。这是这一周最重要的检验标准。
第四周：上线并根据反馈修改。
- 第 22–23 天：在本地构建，弄清楚生成的文件在哪个目录。
- 第 24 天：部署到 Cloudflare Pages 或 GitHub Pages。
- 第 25–26 天：请三个人用手机找一条资料，观察他们在哪里卡住。
- 第 27–28 天：修改发现的问题。
- 第 29 天：整理每条资料的来源。
- 第 30 天：写一份作品说明：做了什么、用了什么、还有什么不会。
产出：一个可以分享的线上链接。
每天怎么安排
每天 60 到 90 分钟就够，分三段：
- 15 分钟定目标：写下今天要完成的那一个改动，比如“卡片在手机上排成一列”。
- 45 分钟动手：和 AI 一起做，但自己动手改代码，不要整段复制。
- 15 分钟验证和记录：在浏览器里确认改动生效，用 Git 提交，并在学习日志里写一句今天学到了什么、哪里还不懂。
学习日志很重要。三十天后回头看，你会清楚地看到自己补了哪些知识，这比任何证书都更能说明你的能力。
怎么用 AI 学，而不是让 AI 替你做完
AI 可以一口气生成整个导航站，但那样你什么也学不到，也维护不了它。更好的用法是：
- 让它解释：“这段 CSS 的每一行在做什么？”
- 让它拆小步：“我要让卡片在手机上排一列，分三步告诉我，每步我自己改。”
- 让它出题：“给我一个故意写错的例子，让我自己找出问题。”
- 自己先猜再问：遇到报错，先写下你猜的原因，再问 AI 验证。
卡住时补什么
不用预先学完所有东西，按遇到的问题补课：
| 遇到的问题 | 去补 |
|---|---|
| 不知道怎么遍历一组数据 | 数组和循环 |
| 布局错位、手机上显示不全 | CSS 布局、响应式 |
| 点击没反应 | 事件、浏览器控制台报错 |
| 本地正常，上线后 404 | 路由、构建输出目录、部署配置 |
| 改了一处，别处也变了 | 组件和样式的作用范围 |
微服务、复杂框架、算法题，这三十天都不需要。
怎样算完成
三件事都能独立做到，就说明你走完了一次完整的维护循环：新增一条资料并上线；看到报错能定位到出问题的文件；改完后重新构建和部署。
三十天是一个节奏，不是保证，也不代表学完就能找到工作或者有收入。每天时间不够的话，按同样的周产物把周期拉长就行，关键是每天都有一个看得见的改动。
学习步骤
- 选定导航站要收录的领域，先列出十条资料。
- 第一周做出一个能在手机上阅读的介绍页。
- 第二周做出可复用的卡片和十张卡片的列表页。
- 第三周把资料改成数据文件，自动生成列表、详情和分类筛选。
- 第四周部署上线，请三个人试用，并修改发现的问题。
- 每天用 Git 提交一次，并在学习日志里写一句收获和一个疑问。
场景拆解
第 24 天：本地正常，上线后详情页 404
小陈在第 24 天把导航站部署到了 Cloudflare Pages。首页能打开，但点任何一张卡片进入详情页，都显示 404。
- 先缩小范围：首页正常，说明域名和部署本身没问题，问题出在详情页。
- 对照本地：本地构建后，打开生成的输出目录，发现详情页文件确实生成了，路径是
/resources/xxx/index.html。 - 找差异：查看卡片上的链接，写的是
/resource/xxx，少了一个 s。本地开发服务器帮他做了容错，线上没有。 - 修复和验证：改正链接，重新构建部署，逐个点开详情页确认。
- 记录：在学习日志里写下“本地能打开不代表线上能打开，要检查构建输出的实际路径”。
这一天他没有“学 Cloudflare”，而是学会了看构建输出目录。这就是按问题补课的样子。
补充材料
思维导图、练习、清单和参考资料可按需展开。
01 思维导图和离线文件
适合读完后下载到自己的知识库里继续整理。
四周产物
- 第一周：一页能打开的介绍页
- 第二周：可复用卡片与列表
- 第三周：数据驱动的列表、详情与筛选
- 第四周：上线并按反馈修改
每天的节奏
- 15 分钟定一个目标
- 45 分钟和 AI 一起动手
- 15 分钟验证、提交、写日志
按问题补课
- 不会遍历：数组和循环
- 布局错位：CSS 与响应式
- 点击没反应：事件与控制台
- 上线 404：路由与构建输出
02 实践练习
根据文章内容记录自己的判断与依据。
完成第一周并建立学习习惯
先只做第一周，同时把每天的学习节奏和日志习惯建立起来。
准备材料
- 一台能装 VS Code 和 Git 的电脑。
- 一个 AI 助手。
- 一份学习日志（任何笔记工具都行）。
练习步骤
01 / 定下作品
时间： 30 分钟
操作：
- 选一个你真正关心的领域。
- 列出十条资料，每条写一句为什么值得收录。
产出： 一份十条资料的清单。
检查： 每条资料都有可访问的链接。
02 / 写出介绍页
时间： 第 1–4 天，每天 60 分钟
操作：
- 观察三个网站的结构。
- 在本地写一个介绍页，说明导航站收录什么、给谁用。
产出： 一个能在浏览器里打开的 HTML 页面。
检查： 页面有清晰的标题层级，所有文字都能读到。
03 / 调整样式
时间： 第 5–6 天，每天 60 分钟
操作：
- 让 AI 分步骤教你调整字体、宽度和间距，每一步自己改。
- 在手机宽度下检查。
产出： 一个在手机和电脑上都好读的页面。
检查： 你能解释自己写的每一条 CSS 是做什么的。
04 / 第一周复盘
时间： 第 7 天，30 分钟
操作：
- 回看学习日志，写下卡住最久的三个地方。
- 为每个地方写一句下周准备怎么补。
产出： 一份周复盘。
检查： 七天里每天都有一次 Git 提交和一条日志。
完成检查
- 有一个能打开的介绍页，并且能解释它的每一部分。
- 连续七天有提交和日志。
- 知道下周要补的知识是什么。
03 清单、模板和关键词
用于项目记录和自查。
资料数据模板
title：资料标题
slug：网址标识（英文小写，用短横线连接，不能重复）
category：分类
url：原始链接
summary：一句话简介
addedAt：收录日期
每日学习日志模板
日期：
今天的目标（一个看得见的改动）：
完成了吗：
学到了什么（一句话）：
还不懂的地方：
明天的目标：
关键概念
- 作品驱动：围绕一个具体作品学习，按问题补课
- 可复用组件：一份卡片代码展示所有资料
- 数据驱动：新增内容只改数据，不改页面代码
- 构建输出目录：部署的是构建生成的文件
- 学习日志：记录每天的改动、收获和疑问
容易误判
- 先把课程全部看完再动手
- 让 AI 一次生成整个项目，自己只负责复制
- 每条资料复制一份页面代码
- 本地能打开就认为线上也没问题
- 把三十天当成就业或收入的保证
04 工具和参考资料
本篇涉及的工具和参考链接。
可参考工具
- VS Code
- Git
- 浏览器开发者工具
- Cloudflare Pages
- GitHub Pages