| Sprint 1 |
8/9 – 8/19 |
HTML(结构与语义化) |
- 首页骨架<br>- 文章页骨架<br>- 资源页骨架 |
- 拆解博客首页、文章页、资源页 HTML 骨架<br>- 使用语义化标签重构页面结构(header/nav/main/footer/article/section/aside)<br>- 输出无样式版页面(3 页) |
1h 拆解与分析 → 1h 编写 HTML 骨架 → 1h 写讲义与 Demo |
- HTML 骨架通过 W3C 校验<br>- 符合课程标准语义化要求<br>- 无样式下可读 |
| Sprint 2 |
8/20 – 8/30 |
CSS(表现与布局) |
- 导航栏样式<br>- 首页卡片布局<br>- 文章页排版 |
- 为 Sprint1 HTML 添加 CSS 样式(颜色、排版、布局)<br>- 使用 Flex/Grid + 媒体查询实现响应式<br>- 阅读模式与可访问性优化 |
1h 样式设计与编码 → 1h 响应式与调试 → 1h 讲义与 Demo |
- 三断点(320/768/1200px)无横向滚动<br>- a11y ≥ 85%(Lighthouse)<br>- 样式代码规范 |
| Sprint 3 |
9/5 – 9/15 |
JavaScript(交互与行为) |
- 返回顶部按钮<br>- 折叠菜单<br>- 资源搜索<br>- 表单验证 |
- 添加返回顶部、折叠菜单、资源搜索过滤<br>- 表单验证(必填、格式校验、错误提示无障碍)<br>- 渐进增强:无 JS 仍可用 |
1h 功能开发 → 1h 调试与无障碍优化 → 1h 写讲义与 Demo |
- 交互功能在桌面/移动端可用<br>- JS 不破坏 HTML/CSS<br>- 键盘可用性与 aria 标签检查通过 |
| Sprint 4 |
9/15 – 9/25 |
整合与优化(HTML+CSS+JS) |
- 完整博客页面(首页、文章页、资源页)<br>- 性能与安全优化模块 |
- 三语言成果整合到完整博客<br>- Lighthouse 性能与可访问性优化<br>- 安全检查:XSS 防护、Cookie 安全属性 |
1h 代码整合 → 1h 性能与安全优化 → 1h 演示彩排与检查清单 |
- Lighthouse 性能/可访问性 ≥ 85<br>- 离线可运行<br>- 目录结构清晰,README 完整 |
| 整合周 |
9/25 – 9/30 |
汇总与交付 |
- HTML 模块包<br>- CSS 模块包<br>- JS 模块包<br>- AI Prompt 库 |
- 整理 /html /css /js 三模块代码与讲义<br>- 统一 Demo 视频与课件风格<br>- 核查 AI Prompt 案例库(≥24 条) |
— |
- 完整交付代码、讲义、视频、Prompt<br>- 可用于课堂教学与评测 |