零基礎前端課程

CREATION PATH · 28 CHALLENGES

從跟著做，走到能獨立創作

每章不只完成程式碼，還要做選擇、避免照抄、留下證據。你會依序經過模仿、改造、遷移、創作，最後公開展示自己定義的作品。

4個能力階段
28個具體挑戰
3次創作關卡

HOW TO USE

每章用同一個閉環練習

先讀任務 brief，寫下你的 decisions；實作時遵守 anti-copy 限制；完成後用 evidence 證明結果。真的卡住才依序打開三層提示，避免太早看答案。

  1. 理解任務用自己的話重述要幫誰完成什麼。
  2. 做出決策先選內容、資料與互動，再開始寫程式。
  3. 實作驗證以畫面、操作、測試或流程圖留下證據。
  4. 說明取捨指出為何這樣做，以及下一版會改善什麼。

FOUR STAGES

支援逐步減少，決策責任逐步增加

第 01–06 章

模仿｜先做得出來

有清楚骨架與逐步示範，但姓名、內容、圖片與用途必須換成自己的。

教師支援：高
第 07–13 章

改造｜開始做選擇

保留技術骨架，主動改資料、版型與規則；第 13 章交付第一個創作關卡。

教師支援：中高
第 14–20 章

遷移｜換題目也會做

把事件、狀態與 API 搬到陌生情境；第 20 章用自選 API 解一個任務。

教師支援：中低
第 21–28 章

創作｜獨立定義作品

自己定義資料、使用者與驗收。第 26–28 章不提供完整解，第 28 章公開展示。

教師支援：低

CHAPTER CHALLENGES

28 個不重複的創作挑戰

★ 是創作關卡。每個挑戰的完整 decisions、antiCopy、evidence、三層 hints 與 solutionPolicy 收錄於 creation-path.json。

IMITATE · 01–06

模仿：先做得出來

  1. 01把課堂名片改成你的第一張網頁名片換成自己的身份、介紹與聯絡入口，說出程式和畫面的對應。
  2. 02製作一頁興趣導覽用自己的主題安排圖片、外部連結與嵌入內容。
  3. 03替興趣頁建立專屬視覺語氣自己選配色、文字層級與閱讀寬度。
  4. 04把內容整理成兩張資訊卡依內容密度調整盒模型，而不是照抄固定數值。
  5. 05設計一個有明確邀請的 Hero讓主張、補充與 CTA 對應真實頁面內容。
  6. 06建立能走訪內容的導覽與雙欄區塊讓三個入口可用，並自行決定圖片與文字比例。
MODIFY · 07–13

改造：開始做選擇

  1. 07把固定作品卡改造成可擴充清單建立四筆真實資料，讓欄數與長內容都能適應。
  2. 08為卡片加入真正有用的浮動資訊依頁面情境設計狀態標籤與不遮內容的操作。
  3. 09建立可重複但有變化的元件家族拆分共用規則與變體，做出多種狀態。
  4. 10把裝飾動畫改造成操作回饋只為有意義的狀態加入動態，並照顧 reduced motion。
  5. 11從症狀出發完成一次 CSS 偵錯留下症狀、證據、假設、修改與回歸的完整紀錄。
  6. 12為一種真實裝置重新設計閱讀順序依內容破版選斷點，主動調整導覽或資訊順序。
  7. 13 ★創作關卡一：交付一個不是課堂複製品的作品集為特定觀看者重組內容，完成有效 CTA 與同儕測試。
TRANSFER · 14–20

遷移：換題目也會做

  1. 14把作品交給一位沒看過課程的人接手用版本歷史與 README 讓同學能獨立開啟、理解。
  2. 15讓一份使用者輸入改變內容卡片把 DOM 事件搬到符合自己作品目的的小任務。
  3. 16設計一個會記住選擇的偏好設定用條件、資料與 localStorage 保存真實偏好。
  4. 17把輪播技術轉成內容推薦器自訂資料欄位，以 render 與索引呈現主題推薦。
  5. 18為一個生活流程設計可暫停的計時狀態從生活情境推導狀態、轉換與重複計時防護。
  6. 19接手一個陌生 FAQ 並新增可維護需求讀懂舊碼後以最小修改加入開合與鍵盤需求。
  7. 20 ★創作關卡二：把陌生 API 變成有用的小工具自選 API 與任務，處理載入、成功、空資料、錯誤。
