Web 前端实战：学习进度网站

项目目标#

用原生 HTML、CSS、JavaScript 做一个真正可用的学习进度网站。这个项目不追求功能多，而是练习正确结构、响应式布局、交互状态、数据保存和无障碍。

功能清单#

第一版：静态页面#

• 首页显示学习路线和阶段卡片；
• 文章页显示面包屑、标题、重点提示、代码和上下节；
• 语义 HTML 与正确标题层级；
• 手机、平板、桌面响应式。

第二版：交互#

• 搜索课程标题和正文关键词；
• 按前端、后端、小程序筛选；
• 课程可标记完成；
• 总进度与分类进度自动计算；
• 刷新后进度保留；
• “继续学习”指向最近访问且未完成的课程。

第三版：质量#

• 搜索无结果有建议；
• 所有按钮可用键盘操作；
• 焦点状态可见；
• 尊重减少动画设置；
• 外部链接有标识；
• 打印文章时隐藏导航；
• 404 页面能返回首页。

数据结构示例#

const lesson = {
  id: "web-html",
  title: "HTML：给网页内容正确的结构",
  track: "Web 前端",
  minutes: 25,
  href: "/articles/web/html.html"
};

完成状态只保存课程 ID：

const completedIds = ["web-html", "web-css"];
localStorage.setItem("learning-progress", JSON.stringify(completedIds));

验收场景#

1. 第一次打开时进度为 0；
2. 完成一课后首页与文章页进度同步；
3. 刷新页面完成状态仍存在；
4. 取消完成后进度正确减少；
5. 搜索“事务”能找到数据库和后端文章；
6. 搜索不存在的词时显示空状态；
7. 375px 宽度没有页面级横向滚动；
8. 使用 Tab 和 Enter 可以打开课程、搜索和标记完成；
9. JavaScript 不可用时，静态文章和链接仍可阅读；
10. 清除进度前需要用户确认。

项目复盘#

完成后回答：

• 数据如何从 Markdown 变成 HTML？
• 搜索索引包含哪些字段？
• 为什么进度只保存在浏览器，不适合跨设备？
• 哪些功能依赖 JavaScript，失效时怎样降级？
• 如果接入账号系统，完成状态应该存在哪里？

完成标准#

• 三个版本功能全部实现。
• 通过 10 个验收场景。
• README 能让别人打开和使用。
• 记录三个真实问题与解决过程。
• 能独立讲解页面结构、状态和数据流。