AI编程启蒙课

主题

第 7 课 / 共 12 课

第7课：展示你的作品集 ​

🎉 最后一课啦！今天我们要把你的所有作品整理成一个超酷的作品集，然后...毕业！

⏱️ 预计用时：60 分钟

学习目标 ​

学完这节课，你将会：

  • 把所有项目整理成一个个人作品集网页
  • 了解怎么把作品分享到网上让别人看到
  • 回顾整个课程学到的所有技能
  • 获得继续学习和创造的方向

概念时间：完整的项目生命周期 ​

到目前为止，你已经做了好几个项目。但你有没有想过，一个项目从"想到"到"让别人用"，完整的过程是什么样的？

项目的四个阶段 ​

💡 想法（Idea）
   "我想做一个番茄钟帮我学习"
        ↓
🔨 构建（Build）
   用 Claude Code 一步步把想法变成代码
        ↓
✨ 打磨（Polish）
   美化界面、修bug、加功能
        ↓
🌍 分享（Share）
   让别人也能看到和使用你的作品

前面的课程里，我们已经做了前三个阶段。今天我们来完成最后一步——分享！

小贴士

很多人做完一个东西就扔在那里了，从来不分享。但分享其实是最有价值的一步！因为：

  1. 别人的反馈能帮你发现还能改进的地方
  2. 分享会给你巨大的成就感和继续做下去的动力
  3. 作品集是你能力的最好证明——比任何证书都管用

动手时间：做一个作品集网页！ ​

什么是作品集？ ​

作品集（Portfolio）就是一个网页，上面展示你做过的所有项目，每个项目有截图、简介和链接。就像画家的画册、摄影师的相册一样。

第一步：创建基础作品集页面 ​

魔法咒语

帮我创建一个个人作品集网页，用一个HTML文件实现：

关于我：
- 名字可以用昵称或网名
- 简介：一个13岁的编程学习者，正在学习用AI工具创造有趣的东西
- 可以加一个卡通头像区域（用CSS画一个简单的卡通头像，或者用emoji）

展示以下项目（每个项目一张卡片）：

1. 个人主页
   - 描述：我的第一个网页作品，一个关于自己的个人介绍页面
   - 标签：HTML, CSS, 第一个项目

2. 互动故事
   - 描述：一个有多个选择分支的互动故事网页
   - 标签：JavaScript, 互动, 创意写作

3. 番茄钟学习计时器
   - 描述：帮助专注学习的番茄钟工具，支持学习/休息切换、声音提醒
   - 标签：JavaScript, 工具, 计时器

4. 记忆翻牌游戏
   - 描述：考验记忆力的翻牌配对游戏，有动画效果和计分系统
   - 标签：JavaScript, 游戏, 动画

5. 创意故事生成器
   - 描述：能够自动生成不同类型创意故事的智能应用
   - 标签：JavaScript, AI概念, 随机生成

页面要求：
1. 现代简约的设计风格
2. 顶部有一个大的横幅区域，写着名字和一句个人口号
3. 项目用卡片式布局展示，每张卡片有项目名称、描述和标签
4. 卡片鼠标悬停时有浮起效果
5. 每张卡片有一个"查看项目"按钮
6. 页面底部有一个"关于这个作品集"的区域，写着"用 Claude Code 构建"
7. 配色方案要协调好看
8. 要适配手机屏幕

请保存为 portfolio.html

第二步：加上动画和交互效果 ​

魔法咒语

给作品集网页加上炫酷的动画和交互效果：
1. 页面加载时，卡片依次从下方滑入（有先后顺序的入场动画）
2. 顶部横幅区域加上微妙的渐变动画（颜色缓慢流动的效果）
3. 滚动页面时，卡片有视差效果或渐显效果
4. 每个项目卡片的标签用不同颜色的小药丸样式
5. 加一个暗色模式/亮色模式的切换按钮（在右上角）
6. 页面整体有平滑滚动效果
7. 加一个回到顶部的按钮（滚动一定距离后出现）

第三步：加上项目截图区域和详情 ​

魔法咒语

改进作品集的项目展示方式：
1. 每个项目卡片加上一个截图预览区域：
   - 用CSS创建模拟截图（用渐变色和简单图形模拟每个项目的界面效果）
   - 番茄钟：画一个圆形计时器的简化图
   - 翻牌游戏：画几个小方块代表卡片
   - 故事生成器：画一个打开的书本形状
2. 点击卡片弹出一个详情模态框，包含：
   - 项目的详细介绍
   - 用到了什么技术
   - 做这个项目学到了什么
   - "打开项目"按钮
