做出东西第 2 到 5 天

目标：网页上多一个按钮，点一下，页面里的字变了。
为什么是按钮：这是「它听我的话」第一次发生。比任何原理讲解都有效。

时间表

① 00-06 找回昨天

不说路径。 只说：

你昨天做的东西，现在还在你电脑里。你自己去找。
找不到就说一声，我教你一招。

一招（只在他说找不到时才给）：

按 Win 键，直接打「我的网页」四个字。

如果彻底丢了 → 别慌，说「没关系，我们两分钟重建一个」，把 Day 1 的提示词再跑一遍。这是最好的复习，不是失败。

② 06-10 今天要做出什么

屏显一句话

昨天它是一张画。今天它会听你的话。

不要再解释。

③ 10-25 要一个按钮

必须讲的一句话

给 AI 提要求，说的是三件事：我现在有什么、我要加什么、我不许你动什么。
第三句最重要。不写它，它会好心地把你的东西全重写一遍，你的名字就没了。

复制即用（固定文案）

```
这是我现在的网页代码：

【把昨天的代码全选复制，粘在这里】

请在这个网页的最后加一个按钮，按钮上写「点我」。
点了之后，页面上原来那句「我想对四年后的自己说的话」
换成「我已经出发了」。
其他所有内容一个字都不要改，只加这个按钮和它的动作。
只给我完整的、可以直接保存的代码，不要解释。
```

③ 25-35 改原来的文件（这一天最容易被忽略的一步）

必须讲的一句话

昨天我们是「另存为」一个新文件。今天不要另存为，直接改原来那个。
因为「另存为」会让你手上多出一堆长得一样的东西，你下周就不知道哪个是最新的了。

操作路径
1. 右键 我的网页.html → 打开方式 → 记事本
2. Ctrl + A 全选 → 直接粘（覆盖掉旧的）
3. Ctrl + S
4. 关掉记事本（关掉的时候如果问你保存不保存，说明刚才那下 Ctrl+S 没按准）

④ 35-42 刷新，点它

回浏览器窗口 → F5 → 看到按钮 → 点。

屏显一句话

这个按钮，是你刚才用一句话换来的。
你没写代码，你写了要求。

坑

保底线

按钮存在但点了没反应，也算过。
页面是完整的、按钮看得见 = 今天有成果。点得动是加分。

⑤ 42-45 发出去 + 钩子

发截图 + 一句「我做了个按钮，点一下会变」。

钩子

明天，别人不用装任何东西、不用你在旁边，也能打开你这张网页。

目标：离开你这台电脑，这个东西还能打开。
藏进去的技能：文件夹、压缩包、传文件、拖拽。

时间表

③ 10-20 建文件夹

操作
桌面右键 → 新建 → 文件夹 → 命名「我的网页」
把 我的网页.html 拖进去（按住左键拖，松手）

必须讲的一句话（今天最重要的）

一个文件，和一个文件夹，区别是：文件夹里能装很多个文件。
你现在觉得没差别，因为里面只装了一个。
明天它要装第二个，那时候你就知道为什么今天要先建这个文件夹了。

这句话不许省略。 它是 Day 4 全部困难的解药。

③ 20-30 压缩

操作

• Win11：右键这个文件夹 → 「压缩为 ZIP 文件」
• Win10：右键 → 发送到 → 压缩(zipped)文件夹

必须讲的一句话

压缩不是变魔术，是把一堆东西捆成一包，方便带走。
你看它从「一个文件夹」变成了「一个带拉链的文件」，但里面装的东西一个不少。

验证：双击打开这个 zip，确认网页还在里面。先确认再发。

④ 30-40 发出去

主线：发给一个有电脑的同学，微信或 QQ 发文件，对方解压、双击、回你一句「看到了」。

保底线（没人有电脑 / 没装微信电脑版）：

• U 盘：拷到家里另一台电脑打开
• 或者：发到「文件传输助手」，手机上收到 zip ， 只能证明「传得出去」，不能证明「打得开」，记为半过

必须讲的一句话

「发过去了」不算成功，「他打开了」才算。

坑

⑤ 40-45 收尾

屏显一句话

你今天学到的两件事，叫「文件夹」和「压缩包」。
你有没有发现一件事：你要发给别人的，永远是一个文件夹，不是一个文件。

钩子

明天，网页上会有一张你自己的照片。而它会比你想象的难一点。