CREATE · 21–28

創作：獨立定義作品

  1. 21設計一份能被網站正確使用的資料表自訂資料 schema、測試資料與 GAS 輸出規則。
  2. 22為自己的資料設計搜尋、篩選或分頁根據真實任務選操作組合，處理空結果與邊界。
  3. 23建立一份有人願意填完的申請表從情境推導最少欄位、驗證、錯誤與送出回饋。
  4. 24設計可訂閱的共享資料生命週期原型自訂共享資料生命週期、訂閱解除與安全失敗恢復。
  5. 25用 mock 身分狀態驗證權限矩陣用 mock owner、guest、unauth 驗證單一編輯權限與兩條拒絕路徑。
  6. 26從一個日常痛點設計本機 CRUD 原型不限 TODO；自訂問題、資料與操作，不提供完整解。
  7. 27讓自選作品離線排隊並能重試恢復自訂持久 queue、offline 保留、retry 與送出前 preflight。
  8. 28 ★創作關卡三：公開展示你定義、完成並驗證的作品自選問題、受眾與功能，非 TODO 也可以；不提供完整解。

REQUIREMENT BREAKDOWN

不知道做什麼時，用六步把模糊想法變成可驗收作品

第 21 章後，不要從「我要用哪個技術」開始。先定義問題與受眾，再決定最小功能。

  1. 01
    問題

    誰在什麼情境遇到什麼阻礙？先寫觀察，不急著寫解法。

  2. 02
    受眾

    選一個主要使用者；描述他的能力、裝置與使用時機。

  3. 03
    核心任務

    完成後使用者能做到什麼？用「能夠＋動作＋結果」表達。

  4. 04
    資料與狀態

    列出必要資料、初始、載入、成功、空白、錯誤與權限狀態。

  5. 05
    最小功能

    分成必做、可延後、不做；只留下能完成核心任務的閉環。

  6. 06
    驗收證據

    先定義截圖、操作測試、公開網址或受眾回饋，再開始實作。

一句話需求模板

為了幫助「主要受眾」在「使用情境」完成「核心任務」，我要做一個能「最小功能」的作品；當「驗收證據」成立，就算第一版完成。

FOUR-LEVEL RUBRIC

不是看功能數量，而是看能否獨立完成閉環

以需求、決策、實作、驗證四個面向判斷。創作關卡需達第 3 級；期末展示目標是穩定達第 3 級，至少一個面向達第 4 級。

等級需求定義決策與取捨實作完整度驗證與說明
1 跟做需依賴範例才知道做什麼。保留範例內容與規則，無法說明原因。只能在相同情境完成部分操作。以「畫面看起來一樣」作為唯一證據。
2 改造能換成自己的內容，但問題與受眾仍模糊。能做兩項選擇，理由多半是個人喜好。在既有骨架完成功能，能修正常見錯誤。有截圖與操作結果，邊界情況較少。
3 獨立能定義特定受眾、核心任務與完成條件。能以任務與證據說明選擇，也能主動刪功能。自行拆解並完成主要流程、狀態與基本錯誤處理。以測試、資料流、公開成果與受眾回饋證明。
4 可迭代需求來自真實觀察，範圍清楚且可驗證。能比較方案、說明限制與下一版優先順序。結構可維護，能處理邊界、失敗、權限或同步風險。讓目標受眾測試，依證據修正並清楚公開展示。

START SMALL

先完成眼前一章的決策與證據

不必等到第 28 章才開始創作。第一章換成自己的內容，就是第一次選擇；每一章多拿回一點決策權。

開始第 1 章挑戰 →