项目 1|WordPress 个人博客搭建(技术验证阶段)

Phase 周期 每日 3 h 建议 里程碑 & 评估 关键资源 / 方案
P0 需求梳理 8 月 1 日 – 8 月3 日 ① 列出博客信息架构 (1 h)<br>② 学习 WordPress 后台 (1 h)<br>③ 记录疑问 (1 h) 完成 IA ≤ 3 层草图,3 篇参考站点 参考官方文档 & Notion 头脑风暴
P1 主题+环境 8 月 4日 – 8 月7 日 ① 选免费主题并安装 (1 h)<br>② 配置必备插件:SEO、缓存 (1 h)<br>③ 设置分类/标签 (1 h) Lighthouse 可用/视觉 ≥ 80 使用 one-click 安装向导,避免本地 LAMP 折腾
P2 架构+内容 8 月8日 – 8 月12日 ① 补充 About/Contact 页面 (0.5 h)<br>② 每日撰写/排版一篇教学日志 (1 h)<br>③ 调整菜单/内链 (1.5 h) 上线 ≥ 3 篇 500 字原创博文 Markdown → WP Editor,所见即所得
P3 优化+首发 8 月 1 3日 – 8 月14 日 ① 性能 / 可访问性自查 (1 h)<br>② 安装统计 / 隐私弹窗 (1 h)<br>③ 发布“开站公告” (1 h) Phase 3 结束即对外推广 用 Lighthouse + WP Statistics 插件

项目 2|博客组件 → 教学素材库(内容研发阶段)

Sprint 时间 主题 目标组件 任务内容 每日节奏(3h) 验收标准
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>- 可用于课堂教学与评测

项目 3|博客驱动的《Web 前端技术》教学实施(课堂落地阶段)

阶段 周期 每日 3 h 建议 课堂 KPI
P0 账号注册 + 模板部署 Week 1-2 演示一键模板 (1 h)<br>学生注册/克隆 (2 h) ≥ 90 % 学生建站成功
P1-P2 冲刺 1 Week 3-10 ① Live Coding 示范 (1 h)<br>② 学生博客冲刺 (1 h)<br>③ AI 协作任务 1 (1 h) Blog Lighthouse 平均 ≥ 80;AI 提交率 ≥ 90 %
P3-P4 冲刺 2 Week 11-12 模式同上,插入 AI 任务 2 同上
P5 展示 & 评估 Week 13 ① 展示日彩排 (1 h)<br>② 期末展览 (2 h) ≥ 80 % 学生发布 ≥ 5 篇原创日志

每日 3 h“番茄沙拉”法(适合 Web 前端小白)

时间块 目的 建议内容
① 学习-吸收 (60 min) 观看官方教程 / 组件 Demo;做 1-2 题交互练习
② 实操-落地 (90 min) 将所学立即应用到个人博客或组件代码里
③ 记录-反思 (30 min) 写 Teaching Log / Checklist;调整明日计划

彩蛋:低门槛提效小技巧

  1. 主题即教材:把你切换主题、改配色的屏幕录下来,直接当 Demo。
  2. 插件即案例:安装时截图「设置-效果」,以后讲课比 PPT 更生动。
  3. AI Prompt 速查表:随手把成功的 ChatGPT 问句丢进 Notion,越积越香。