| 周次 | 学习主题 | 博客部件与必做任务 | 提交物（可见事实） | 课堂检查点（S4） | 进阶/挑战 | 教师博客对接 |
|---|---|---|---|---|---|---|
| W1 | 计算机素养 + HTML 语义入门 | - \[ ] 建立 /coursepack 学生项目结构<br>- \[ ] 创建 index.html（header/nav/main/section/footer，h1‑h6、p、ul/ol）<br>- \[ ] 做“关于我（About）”名片页 v1（仅结构）<br>- \[ ] 统一文件命名与路径（小写、无空格、相对路径） |
1) 文件树与 index.html 截图<br>2) About 页面 HTML 源码<br>3) README.md（本周笔记） |
Show：最小 HTML 演示<br>Shadow：跟打<br>Ship：提交 About v1<br>Share：2人互评语义正确性 | 使用 abbr/blockquote/time 并写出语义理由 |
发《W1 目标与作品墙》，上墙 2–3 份示例 |
| W2 | CSS 基础与盒模型 | - \[ ] 新建 styles/base.css 并引入 About v1<br>- \[ ] 作者卡片样式（头像/姓名/简介），练习 margin/padding/border<br>- \[ ] 主题色与字体变量（:root 自定义属性） |
1) DevTools 盒模型截图<br>2) CSS 注释与命名规范<br>3) 加样式后的 About | 快测：选择器/层叠<br>共性错误投屏讲解<br>结对检查变量是否生效 | 支持浅/深色模式（prefers-color-scheme） |
发《W2 盒模型小抄》与“学生卡片拼图墙” |
| W3 | Flex 布局基础 | - \[ ] 完成全站主导航栏<br>- \[ ] 三栏布局模板（左目录/中内容/右侧栏）<br>- \[ ] 320/768/1200 三断点适配（仅 flex） | 1) 三断点截图<br>2) 导航栏 Tab 可访问测试 | 卡片重排小赛<br>互评：是否仅用 flex 完成 | 使用 gap/flex-basis 优化 |
发《W3 导航与三栏布局模板》 |
| W4 | Grid + 响应式基础 | - \[ ] 博客首页布局：文章卡片栅格<br>- \[ ] 纸上网格草图 → 代码，命名区域<br>- \[ ] 移动优先断点适配 | 1) 网格草图照片<br>2) 断点截图<br>3) 首页 layout 源码 | 小组展示区域命名<br>互评布局清晰度 | Grid 外框 + Flex 内部组合 | 发《W4 首页布局范例》 |
| W5 | 表单 + a11y 基础 + 最小 XSS 直觉 | - \[ ] “联系我/报名/投稿表单”页（label/for、必填、aria-describedby）<br>- \[ ] 键盘顺序/焦点可见/对比度达标<br>- \[ ] HTML5 原生校验与错误提示；输出转义演示（最小 XSS 直觉） |
1) 可访问表单页<br>2) 30 秒演示视频/GIF<br>3) a11y 自查清单 | 同伴走查 4 项：alt/对比度/焦点/错误提示 | CSS 自定义可见 :focus；支持 prefers-reduced-motion |
发《W5 a11y 清单与 XSS 直觉》 |
| W6（M1） | 整合静态站点 v1（中期检查点） | - \[ ] 整合：主页（Grid）/关于页/表单页/≥1 栏目页<br>- \[ ] 完成主导航、页脚、卡片组件复用<br>- \[ ] 撰写 README（信息架构/断点策略/已知问题） | 1) v1 打包（dist/ 或 zip）<br>2) README<br>3) 三断点与表单可用性演示 |
M1 走查：功能完整性 + a11y 基线；评委表/小奖项 | 首页加入“精选文章”锚点；简易滚动动画（尊重减少动效偏好） | 发《M1 展示与点评》；更新“作品墙” |
| W7 | JavaScript 基础与微交互（事件/选择器/数据） | - \[ ] 组件1：返回顶部（显示/隐藏、平滑滚动、键盘可触达）<br>- \[ ] 组件2：点赞计数（localStorage 持久化） |
1) 两组件代码与演示<br>2) 可访问性说明 | 快测：事件委托/选择器<br>互评：键盘与 aria 是否到位 |
组件初始化/销毁，避免全局污染 | 发《W7 微交互组件清单》 |
| W8 | DOM 操作与模块化 | - \[ ] 文章页模板：标题/作者/时间/正文/引用/图片说明<br>- \[ ] TOC 目录组件：展开/收起、当前章节高亮（可键盘操作）<br>- \[ ] 评论卡片 UI（静态假数据） | 1) 文章页模板<br>2) TOC 交互演示<br>3) 模块组织与注释 | 结对审查语义与 a11y（h1–h3 层级、aria-controls） |
图片懒加载占位（骨架屏） | 发《W8 文章模板与 TOC 示例》 |
| W9 | 异步基础：从本地 JSON 构建列表（三态） | - \[ ] /assets/posts.json（标题/日期/摘要/分类）<br>- \[ ] 列表模块：加载中/成功/失败三态；友好降级文案<br>- \[ ] 断网模拟与异常处理（try/catch + 超时提示） |
1) 列表演示<br>2) 失败态截图<br>3) 错误处理代码 | 互评：三态是否明确；失败态是否友好 | 分类筛选 tabs（尽量少用库） | 发《W9 列表与三态设计》 |
| W10 | 异步进阶：筛选/搜索/分页 + 安全意识 | - \[ ] 列表页本地搜索（title/摘要匹配）与分页<br>- \[ ] 输入防注入（innerText/安全模板渲染）<br>- \[ ] 统一空状态与错误提示组件 |
1) 搜索/分页演示<br>2) 安全自查清单<br>3) 空状态组件 | 快测：节流/防抖<br>互评：是否误用 innerHTML |
URL 查询参数驱动筛选（含降级） | 发《W10 搜索/分页可用性清单》 |
| W11 | 性能与发布（演示为主） + a11y 回归 | - \[ ] 图片压缩与懒加载；脚本 defer；CSS 压缩<br>- \[ ] Lighthouse 报告（离线可用本地清单替代）<br>- \[ ] 打包 dist/；可选演示 GitHub Pages |
1) Lighthouse 分数或性能清单<br>2) 压缩前后体积对比<br>3) dist 包 |
互评：首屏渲染、a11y 回归<br>教师抽测 DevTools | Critical CSS；图片 WebP | 发《W11 性能清单与发布 SOP》 |
| W12（期末） | 期末项目答辩（发链接即答辩） | - \[ ] 满足：主页 + ≥2 子页 + 表单 + ≥2 交互 + 响应式 + a11y 基础<br>- \[ ] 演示脚本（5′+2′+1′）与 README 复盘<br>- \[ ] 作品链接提交到“作品墙” | 1) 最终链接/离线包<br>2) 演示脚本<br>3) README 复盘 | Rubric 打分：功能/UX‑a11y/代码规范/演示与文档 | 可选主题深挖：社团招新/城市名片/课程作业集 | 发《期末 Showcase 与荣誉榜》 |
你的课程包与离线工具链（VS Code Portable、Zeal 离线文档、本地服务器）在清单里也已对应好。