项目：个人主页——让别人一页认识你

这是项目库的第一个项目，难度最低、见效最快：一张页面说清你是谁。做完你会拥有一张可以随时打开、随时发别人的个人主页——不需要注册任何账号，不联网也能看。

成品长什么样

页面结构从上到下：头像和名字 → 一句自我介绍 → 「我在做的事」标签墙 → 联系方式链接。参考成品在 examples/personal-homepage/reference.html，双击就能打开对照。

第一步：复制这份需求说明

把下面整段发给 AI（改掉【】里的内容）：

帮我做一个个人主页，给想认识我的朋友和同事看。
页面从上到下包含：
1. 我的头像（先用 emoji 代替）和名字【换成你的名字】；
2. 一句话自我介绍【你是谁、在做什么】；
3. 一个「我在做的事」板块，用标签样式列出至少 4 件事【换你的技能或爱好】；
4. 一个「联系方式」板块，至少 2 个链接【邮箱、社交账号主页等】。
整体风格：暖色背景、字号大、留白多，手机上也好读。
怎么算做好：双击打开文件，所有板块都能看到，每个链接都能点。

操作步骤

1. 建项目文件夹：在项目文件夹里新建 personal-homepage，和第一课的做法一样（不记得就回看第一课的准备部分）。
2. 发需求：把上面改好的整段发给 AI。
3. 预览：让 AI 告诉你生成的 HTML 文件完整路径，双击打开；改一次看一次。
4. 换成你的内容：对照参考成品逐块检查——头像、名字、介绍、标签、链接，全部换成你的。改内容不需要懂代码，直接告诉 AI「把名字换成 XXX，标签改成 XXX」。
5. 做一次你自己的小修改：比如换头像 emoji、调背景色。改完刷新页面确认生效。

成功检查

• 双击 HTML 文件能打开，五个板块（头像名字 / 介绍 / 标签 / 链接 / 页脚）都看得到
• 所有内容是你本人的，没有 AI 的占位文字
• 把窗口拖窄到手机宽度，页面不会横向溢出
• 链接能点（邮箱会弹出邮件应用属正常）

常见卡点

• AI 生成的名字是英文占位：需求里没说「全部用中文」——发模板二补一句。
• 想换头像但没有图片：先用 emoji（🐢 🐱 ☀️ 都行），以后有照片再让 AI 换成 <img>。
• 链接点了没反应：mailto: 和 https:// 开头才能点，检查链接开头；说不清就把文件发给 AI 用模板五问。

下一步

• 想在这个项目上继续动手？做改一版：加一块作品区。
• 想展示你的作品而不只是介绍？做作品集。
• 页面做完发给朋友看：回看上线准备：把作品发给别人看。