Appearance
项目三：做一个简单网页（挑战级）
📌 学习目标：学会用自然语言让 Codex 生成并修改网页
⏱️ 预计时长：40 分钟
🎯 学到的能力：自然语言编程、迭代优化、测试验证
一、任务描述
用自然语言让 Codex 生成一个个人简介网页。
二、操作步骤
步骤 1：描述需求
打开 Codex，输入：
帮我做一个个人简介网页，要求：
- 包含头像区域（用一个占位符）
- 显示姓名和一句话简介
- 技能列表（用标签形式展示 3-5 个技能）
- 联系方式区域（邮箱和社交媒体链接）
- 整体风格简洁现代，使用蓝色作为主色调
- 代码保存为 index.html步骤 2：查看生成结果
Codex 会生成完整的 HTML 代码。将代码保存为 index.html，双击在浏览器中打开查看效果。
步骤 3：根据效果提出修改要求
观察页面后，你可能会有以下想法：
1. "把头像从圆形改成圆角方形"
2. "在技能列表下面加一个项目展示区域"
3. "把配色方案改成深色模式"
4. "增加一个关于我的段落，大概 200 字"
5. "让页面在手机上也好看（响应式设计）"步骤 4：迭代优化
每提出一次修改要求，Codex 都会更新代码。重复这个过程直到满意为止。
三、进阶挑战
添加交互功能
在页面上加一个按钮，点击后切换深色/浅色主题添加动画效果
给页面添加一些简单的动画效果，比如元素淡入、悬停效果等部署上线
帮我生成一个可以直接部署到 GitHub Pages 的项目结构四、本节实操任务清单
请按顺序完成以下任务：
- [ ] 让 Codex 生成个人简介网页的初版
- [ ] 在浏览器中预览效果
- [ ] 至少进行 3 轮修改优化
- [ ] 将最终版本保存到本地
五、本节小结
| 学到的能力 | 具体说明 |
|---|---|
| 自然语言编程 | 用中文描述网页需求 |
| 迭代优化 | 通过多次追问不断完善 |
| 测试验证 | 在浏览器中查看效果 |
| 问题解决 | 发现不足时告诉 Codex 如何改进 |