# 📚 课程总览 — 从零到 AI 全栈应用

**最终目标：** AI 金句工坊（输入主题 → AI 生成金句 → 精美展示）
**适用：** 有基础 HTML/CSS + 一点 Python 基础的学生
**总课时：** 5 节课 × 2 小时

> 💡 原第1课拆成了第1a课（HTML+CSS）和第1b课（JS交互），
> 让 CSS 基础薄弱的学生也能跟上。

## 🗺️ 课程地图

```
第1a课 ─→ 第1b课 ─→ 第2课 ─→ 第3课 ─→ 第4课
   │          │          │          │          │
   ▼          ▼          ▼          ▼          ▼
卡片布局    JS 交互   调用公网   自己的     AI 加持
纯静态     点击换句   API 拿数据  API 后端  全栈联调
仅CSS      + 数组
+ 无JS      + 事件
```

## 📖 每节课概要

| 课次 | 课题 | 学了什么 | 成果 | 难度 |
|:----:|------|----------|------|:----:|
| 🃏 **1a** | **卡片的骨架** | HTML 结构 + CSS 盒子模型 + 颜色/字体/阴影 | 一张漂亮的静态卡片 | ⭐ |
| 💻 **1b** | **让卡片动起来** | JS 变量/数组/对象 + Math.random + 事件绑定 | 点击换金句的交互页面 | ⭐ |
| ☁️ **2** | **云上金句** | API 概念 + fetch() + async/await + JSON | 从公网 API 获取实时金句 | ⭐⭐ |
| 🐍 **3** | **自己的 API** | Python Flask + 路由 + JSON + URL 参数 | 自己写的后端 API 服务 | ⭐⭐ |
| 🤖 **4** | **AI 升级** | 前后端联调 + 调用 AI API + 自由创作 | 完整的 AI 金句工坊 | ⭐⭐⭐ |

## 🧱 知识点依赖关系

```
第1a课 ─── HTML 基础标签
  │         CSS 基础属性
  │         (纯静态，没有JS)
  │
第1b课 ─── 需要第1a课
  │         JS 变量/数组/对象
  │         事件绑定/DOM操作
  │
第2课 ─── 需要第1b课（会JS基础）
  │         fetch() 异步请求
  │         JSON 解析
  │         try/catch 错误处理
  │
第3课 ─── 需要 Python 基础
  │         Flask 框架
  │         路由与方法
  │         请求与响应
  │
第4课 ─── 需要前三课全部内容
  │         调用外部 AI API
  │         全栈整合
```

## 🕐 每节课结构（2 小时）

| 时间 | 环节 | 说明 |
|------|------|------|
| 0-15min | 📺 导入 | 展示效果 / 回顾上节课 / 预告 |
| 15-40min | 🧠 教学 | 新知识点讲解 + 代码演示 |
| 40-70min | 💻 动手 | 学生跟着写代码 |
| 70-95min | 🎨 自由改造 | 个性化修改 |
| 95-120min | 🎤 展示 & 总结 | 分享作品 + 预告下节课 |

## 📁 文件说明

```
lessons/
├── lesson-01a-card-layout/       # 第1a课：HTML + 基础CSS
├── lesson-01b-card-interaction/  # 第1b课：JS交互入门
├── lesson-02-api-call/           # 第2课：调用公网API
├── lesson-03-backend/            # 第3课：Flask后端
└── lesson-04-final/              # 第4课：AI金句工坊
```

> 注：原 `lesson-01-card/`（合并版）保留作为参考资料。