# Web Teaching Design Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Create a complete 18-lesson, 40-minute project-based Web front-end teaching design set in the `Web` directory.

**Architecture:** The curriculum is split into three six-lesson projects: an HTML personal homepage, a CSS campus activity website, and a JavaScript task management system. Each lesson is a standalone Markdown teaching design that follows the same table-based structure while advancing one observable project result.

**Tech Stack:** Markdown, HTML5, CSS3, vanilla JavaScript

---

### Task 1: Course Metadata And Authoring Rules

**Files:**
- Create: `Web/titles.md`
- Create: `Web/SKILLS.md`

- [x] **Step 1: Write the 18-title curriculum outline**

List all lessons under the three approved projects and preserve the exact order from the design specification.

- [x] **Step 2: Write Web teaching-design rules**

Define the target learners, project-driven method, 40-minute limit, required Markdown sections, three-dimensional objectives, five-column teaching-process table, four-character activity labels, and validation requirements.

- [x] **Step 3: Verify metadata**

Run:

```bash
rtk rg -n '个人主页|校园活动网站|任务管理系统|40分钟|教学成效与反思' Web/titles.md Web/SKILLS.md
```

Expected: all three projects and all required format rules are present.

### Task 2: HTML Personal Homepage Lessons

**Files:**
- Create: `Web/1.md`
- Create: `Web/2.md`
- Create: `Web/3.md`
- Create: `Web/4.md`
- Create: `Web/5.md`
- Create: `Web/6.md`

- [x] **Step 1: Write lessons 1-3**

Cover environment setup, HTML document/text structure, and images/links/multimedia. Each lesson must produce a working part of the personal homepage.

- [x] **Step 2: Write lessons 4-6**

Cover lists/tables, forms, and semantic integration/publishing. Lesson 6 must integrate and validate the complete project.

- [x] **Step 3: Verify project one**

Run:

```bash
rtk rg -L '1课时（40分钟）' Web/{1..6}.md
rtk rg -L '## 教学成效与反思' Web/{1..6}.md
```

Expected: no filenames are returned.

### Task 3: CSS Campus Activity Website Lessons

**Files:**
- Create: `Web/7.md`
- Create: `Web/8.md`
- Create: `Web/9.md`
- Create: `Web/10.md`
- Create: `Web/11.md`
- Create: `Web/12.md`

- [x] **Step 1: Write lessons 7-9**

Cover CSS foundations, the box model, and Flex layout. Keep all exercises tied to the campus activity website.

- [x] **Step 2: Write lessons 10-12**

Cover navigation/card components, responsive media queries, and final integration/debugging.

- [x] **Step 3: Verify project two**

Run:

```bash
rtk rg -L '1课时（40分钟）' Web/{7..12}.md
rtk rg -L '## 教学成效与反思' Web/{7..12}.md
```

Expected: no filenames are returned.

### Task 4: JavaScript Task Management Lessons

**Files:**
- Create: `Web/13.md`
- Create: `Web/14.md`
- Create: `Web/15.md`
- Create: `Web/16.md`
- Create: `Web/17.md`
- Create: `Web/18.md`

- [x] **Step 1: Write lessons 13-15**

Cover variables, conditions/loops, and functions/events using task data and controls.

- [x] **Step 2: Write lessons 16-18**

Cover DOM task creation, state/localStorage persistence, and final integration/testing/presentation.

- [x] **Step 3: Verify project three**

Run:

```bash
rtk rg -L '1课时（40分钟）' Web/{13..18}.md
rtk rg -L '## 教学成效与反思' Web/{13..18}.md
```

Expected: no filenames are returned.

### Task 5: Full Curriculum Validation

**Files:**
- Verify: `Web/*.md`

- [x] **Step 1: Check the file set**

Run:

```bash
rtk find Web -maxdepth 1 -type f
```

Expected: 20 Markdown files, consisting of 18 lessons, `titles.md`, and `SKILLS.md`.

- [x] **Step 2: Check required lesson sections**

Run checks for the title, lesson duration, three objectives, teaching process, board design, reflection, and five process rows in every numbered file.

- [x] **Step 3: Check lesson timing**

Extract the five teaching-process minute values from each lesson and confirm their sum is 40.

- [x] **Step 4: Review progression and examples**

Read the first, final, and transition lessons (`1.md`, `6.md`, `7.md`, `12.md`, `13.md`, `18.md`) and confirm project continuity, age-appropriate scope, accurate HTML/CSS/JavaScript examples, and no duplicated lesson task.