项目库
六个跟做的完整项目:每个都从一句可以直接抄的需求说明开始,做完就是你的作品。全部本地可复现,不需要后端。
项目库是教程的另一半:学习路径教你方法,项目库让你用它做出六个真正属于你的东西。每个项目都按同一个节奏组织:
一句可以直接抄的需求说明 → 分步操作 → 成功检查 → 常见卡点 → 下一步
所有项目都是纯静态页面(不需要数据库和后端),成品参考文件在本仓库 examples/ 目录里,每个都配了自动化验证脚本——你做完后可以对照参考成品逐项核对。
六个项目,由易到难
| # | 项目 | 你将拥有 | 难度 |
|---|---|---|---|
| 1 | 个人主页 | 一张说清「你是谁」的页面,可以发给任何人 | ⭐ |
| 2 | 作品集 | 三张作品卡片 + 关于我,作品替你说话 | ⭐ |
| 3 | 活动邀请页 | 时间地点、当天安排、报名入口一页说清 | ⭐⭐ |
| 4 | 报名表单页 | 输入、校验、提交反馈,表单四件套 | ⭐⭐ |
| 5 | 倒计时页 | 第一次让页面每秒自己动起来 | ⭐⭐ |
| 6 | 简易记账页 | 记一笔存下来算余额,项目库毕业项目 | ⭐⭐⭐ |
开始之前
- 完成过第一课(或对流程很熟);需求写不清楚时翻提示词手册。
- 每个项目独立一个文件夹,做之前备份一次(见术语卡备份)。
- 所有项目遵循同一条诚实底线:没接的功能如实标注,不用假成功糊弄访问者(见反模式:假成功状态)。
做完之后
用上线准备:把作品发给别人看把作品发给朋友收集反馈;对原理产生好奇了,去概念 101。