第 1 课 认识 Codex 与网页作品世界

本课定位

这节课是启蒙营的起点，目标不是讲很多概念，而是让学生第一次真实感受到：我说清楚一件事，Codex 就能帮我把第一版做出来。

学习目标

• 知道 Codex 能帮我做什么
• 理解网页作品的基本样子
• 敢于提出第一个清楚的问题

本课会用到的技术与方法

• Codex 基础对话
• 网页作品示例
• 需求表达

课前准备

• 准备电脑和浏览器
• 想 3 件自己喜欢的事
• 准备一句“我想做一个……”的开场

60 分钟课堂流程

环节	讲授安排
0-10 分钟	用 我的第一张互动名片 做导入，先让学员看见这节课要做出来的效果。
10-20 分钟	讲清本课的关键词、规则和做法，先把任务说清楚。
20-35 分钟	讲师示范一轮，用 Codex 做出第一版，再解释为什么这样安排页面。
35-50 分钟	学员跟做并替换成自己的内容，讲师巡回答疑。
50-60 分钟	现场展示、快速点评、布置课后任务。

核心讲授点

• 启蒙阶段最重要的是把目标说清楚，而不是一次学完所有技术。
• 网页作品可以很小，但一定要能被别人看懂。
• 学生第一次成功比第一次做对所有细节更重要。

本课完整素材

兴趣清单示例

我喜欢的内容：
1. 篮球和校队训练
2. 古诗词里的画面感
3. 英语配音和校园广播
4. 用小游戏记住知识点
5. 和朋友一起做班级活动页

可直接复制给 Codex 的提示词

提示词 1：先做第一版

我是一名中学生，现在想做 一个能直接在浏览器里运行的网页作品。
主题是：我的第一张互动名片

请直接把第一版做出来，页面里一定要有：
- 标题和一句自我介绍
- 至少 3 个兴趣标签
- 一个会变化的小按钮
- 适合投屏展示的配色

这次要用到的内容如下：
兴趣清单示例：
我喜欢的内容：
1. 篮球和校队训练
2. 古诗词里的画面感
3. 英语配音和校园广播
4. 用小游戏记住知识点
5. 和朋友一起做班级活动页

整体感觉希望是：清爽、字大、适合课堂展示。
请把文件拆清楚，方便我继续改。

提示词 2：把互动做完整

我是一名中学生，我已经有了第一版页面，现在想把互动和课堂节奏补完整。
请帮我继续完善 我的第一张互动名片，重点把下面这些效果补上：
- 标题和一句自我介绍
- 至少 3 个兴趣标签
- 一个会变化的小按钮
- 适合投屏展示的配色

这节内容的素材还是这些：
兴趣清单示例：
我喜欢的内容：
1. 篮球和校队训练
2. 古诗词里的画面感
3. 英语配音和校园广播
4. 用小游戏记住知识点
5. 和朋友一起做班级活动页

我更在意的是：学生一眼能看懂、按钮明显、操作顺序清楚。

提示词 3：上课或展示前再打磨

我是一名中学生，我准备把 我的第一张互动名片 用在展示或课堂讲解里。
请帮我再检查一遍这个网页，重点把文字、颜色、按钮大小、页面顺序和提示语调顺一点。

课件里一定不能漏掉这些内容：
- 标题和一句自我介绍
- 至少 3 个兴趣标签
- 一个会变化的小按钮
- 适合投屏展示的配色

参考内容：
兴趣清单示例：
我喜欢的内容：
1. 篮球和校队训练
2. 古诗词里的画面感
3. 英语配音和校园广播
4. 用小游戏记住知识点
5. 和朋友一起做班级活动页

我希望最后拿到的是一版看起来完整、讲起来顺手的成品。

本课产出

• 完成 我的第一张互动名片 的课堂成品
• 完成 我的第一张互动名片 的第一版并能现场演示

课后任务

• 整理 5 条想做成网页的小点子
• 选 1 个点子写成完整一句话
• 把今天的作品截图发到班级群或作业区

讲师提醒

• 先保住本课最小成品，再决定要不要继续加效果。
• 遇到错误时先描述现象，不要急着乱改。
• 提醒学员边做边记录自己改了什么。

下一课衔接

下一节进入 第 2 课 把兴趣说成作品需求，把这节课的成果继续推进成更完整的作品或流程。