四個創作階段
- 模仿（第 01–06 章）先跟著明確範例做得出來，再換成自己的內容。
- 改造（第 07–13 章）保留技術骨架，開始主動改變資料、版型或互動規則。
- 遷移（第 14–20 章）把學過的解法搬到不同情境，先拆需求再決定做法。
- 創作（第 21–28 章）自己定義問題、受眾、功能與驗收證據。
章節與行動入口
每一章都先讀主講義，再由 Starter 開始固定任務；完成後勾選 Evidence，最後主動標記創作挑戰完成。
| 章 | 本章輸出成果 | 授課時間 | 創作階段 | 行動入口 |
|---|---|---|---|---|
| 01 | 能從正確資料夾開啟自己的第一個網頁，並提供可點擊的聯絡入口 | 180 分鐘 | 模仿 | 開始第 01 章 |
| 02 | 完成含文字、圖片、觀看目的、外部連結與嵌入影片的個人介紹頁 | 180 分鐘 | 模仿 | 開始第 02 章 |
| 03 | 替個人網站完成第一版一致的視覺樣式 | 180 分鐘 | 模仿 | 開始第 03 章 |
| 04 | 完成有留白、邊框與圓角的技能卡片 | 180 分鐘 | 模仿 | 開始第 04 章 |
| 05 | 完成文字清楚可讀且 CTA 能抵達真實內容的首頁 Hero | 150 分鐘 | 模仿 | 開始第 05 章 |
| 06 | 完成橫向導覽列與左右排列介紹區 | 210 分鐘 | 模仿 | 開始第 06 章 |
| 07 | 完成整齊且不溢出的作品卡片列表 | 180 分鐘 | 改造 | 開始第 07 章 |
| 08 | 完成卡片標籤與固定返回按鈕 | 180 分鐘 | 改造 | 開始第 08 章 |
| 09 | 完成可重複套用的按鈕與卡片樣式組 | 180 分鐘 | 改造 | 開始第 09 章 |
| 10 | 有目的、可操作且尊重減少動態偏好的互動回饋 | 150 分鐘 | 改造 | 開始第 10 章 |
| 11 | 整理後、可追查覆蓋來源的作品集 CSS | 210 分鐘 | 改造 | 開始第 11 章 |
| 12 | 在 320px 到桌機寬度都可閱讀、可操作的作品集 | 180 分鐘 | 改造 | 開始第 12 章 |
| 13 | 在既有整合頁修正錨點、間距與手機版回歸，留下修補前後證據 | 120 分鐘 | 改造 | 開始第 13 章 |
| 14 | 具備清楚 README 與可檢查 commit history 的作品 repo | 240 分鐘 | 遷移 | 開始第 14 章 |
| 15 | 輸入名字後即時更新問候與作品預覽的互動 | 180 分鐘 | 遷移 | 開始第 15 章 |
| 16 | 可顯示作品清單並記住訪客名字的小功能 | 180 分鐘 | 遷移 | 開始第 16 章 |
| 17 | 可前後切換並抽取練習提示的原生 JavaScript 輪播 | 180 分鐘 | 遷移 | 開始第 17 章 |
| 18 | 可開始、暫停、重設且不會重複加速的倒數計時器 | 240 分鐘 | 遷移 | 開始第 18 章 |
| 19 | 能讀懂既有 jQuery FAQ，再將同一段行為遷移成原生 JavaScript，並維持單開、收合與 aria-expanded | 120 分鐘 | 遷移 | 開始第 19 章 |
| 20 | 能顯示遠端資料及 loading、success、empty、error 四態 | 180 分鐘 | 遷移 | 開始第 20 章 |
| 21 | 能用 mock 備援或教師 GAS URL 取得試算表資料 | 180 分鐘 | 創作 | 開始第 21 章 |
| 22 | 完成可前後翻頁的產品列表 | 180 分鐘 | 創作 | 開始第 22 章 |
| 23 | 完成可驗證、提交並顯示結果的聯絡表單 | 180 分鐘 | 創作 | 開始第 23 章 |
| 24 | 完成可追蹤、可取消、可模擬訂閱失敗並重試的 memory adapter 即時留言原型，不冒充 Firebase | 240 分鐘 | 創作 | 開始第 24 章 |
| 25 | 完成明確標示非真實登入的 Auth 與權限概念模擬 | 120 分鐘 | 創作 | 開始第 25 章 |
| 26 | 完成可新增、切換與刪除且能保存的本機待辦事項 App | 180 分鐘 | 創作 | 開始第 26 章 |
| 27 | 完成可操作的 mock 同步原型；真實 GAS 串接列為有完整步驟的延伸 | 120 分鐘 | 創作 | 開始第 27 章 |
| 28 | 以自己的 Production URL 與 commit 完成格式預檢，再由教師或同儕人工驗收與展示 | 240 分鐘 | 創作 | 開始第 28 章 |