module 06 · 综合项目与发布 · 第 39–40 课

模块06
综合项目与发布

目标一句话：把 38 节课学到的东西第一次完整串起来，从想法走到上线。

第 39 课项目实战（一）：选题与三条 MVP 功能 · 页面结构与样式 · 数据层设计

第 40 课项目实战（二）：交互收尾 · 调试与代码整理 · 部署上线 · 3 分钟演示

最后一个模块，综合项目与发布，两节课，第 39 和第 40 课。

这两节课的设计原则是：把前面三十八节课的东西，第一次完整地串起来。学生会第一次经历「从想法到上线」的完整流程。

关于选题，我给四个方向：个人简历网站、读书观影清单、校园活动报名、学习打卡应用。关键是「越具体越好」。如果学生说「我要做一个很酷的网站」，一定要让他再想小一点——一个能做完的小项目，比一个做不完的大项目有价值一百倍。

两节课的分工：第 39 课只管「能看见的东西」和「数据怎么存」，第 40 课管「能动的部分」和「发出去」。这样安排是因为第 40 课要留出时间做演示，如果全堆在最后一天，一定会拖堂。

最后强调那个上线动作：它只花七分钟，但心理价值极高——学生第一次拿到一个链接，可以发给任何人。这门课到这里才算真正闭环。

// module 06

模块六 · 综合项目与发布 · 第 39–40 课

第 39 课 · 项目实战（一）

选题与功能清单（MVP 三条）→ 页面结构与样式搭建 → 数据层设计（数组 + 对象 + localStorage）。

交付：项目静态页面 + 数据层脚本。

第 40 课 · 项目实战（二）与上线

交互收尾 → 调试与代码整理 → 部署上线 → 3 分钟演示与自评 → 课程回顾与进阶路线。

交付：线上可访问链接 + README。

选题建议：个人简历网站 · 读书观影清单 · 校园活动报名 · 学习打卡应用 —— 任选其一，越具体越好。

最后一个模块，综合项目与发布，两节课，第 39 和第 40 课。

这两节课的设计原则是：把前面三十八节课的东西，第一次完整地串起来。学生会第一次经历"从想法到上线"的完整流程。

关于选题，我给四个方向：个人简历网站、读书观影清单、校园活动报名、学习打卡应用。关键是"越具体越好"。如果学生说"我要做一个很酷的网站"，那一定要让他再想小一点——一个能做完的小项目，比一个做不完的大项目有价值一百倍。

两节课的分工：第 39 课只管"能看见的东西"和"数据怎么存"，第 40 课管"能动的部分"和"发出去"。这样安排是因为第 40 课要留出时间做演示，如果全都堆在最后一天，一定会拖堂。

最后强调一下上线这个动作。它只花七分钟，但它的心理价值极高——学生会第一次拿到一个链接，可以发给任何人。这门课到这里才算真正闭环。

// 模块六 · 第 39 课

综合项目实战（一）

课堂流程 · 45 min

5′ 选题 + 功能清单：只写 3 条 MVP 功能
10′ 页面结构草图 + 样式方向（配色与字号系统）
25′ 搭结构、写样式
5′ 数据层设计：数组 + 对象 + 存储方案

验收标准

页面结构与项目主题匹配，至少 4 个区块
复用自己的颜色变量与字号阶梯
响应式：手机与桌面都可用
数据层函数独立，可单独测试

提醒学生：先把三条核心功能做完，再去想「加分项」——做不完的项目等于零。

第 39 课，综合项目第一天。这节课的唯一纪律是：砍需求。

开场五分钟，我要求学生写下功能清单，然后只留三条。为什么？因为学生的通病是"想得太多、做得太少"。"三条 MVP 功能"这个限制，会逼他们想清楚"这个项目最核心的一件事是什么"。

接下来十分钟画结构和样式方向。这里有个很好的教学点：让他们把第 12 课学的颜色变量和字号阶梯直接复制过来用。这就是"复用"——前面积累的东西，今天终于收获。

