生成第一版本地网页

05-02 生成第一版本地网页

这一课让学员第一次看到“我的一句话变成能打开的东西”。

前一课已经澄清需求，这一课生成最小网页，保存到项目文件夹，并用浏览器打开。

这一课追求跑通和确定感。样式可以后面慢慢改，第一版最重要的是文件放对、页面打开、核心内容出现。

可以这样开场：

“今天这节课，我们要得到第一个看得见的成果。它可以很简单，但必须能打开。”

先打开上一课的需求澄清记录。

然后对 AI 说：

请基于这份需求，生成第一版本地网页。
要求使用 HTML、CSS 和少量 JavaScript。
先保证能打开、能看到内容、结构清楚。
请先说明你准备创建哪些文件。

这里要先让 AI 说明文件：

接着再让 AI 生成：

确认按这个结构生成。
请分别给出 index.html、style.css、script.js 的内容。

保存文件时要慢一点讲：

“文件一定要放在项目文件夹里。很多页面打不开，原因是文件保存到了别的地方。今天你不需要懂所有代码，但要确认文件位置。”

可以让 AI 帮忙检查保存位置：

我的项目文件夹是：
我准备把三个文件放在这里。
请告诉我文件名是否正确，以及浏览器应该打开哪个文件。

打开方式：

打开后，不评价美丑，先检查三件事：

如果页面出现了，就让学员截图保存。

这里可以安抚学员：

“第一版像毛坯房。先有墙、有门、有窗，后面再装修。不要在毛坯房阶段嫌弃墙面颜色。”

最后把结果写进日志：

目标：生成第一版本地网页。
结果：index.html 能在浏览器打开，页面显示标题和核心内容。
下一步：修改标题区域和按钮样式。

最后收束：

“从今天开始，你不只是在聊天窗口里得到文字，你已经能把 AI 的输出变成电脑上真实能打开的作品。”

让学员基于自己的最小版需求，生成第一版本地网页。

检查三项：

练习完成后，让学员向 AI 汇报：

第一版页面已经能打开。
这是我看到的结果：
请帮我判断下一步最适合修改哪一个小地方。

提交第一版网页截图，并保存项目文件结构截图。

补充要求：