接口已经能返回收藏列表。接下来，用户需要看清标题、打开原文，在手机上找到刚存的那篇资料。网络慢一点，页面要交代正在做什么；保存失败，也得留下用户刚才输入的内容。
这套课从这里开始。我们会做一个叫慢读的个人资料库，沿着实际功能补齐前端能力。第一季的目标是独立交付一个可用的 Web 应用，桌面端和移动端安排在后续扩展中。
目前已完成导读和前三课，可以从第一课开始，也可以先打开配套示例看看做完前三课的页面。
这套课适合谁#
你已经会使用至少一种后端语言，知道请求、响应和数据库记录是什么，也能在终端启动一个服务。Java、Go、Python、C# 都可以，练习暂时不依赖特定后端框架。
前几课只需要浏览器、编辑器和一个本地静态文件服务器。示例提供了 JSON 数据，页面中的内容先手工写入 HTML。等读到异步请求，再让页面真正从接口取数据。
如果你已经做过前端，可以按成果跳读。能解释页面为什么溢出、能自己写带标签的表单，就可以跳过对应基础课；遇到布局或交互问题仍然只能不断试属性，值得回来把实验做一遍。
从后端经验出发#
后端经验能帮上很多忙。拆组件时会用到职责划分，描述请求状态时会用到状态机，接入接口时会关心契约和错误处理。到了浏览器，工作还会增加几个维度。
| 已有经验 | 接下来要补的能力 | 慢读里的实际问题 |
|---|---|---|
| 请求和响应 | 浏览器文档、资源加载与渲染 | JSON 返回了，标题怎样出现在页面里 |
| 数据模型 | 界面状态与状态归属 | 搜索词、编辑草稿、弹窗是否打开分别存在哪里 |
| 并发与超时 | 异步交互与请求竞态 | 连续搜索时，旧结果怎样避免覆盖新结果 |
| 类型与校验 | JavaScript 运行行为、TypeScript 与运行时边界 | 接口字段缺失时，页面怎样处理 |
| 服务监控 | 浏览器调试与用户体验 | 保存成功了，用户为什么还以为自己没点上 |
每一课都要落到一个能操作的结果。读完状态管理，需要说清每份状态由谁拥有；读完 CSS，需要能在开发者工具里找到把页面撑宽的那个元素。
第一季怎样学#
这份安排参考了 roadmap.sh 的前端路线 ↗和 MDN Curriculum ↗。前者用来检查主题覆盖，后者帮助确定基础能力的范围。下面的顺序围绕慢读的开发过程重新编排。
先建立 HTML、CSS 和 JavaScript 的实际经验，再加入 TypeScript 和 React。键盘操作、窄屏布局和错误反馈会跟着功能一起出现。后面遇到路由、缓存或复杂表单时，再引入相应工具。
已经可以开始的三课#
| 章节 | 本课任务 | 做完后的验收 |
|---|---|---|
| 01 · API 写好了，页面还缺什么 | 在浏览器中检查文档、JSON 和样式请求 | 区分响应文本、DOM 和页面外观，知道到哪里查问题 |
| 02 · 从 JSON 到一个能用的页面 | 写出有标题、资料链接和表单的 HTML | 用键盘打开资料，提交表单后能解释地址栏的变化 |
| 03 · 把页面排好，理解浏览器怎样布局 | 给同一份 HTML 加上布局和视觉层级 | 页面在窄屏上正常排列，能排查盒模型和长内容溢出 |
后续章节计划#
以下是课程安排，正文尚未更新。内容会按实际示例的依赖顺序展开。
| 阶段 | 计划章节 | 要交付的功能 |
|---|---|---|
| 页面与交互 | 04 页面细节与响应式练习；05 JavaScript、DOM 和事件 | 完整的资料列表、客户端搜索与阅读状态切换 |
| 异步与类型 | 06 请求、错误和竞态；07 TypeScript 与运行时校验 | 从 API 加载资料，快速切换条件也能显示正确结果 |
| 工具与组件 | 08 模块、包管理和 Vite；09 React 组件与渲染 | 用清晰的组件组织列表、详情和编辑区 |
| 状态与导航 | 10 表单、状态和 Effect；11 路由与 URL | 保留编辑草稿，让筛选结果可以通过链接分享 |
| 真实业务 | 12 服务端缓存与更新；13 登录与权限边界 | 保存后刷新对应数据，处理会话过期和请求失败 |
| 使用体验 | 14 键盘、焦点和反馈；15 关键流程测试 | 完成可访问的编辑流程，并用测试保护它 |
| 交付维护 | 16 性能测量；17 部署与排错；18 渲染方式与选型 | 发布应用，理解何时需要 CSR、SSG 或 SSR |
React 阶段拟采用 TypeScript + React + Vite。Vite 用来搭建学习项目，路由和数据请求会逐项加入。React 官方介绍了从构建工具开始创建应用的方式 ↗，也说明了随着需求增加，需要处理的路由、数据加载和渲染问题。这些取舍会放到具体章节里讲。
配套示例怎样使用#
在线示例目录提供两个可以直接比较的版本。
两份页面都是静态示例。资料列表由 HTML 写出，JSON 用来展示数据契约。表单目前只把搜索词提交到地址栏，列表筛选会在后续 JavaScript 章节加入。
要动手修改，先下载示例源码，解压后在包含 02-html、03-css 和 resources.json 的目录里打开终端。如果本地已有 Python 3，执行下面这条命令。
python3 -m http.server 8080 --bind 127.0.0.1然后访问 http://127.0.0.1:8080/。这个服务只用于本地练习。修改 HTML 或 CSS 后刷新页面，就能检查结果。终端按 Ctrl+C 停止服务。没有 Python 时，也可以使用编辑器提供的本地静态预览服务，教程里的路径保持相同。
每一课怎么判断学会了#
文章会先给出成品和前置条件，再说明当前遇到的问题。关键代码放在正文里，完整文件放在示例中。练习最后有验收动作，也会列出常见故障的检查位置。
跟着代码做完以后，试着改一个条件。把资料标题写长，把窗口缩到手机宽度，或者给请求加入延迟。能解释结果为什么变化，并找到负责这件事的代码，这一课才算有了自己的经验。
也可以让 AI 帮你解释报错、补一个实现，接着自己验收。比如布局溢出时，让它给出判断依据和要观察的计算样式；拿到修改后，回到浏览器确认那个元素的尺寸确实变了。只看生成的代码，很难发现窄屏、键盘和失败流程里的问题。
之后怎样走向全平台#
Web 版本完成后，同一个资料库还会有新的使用场景。桌面上可能需要导入本地文件，手机上可能需要从分享菜单保存一篇文章。到那时再加入平台能力，需求会更具体。
桌面方向计划用 Tauri ↗，沿用 Web 界面，再学习系统能力、权限和安装发布。移动方向计划用 React Native 与 Expo ↗，补上原生组件、触摸交互和设备能力。接口契约与业务逻辑可以复用，界面和平台行为需要分别适配。这部分尚未开始，小程序也暂不列入第一季。
现在先打开第一课。从浏览器里的一个请求开始，把第一屏资料放到用户眼前。