3. 模态框有优雅的弹出和关闭动画

第四步：加上技能展示和学习历程 ​

魔法咒语

在作品集中加入"我的技能"和"学习历程"板块：

"我的技能"部分：
1. 用进度条或图表展示掌握的技能：
   - HTML/CSS：入门
   - JavaScript：入门
   - AI工具使用：熟练
   - 调试能力：入门
   - 创意设计：持续学习中
2. 进度条有填充动画

"学习历程"部分：
1. 用时间线的方式展示7节课的学习过程
2. 每个节点写上课程名称和一句话总结
3. 时间线有滚动触发的动画效果

把这两个板块放在项目卡片下方

了解一下：怎么让别人看到你的网页？ ​

到目前为止，你做的网页都只在你自己的电脑上。如果想让朋友、家人也能看到，就需要把网页"发布"到互联网上。

GitHub Pages：免费的网页托管 ​

GitHub 是全世界程序员存放代码的地方（就像程序员的网盘），而 GitHub Pages 是它提供的一个免费服务——你可以把网页文件放上去，它就帮你发布到互联网上，任何人都能通过一个网址访问到你的网页。

基本的步骤是：

  1. 注册一个 GitHub 账号
  2. 创建一个仓库（Repository），存放你的项目文件
  3. 开启 GitHub Pages 功能
  4. 你会得到一个类似 https://你的用户名.github.io 的网址

注意

GitHub 注册和使用需要一些额外的学习。如果你觉得现在还不需要发布到网上，完全没关系！你的作品集在本地也一样精彩。等你准备好了再说。如果感兴趣，可以和爸爸妈妈一起研究一下。

想了解更多？

其他发布网页的方式

除了 GitHub Pages，还有一些其他免费发布网页的方式：

  • Netlify：把文件拖拽上去就能发布，非常简单
  • Vercel：和GitHub连接，代码更新后自动发布
  • Codepen：在线写代码并展示，特别适合小项目

这些都是以后可以慢慢探索的。现在最重要的是你已经能做出这些东西了——发布只是时间问题！

大回顾：这7节课你学到了什么？ ​

让我们回顾一下这段旅程吧！

第1课：认识你的AI编程搭档 ​

  • 认识了 Claude Code，学会了用自然语言和它"对话"来写程序
  • 学到了：AI是你的助手，你才是创造者

第2课：做一个你的个人主页 ​

  • 做了第一个网页！学会了 HTML 和 CSS 的基础概念
  • 学到了：网页 = 骨架（HTML）+ 皮肤（CSS）+ 大脑（JavaScript）

第3课：让网页活起来 ​

  • 给网页加上了交互功能，做了互动故事
  • 学到了：事件驱动——程序等待你的操作，然后做出反应

第4课：做一个实用小工具 ​

  • 做了番茄钟，学会了变量和状态
  • 学到了：渐进式开发——先做最简版本，再一步步改进

第5课：做一个创意小游戏 ​

  • 做了记忆翻牌游戏，学会了调试思维
  • 学到了：遇到bug不慌张，像侦探一样分析问题

第6课：给作品加上AI超能力 ​

  • 做了故事生成器，了解了API和AI原理
  • 学到了：AI = 数据 + 模式 + 随机性，不是魔法

第7课：展示你的作品集（就是今天！） ​

  • 做了作品集网页，了解了项目发布
  • 学到了：完整的项目生命周期：想法 → 构建 → 打磨 → 分享

小贴士

把这些技能写在你的作品集里吧！它们不只是编程技能，也是解决问题的思维方式。"渐进式开发"和"调试思维"在生活中的很多地方都用得上。

你真正掌握的核心能力 ​

除了具体的技术，你还学到了更重要的东西——和AI协作的能力：

  1. 把想法变成清晰的描述 —— 你能用自然语言清楚地告诉AI你想要什么
  2. 把大问题拆成小步骤 —— 不会被复杂的项目吓到
  3. 发现问题并描述问题 —— 调试思维让你能高效地解决bug
  4. 渐进式思考 —— 先做MVP，再迭代改进
  5. 保持好奇心和创造力 —— 技术是工具，你的创意才是灵魂

这些能力在未来的AI时代特别有价值。因为AI越来越强大，但它永远需要一个有想法、会表达、能思考的人来指导它。

毕业典礼 ​

你做到了。

认真地说——你真的很了不起。

7节课之前，你可能连"HTML"是什么都不知道。现在呢？你做了个人主页、互动故事、番茄钟计时器、翻牌游戏、故事生成器、还有一个漂亮的作品集。

