做一个个人主页
●入门约 15 分钟实践·项目
做一个个人主页
前面学了这么多理论，是时候动手了！第一个项目：做一个简单但好看的个人主页。
你会学到什么
完成这个项目后，你会掌握：
- 用自然语言描述页面结构和视觉风格
- 理解 HTML 的基本骨架（标题、段落、图片、链接）
- 学会用 CSS 控制颜色、字体、间距
- 掌握"预览 → 修改 → 再预览"的迭代节奏
- 了解响应式设计的基本概念（手机也能看）
第一步：写出你的需求（5 分钟）
打开 Playground 或你常用的 AI 工具，把下面的 Prompt 贴进去：
帮我做一个个人主页，要求：
- 顶部我的名字"小明"，用大号字体，居中显示
- 名字下方一张圆形头像（先用占位图：https://placehold.co/200x200）
- 中间一段 80 字左右的自我介绍
- 下方三个图标链接：GitHub、邮箱、微博，用 emoji 代替图标
- 整体白色背景，主色调用 #3b82f6（蓝色）
- 手机屏幕也能正常浏览（响应式）
- 所有代码写在一个 HTML 文件里
第二步：理解 AI 给你的代码（5 分钟）
AI 会生成一大段代码。不用慌张，你不需要读懂每一行。但你应该认识这几个部分：
<!DOCTYPE html> ← 告诉浏览器"这是网页"
<html> ← 网页的起点
<head> ← 网页的设置信息（标题、编码等）
<style> ← CSS 样式，控制颜色、大小、布局
<body> ← 网页的可见内容
<h1> ← 大标题
<p> ← 段落文字
<img> ← 图片
<a href="..."> ← 超链接
以后跟 AI 沟通时，能用这些词描述位置会让沟通更高效。比如："帮我把 <style> 里的主色调改成绿色"比"帮我把颜色改绿"精准得多。
第三步：预览你的网页（2 分钟）
- 复制 AI 生成的全部代码
- 打开记事本（Windows：Win+R → 输入 notepad）
- 粘贴代码 → 文件 → 另存为 → 文件名写
mypage.html→ 保存类型选"所有文件" - 双击
mypage.html，浏览器自动打开
看到你创造的网页了吗？这就是你写的第一个网页。
第四步：迭代修改（10 分钟）
现在你是一个"导演"，AI 是执行你命令的"演员"。看看哪里不满意，逐条告诉 AI：
试试这些修改：
- "背景太白了，换成浅灰色 #f5f5f5"
- "字体太小了，正文改成 18px"
- "在我名字下面加一句座右铭，用斜体灰色小字"
- "头像改成圆角方形（border-radius: 20px）"
- "三个链接之间的间距加大一点"
重要：每次只提一个修改要求。改完 → 看效果 → 满意了 → 再改下一条。
第五步：个性化（5 分钟）
把占位内容换成你自己的：
- 换上你的真实名字
- 写一段真正的自我介绍（不需要完美，先写着）
- 换成你自己的联系方式
- 如果不想用真实头像，可以用你喜欢的一张图片
你刚刚做到的事情
回顾一下，你刚刚完成了：
- 用自然语言（不是代码）描述了一个完整的网页
- AI 帮你把描述变成了可运行的 HTML 文件
- 你用浏览器打开了这个网页
- 通过多轮对话逐步改进了它
- 把占位内容替换成了你自己的信息
这就是 Vibe Coding 的完整流程：想 → 说 → 看 → 改 → 重复 → 得到作品。
进阶挑战
如果你想让这个主页更出彩：
- 加上一个"我的技能"区块，用进度条展示你会的东西
- 背景加上渐变色
- 加一个简单的动画（比如名字淡入）
- 加一个"联系我"的按钮，点击后弹出邮箱地址
每个挑战都只需要一句话告诉 AI 就能实现。试试看！
每个元素都是一个盒子
理解 CSS 盒模型，布局不再难
CSS 盒模型
每个 HTML 元素都是一个"盒子"
对应的 CSS 代码
margin: 20px;
border: 2px solid #333;
padding: 16px;
width: 200px;动手练习
修改代码，完成练习目标
美化个人主页
给个人主页添加渐变背景和圆角卡片
目标：添加渐变背景、卡片圆角和阴影、头像样式，以及技能列表
动手实践
描述你想要的效果，AI 帮你生成代码
Prompt Playground动手试试
提示：描述越具体，生成效果越好