2026 網U等前端課程：84 小時重構版

這個資料夾是獨立的新課程，不會覆蓋或搬動原本 html/01-* 至 html/34-* 的教材。

課程規格

對象：完全沒有前端、程式、設計或網站建置基礎的學員。
總時數：84 小時，共 28 次授課，每次固定 3 小時。
教材是 28 個知識與練習章節，章節可以是 120、150、180、210 或 240 分鐘；章節不等於課次。
短章節會在同一次授課與下一章合併，重章節會跨兩次授課。course-allocation.json 是章節時數與 28 次課次切片的唯一來源。
每次授課固定包含 10 分鐘休息；全課程共 280 分鐘休息，分配到實際課次所屬的章節時間表。
前半段持續累積個人作品集，中段加入互動，後段完成資料串接、TODO Web App 與部署。
每次都要留下可操作、可截圖或可口頭說明的成果證據。
每章另有「本章創作挑戰」，依模仿 → 改作 → 遷移 → 創作逐步撤掉完整答案，讓學生從跟做轉向獨立決策。
28 章均使用 Manifest v2：可觀察目標、進場檢核、產物接力、Task 驗收模式與證據格式均可機器檢查。
第 13、20、28 章提供關卡提交包；第 3 級才通過。第 21、24、25、27 章另有不影響 Mock 必修主線的 Live Extension。

資料夾結構

84h-course-rebuild/
├── index.html
├── course-allocation.json
├── creation-path.json
├── CREATION_PATH.html
├── COURSE_MAP.md
├── ACCEPTANCE.md
├── SESSION_TEMPLATE.md
├── assets/
│   ├── course.css
│   └── course.js
├── starter-downloads/
│   └── NN-session-slug-starter.zip
├── tools/
│   ├── build-student-docs.mjs
│   ├── build-creation-path.mjs
│   ├── build-starter-zips.mjs
│   ├── check-course.mjs
│   ├── check-practice-contract.mjs
│   ├── check-learning-transfer.mjs
│   ├── check-starter-zips.mjs
│   └── check-session-pages.mjs
└── sessions/
    └── NN-session-slug/
        ├── index.html
        ├── teacher-notes.md
        ├── practice-manifest.json
        ├── gate-submission.md/html  # 僅第 13、20、28 章
        ├── live-extension.md/html   # 僅第 21、24、25、27 章
        ├── starter/
        │   └── index.html
        ├── checkpoint-1/
        │   └── index.html
        ├── checkpoint-2/
        │   └── index.html
        ├── solution/
        │   └── index.html
        ├── answer-map.html
        └── answer-map.md

各實作階段可依課程需要加入 style.css 與 script.js，不可為了檔案整齊建立空檔。

Starter → Solution 合約

每章固定三項任務，以 TASK-01、TASK-02、TASK-03 連續編號。
Solution 必須有相同編號的 DONE-01、DONE-02、DONE-03。
Starter、兩個 checkpoint 與 solution 的 HTML 標籤結構、id、class 集合保持一致；若該章明確在教 class rename，必須在 manifest 的 domContract.allowedClassRenames 一對一宣告，且 Solution 舊名稱為零。
Solution 只完成既定任務，不順便重構、不偷加尚未教過的功能。
額外安全處理或進階功能放在 extensions/ 或獨立延伸說明，不混入標準答案。
answer-map.md 是維護來源；學生只從主講義開啟產生後的 answer-map.html。
主講義使用四張醒目的流程卡；四個階段頁都提供目前進度、上一步與下一步。
學生可見 HTML 的 href 不可直接指向 .md。
每章主講義提供「下載 Starter ZIP」；下載包只複製該章 Starter，移除教材站導覽與 pager，並把共用資產收進 starter-project/assets/，不修改原始 sessions/*/starter/。
ZIP 固定包含頂層初學者 README.md 與 starter-project/。第 14 章專案自己的 README 仍保留在 starter-project/，不可被頂層說明取代。

詳細格式與可複製範例見 SESSION_TEMPLATE.md。

驗證方式

先產生學生文件與 Starter ZIP：

node tools/build-student-docs.mjs
node tools/build-starter-zips.mjs

build-student-docs.mjs 會先呼叫 build-course-navigation.mjs 與 build-creation-path.mjs：前者由 course-allocation.json／Manifest v2 產生 28 章地圖、28 次課卡與六組交棒，後者把 creation-path.json 同步到 28 份主講義，最後再產生 Markdown 對應的 HTML。只調整課程配置時可單獨執行 node tools/build-course-navigation.mjs；只調整創作挑戰時可單獨執行 node tools/build-creation-path.mjs。

建置完後執行：

node tools/check-course.mjs
node tools/check-course-navigation.mjs
node tools/check-practice-contract.mjs
node tools/check-learning-transfer.mjs
node tools/check-session-pages.mjs
node tools/check-starter-zips.mjs

check-course.mjs 檢查時數分配；check-course-navigation.mjs 阻擋章節／課次導覽衍生檔漂移；check-practice-contract.mjs 檢查 TASK/DONE、四階段 DOM 與答案映射；check-learning-transfer.mjs 檢查 28 章創作挑戰、能力層級、關卡、三層提示、解答邊界、頁面同步與連結；check-session-pages.mjs 檢查章節主講義；check-starter-zips.mjs 在暫存目錄重現建置並比對 28 份下載包。

若調整 course-allocation.json 的章節時數或前後關係，先執行 node tools/migrate-chapter-contract.mjs，同步 28 份主講義標示與章節導覽。工具只會在第一次升級舊 manifest 時調整時間表；已人工校準的 schedule 不會在重跑時被覆寫。

在 28 次教材尚未全部完成前，檢查器應明確失敗並列出缺項。這是進度訊號，不應以關閉檢查規則規避。

維護順序

先讀 course-allocation.json 與 COURSE_MAP.md，分開確認章節時數與實際課次切片。
複製 SESSION_TEMPLATE.md 的 Manifest v2 合約建立章節；先寫三個可觀察目標、2–4 題進場檢核與 artifact continuity。
先完成固定三個 Task 的 starter，再逐步完成兩個 checkpoint 與 solution；每題同步填 observe、acceptance 與 evidence。
補上 answer-map.md 與等於本章 durationMinutes 的教師稿；教師稿固定包含教學邊界、進場檢核、逐段腳本、Checkpoint 與班級接回、出口／退件、課後記錄。
在 creation-path.json 完成本章獨特的 brief、決定、禁止照抄、證據、三層提示與解答邊界。
執行 node tools/build-student-docs.mjs 更新章節／課次導覽、創作挑戰、學生版答案與說明網頁。
執行 node tools/build-starter-zips.mjs 更新 28 份下載包。只想比對打包內容時，可搭配 --output=暫存資料夾 --no-page-update。
第 13、20、28 章同步維護 Markdown／HTML 關卡提交包；第 21、24、25、27 章同步維護 Live Extension，且不得提交真 URL、token、config 或個資。
執行 node tools/verify-course.mjs 統一跑完語法、內容、流線、導覽 drift、PRACTICE CONTRACT 與 ZIP 檢查，修正所有錯誤後才算完成。