提前说「会难一点」是故意的，预告困难能降低掉队率，因为卡住的时候他会想起「说了会难」。

目标：网页上出现一张图片。
这一天撞上的是「路径」，电脑心智里最难的一层。

顺序是设计过的：先成功，再冒险

• 前半段用截图（一定成功）
• 后半段换你自己的照片（可能卡在格式、传输上）

卡在后半段的人，至少拿到了一张有图的网页。这是保底线的全部意义。

时间表

③ 08-15 保底线：用截图

操作
1. 按 Win + Shift + S，或者搜「截图工具」
2. 随便截一块屏幕，Ctrl + S 保存到 「我的网页」这个文件夹
3. 文件名改成 photo.png（纯英文，不加空格）

为什么先教截图：截图是大学生最常用的技能之一，而且不需要从任何地方传文件进来，它自己就长在你的电脑上。

复制即用

```
在我的网页最上面加一张图片，图片文件名是 photo.png，
文件就在这个网页同一个文件夹里。

其他内容一个字都不要改。只给我完整代码。
```

③ 15-25 主线：换成你自己的照片

必须讲的一句话（整门课最重要的一句之一）

图片必须和网页呆在同一个文件夹里。
这是电脑里最反直觉的一条：文件不是按「我把它放在哪」记住的，
是按「它和谁在一起」记住的。

操作
手机里的照片传到电脑 → 拖进「我的网页」文件夹 → 文件名改成 my.jpg → 让 AI 把 photo.png 改成 my.jpg

传照片：微信电脑版 →「文件传输助手」→ 手机发 → 电脑下载 → 下载到了「下载」文件夹，不在「我的网页」里（这一步必须提醒）

④ 25-30 故意弄坏，再修好（这一段不许省）

1. 把 my.jpg 拖出文件夹，放到桌面
2. 刷新网页 → 图裂了，变成一个破图图标
3. 拖回来 → 刷新 → 好了

必须讲的一句话

刚才那个破图，不是网页坏了，是它去找那个文件，没找到。
大学四年里，你会看到一百次这个破图。现在你已经知道怎么修了。

坑

保底线

用截图跑通 = 今天算过。 自己的照片卡住了，记下来，Day 11（传文件）会补。

钩子

明天不教新东西。明天把这张网页变得好看，你只用说话。

目标：同一张网页，换一套样子，内容一个字不变。
这一天没难度，是故意的。 Day 4 刚熬过一座山，Day 5 必须给一次「我说了算」的快感。

时间表

③ 08-16 先要方案，不要代码

必须讲的一句话

大多数人跟 AI 说话是「给我做个好看的」。
你今天学一个更高级的：先让它给三个方案，你选。
你是那个拍板的人，它只是提方案的。

复制即用

```
这是我现在的网页代码：

【粘贴代码】

先不要改代码。先用三句话，分别告诉我三种不同的风格长什么样，
叫它们 A、B、C。每种说清楚：背景是什么颜色、字是什么颜色、整体什么感觉。
```

③ 16-26 选一个，改

复制即用

```
用 A 这个风格重做我的网页。
内容一个字都不许改，所有文字原样保留，只改背景、颜色、字号、间距、圆角。
给我完整的、可以直接保存的代码，不要解释。
```

微调（这是真正的技能）

「太暗了」「字太小了」「按钮太丑了」「太花了」，直接说人话。
你说人话，它翻成代码。这就是它最大的用处。永远不用学它那套术语。

动手前先备份
右键 我的网页.html → 复制 → 粘贴 → 改名叫 我的网页-备份.html

讲：改之前先留一份。这样改砸了还能回去。
这东西以后会救你很多次。

④ 26-30 两个版本并排

开两个浏览器窗口，一个新版一个备份版，摆在一起。

屏显一句话

左边是昨天。右边是今天。中间差的不是技术，是你会说要求了。

坑

阶段验收（Day 5 结束）

三个全过，才进第二阶段：

1. 他能自己找到「我的网页」这个文件夹（不提示）
2. 他能说出这个网页里一共有几个文件，分别叫什么
3. 他有一次把东西真的发给了另一个真人，并收到了回复

第 3 条不过的人，Day 6 开始前必须补一次。没有发出去过的人，很难撑过 Day 8。

钩子

下五天，不玩网页了。
下一天，你去查清楚一件你 9 月必须知道的事。