这些不是别人做好让你看的，是你自己一步一步做出来的。

每次遇到不懂的概念，你没有放弃；每次遇到bug，你学会了冷静分析；每次做出一个新东西，你体验到了创造的快乐。

编程不是天才才能做的事情，它是任何人都能学会的超能力。而你已经迈出了最重要的第一步。

你现在拥有了一项全世界最有用的技能之一：能够用AI工具把脑子里的想法变成真实可用的东西。 不管你以后想做什么——设计师、科学家、作家、企业家、或者任何你还没想到的职业——这个技能都会帮到你。

给你的一封信

亲爱的同学：

恭喜你完成了这门课程！这不是结束，而是一个新的开始。你已经知道了怎么和AI搭档一起创造东西，剩下的只需要两样东西：好奇心和练习。

看到生活中任何不方便的地方，想想"我能不能做一个工具来解决？" 看到任何有趣的想法，想想"我能不能把它做出来？"

然后打开 Claude Code，开始做就行了。

加油！未来的创造者。

接下来做什么？新的冒险等着你！ ​

毕业不是结束，是新旅程的开始。这里有一些你可以自己尝试的项目，从简单到复杂排列：

入门级项目 ​

  • 个人日记本：可以写日记、保存、翻看过去的日记
  • 生日倒计时：倒数到某个特别日子的天数，有好看的动画
  • 随机点名器：输入同学们的名字，随机选一个人（上课再也不怕被老师点名了...因为你可以先试试运气）
  • 简易计算器：一个好看的计算器，支持基本运算

进阶级项目 ​

  • 天气穿衣建议：根据温度建议今天穿什么（可以用预设规则）
  • 课程表管理器：输入课程表，到时间自动提醒
  • 画板工具：在网页上画画，可以选颜色和画笔大小
  • 音乐节拍器：可调节速度的节拍器，学乐器必备

挑战级项目 ​

  • 个人博客：可以写文章、分类、搜索的完整博客系统
  • 贪吃蛇游戏：经典的贪吃蛇，有分数排行榜
  • 聊天机器人：用预设回答做一个有趣的聊天机器人
  • 背单词APP：有间隔重复算法的背单词工具（帮你学英语！）

魔法咒语

接下来，不管你想做什么项目，都可以这样开始：

"帮我做一个[项目名称]：
1. [描述它是做什么的]
2. [描述它应该有什么功能]
3. [描述你希望它长什么样]
先做一个最简单的版本，我们再一步步改进。"

记住渐进式开发的魔法——先让它能用，再让它好用，最后让它好看！

继续学习的资源 ​

如果你想更深入地学习编程，这些方向值得探索：

  • 继续用 Claude Code：你已经会用了！遇到任何想做的东西，直接开始
  • 学习 Python：如果你对编程本身感兴趣，Python是最适合初学者的编程语言
  • 学习更多 JavaScript：深入了解你这几课已经在用的语言
  • 探索游戏开发：如果你喜欢做游戏，可以了解 Scratch、Unity 等工具

小测验 ​

来检验一下这节课学到了多少吧！

1. 作品集（Portfolio）的作用是什么？

2. 项目生命周期的四个阶段是什么？

3. GitHub Pages 的作用是什么？

4. 通过这7节课，你学到的最重要的能力是什么？

今日挑战（也是毕业挑战！） ​

终极挑战：完全靠自己（和Claude Code）做一个新项目。

规则很简单：

  1. 想一个你真正想做的东西
  2. 用这7节课学到的方法，和 Claude Code 一起把它做出来
  3. 不看任何教程，全靠你自己描述和迭代

你可以从上面的项目列表里选，也可以自己想一个。关键是——这一次完全靠你自己！

小贴士

如果你真的完成了这个挑战，你就证明了一件事：你不需要任何人手把手教你了。你已经掌握了"学习如何学习"的能力——这比任何具体的技术知识都要宝贵一万倍。

本课小结 ​

  • 你创建了一个漂亮的个人作品集，展示了你所有的项目
  • 你了解了GitHub Pages等发布方式，知道怎么让别人看到你的作品
  • 你回顾了7节课学到的所有技能和思维方式
  • 你知道了接下来可以做什么，有无数的项目等着你

毕业快乐！去创造属于你的精彩吧！

参考示例

想看看完成后的效果？下载示例代码：点击下载

用浏览器打开就能看到效果。记住，这只是参考——你自己的作品可以完全不一样！

留言讨论