中间二十五分钟编码。老师巡场时的检查顺序是：先看结构是否语义化，再看响应式有没有做，最后看代码整洁度。不要一上来就挑细节，会打击积极性。

最后五分钟做数据层设计。这一步最重要的是让学生回答一个问题："我的数据长什么样，存在哪儿？"——如果项目需要保存用户输入，那就用 localStorage；如果只是展示，那就用一个常量数组。不要为了用 localStorage 而用 localStorage。

今天的交付标准是"页面好看、数据有地方放"，交互留给下节课。

// 模块六 · 第 40 课

综合项目实战（二）与上线

课堂流程 · 45 min

5′ 交互实现收尾（渲染函数 + 事件委托）
8′ 调试与代码整理：去全局变量、加注释、统一命名
7′ 部署上线：GitHub 仓库 → 开启 Pages → 拿到链接
15′ 每人 3 分钟演示 + 自评 + 互评

结课验收

线上链接可访问，手机端能用
Console 无报错
README 写清项目说明与所用技术
演示时能讲清一个技术决策的原因

进阶路线：ES6+ 深入 → 模块化与打包 → fetch 与后端接口 → Vue / React → 工程化与 CI

第 40 课，最后一天。这节课有两个高潮，一个是"上线"，一个是"演示"。

先花十三分钟把交互收尾、把代码整理一遍。整理这八分钟不要省：去掉多余的全局变量、给函数加上说明性注释、统一命名。这一段的价值在于让学生意识到"能跑"和"写得干净"是两件事。

然后七分钟上线。建仓库、传代码、在设置里开启 Pages、等一分钟拿到网址。当学生第一次在浏览器里打开自己那个网址时——那个瞬间是整门课最有说服力的时刻。所以这一步一定要留足时间，不能让两三个学生卡在上传上。

最后十五分钟演示。每人三分钟，要求讲清三件事：这是给谁用的、它做了什么、你遇到最大的问题是什么。"讲清一个技术决策的原因"是我最看重的一条——比如"为什么我用 Grid 不用 Flex""为什么我把数据存在 localStorage 而不是每次重新算"。能解释选择，才说明真的懂了。

最后留一句话给进阶路线：这门课教的是一套可以迁移的底层能力。框架会换，Flex 和事件委托不会过期。他们接下来可以学 ES6、学打包、学请求接口、最后学 Vue 或 React——但所有这些，都建立在今天这四十节课的基础之上。

// module 06 · summary

结课交付物 · 一个上线的网站

交付物

线上链接（GitHub Pages 或静态托管）
README.md —— 项目说明与所用技术
3 分钟演示：给谁用 · 做了什么 · 最大的问题

验收标准

线上链接可访问，手机端能用
Console 无报错
README 写清项目说明与所用技术
演示时能讲清一个技术决策的原因

「讲清一个技术决策的原因」是最重要的一条 —— 比如为什么用 Grid 不用 Flex、为什么数据存 localStorage 而不是每次重算。能解释选择，才说明真的懂了。

结课交付物是一个能上线访问的网站。

验收里我最看重最后一条：演示时能讲清一个技术决策的原因。比如「为什么我用 Grid 不用 Flex」「为什么数据存在 localStorage 而不是每次重新算」。能解释选择，才说明真的懂了。

整个流程里，「上线」这一步一定要留足时间，不能让两三个学生卡在上传上。当学生第一次在浏览器里打开自己那个网址时，那个瞬间是整门课最有说服力的时刻。

最后留一句话给进阶路线：这门课教的是一套可以迁移的底层能力。框架会换，Flex 和事件委托不会过期。他们接下来可以学 ES6、学打包、学请求接口、最后学 Vue 或 React——但所有这些，都建立在今天这四十节课的基础之上。

模块06综合项目与发布

模块六 · 综合项目与发布 · 第 39–40 课

第 39 课 · 项目实战（一）

第 40 课 · 项目实战（二）与上线

综合项目实战（一）

课堂流程 · 45 min

验收标准

综合项目实战（二）与上线

课堂流程 · 45 min

结课验收

结课交付物 · 一个上线的网站

交付物

验收标准

模块06
综合项目与发布