前端应用里程碑

checkpoint-frontend-apps 标志前端基础阶段的收尾：你能用 HTML/CSS/JavaScript（或 react-essentials）交付 结构、样式、交互、Fetch、npm、Git 齐备的完整页面应用。路线图允许暂时跳过 React，但现代岗位大多要求至少一门框架——建议 vanilla 里程碑通过后，并行启动 react-essentials 与 fullstack-roadmap 框架节点。

学习目标

• 对照 /roadmaps/full-stack checkpoint-frontend-apps，交付一个可部署的多页或 SPA 前端（含 GitHub 仓库与 README）
• 使用 Fetch / async-await 调用公开 API，处理 loading 与错误 UI
• 说清本里程碑与 fsm-interactivity、后续 spring-boot-essentials API 的衔接顺序

Checkpoint 能力矩阵

技能	验收方式
HTML 语义结构	导航、main、表单 label
CSS 布局	Flex/Grid，基本响应式
DOM 与事件	动态列表、class 切换
Fetch + JSON	异步数据渲染
npm 依赖	打包或 CDN 二选一，文档写清
Git / GitHub	多次有意义 commit

推荐项目方向

1. 天气 / 汇率看板：单页，输入城市或货币代码，卡片展示 API 结果
2. GitHub 用户卡片：输入 username，展示 avatar、bio、repos 数（与 fsm-interactivity 重叠，可合并为一个更大项目）
3. React 版 Todo：若已学 react-essentials，用组件化重做 CRUD 界面，数据可先 localStorage，后续接 Spring Boot

目录建议：

frontend-milestone/
├── index.html
├── css/
├── js/ 或 src/（Vite + React）
├── package.json
└── README.md（含截图）

与后端的分工

本阶段 不要求 自建 API；公开 API 足够练习异步与错误处理。进入后端章节后，同一前端改 fetch('http://localhost:8080/api/...') 即可对接 spring-boot-essentials。

部署预览可用 GitHub Pages、Vercel 或 docker-essentials + nginx 静态镜像；CI 构建见 github-actions-essentials。

质量门槛

• 移动端宽度下布局不崩（375px smoke test）
• 网络失败时有用户可见提示，非空白屏
• README 含 如何本地打开 与 线上 demo 链接（若有）
• 仓库命名小写连字符，与 fsm-collab 协作规范一致

练习

• 完成一个完整前端应用并 push 到 GitHub，README 含项目截图
• 至少一处 Fetch 调用，含 loading 与 error 状态
• 在 /roadmaps/full-stack 勾选 checkpoint-frontend-apps

小结

前端应用里程碑 = 静态技能 + 异步数据 + 工程化仓库。 完成后路线图转向后端；前端深化继续 react-essentials 与 fullstack-roadmap。下一课 交互里程碑 专注 DOM、事件与 localStorage。