選一個 topic
從第一張卡開始，先閱讀任務情境與預期畫面。
LESSON-25 · SELF-PACED PRACTICE
商品、購物車、結帳與聯絡的離線 Mock
把「商品、購物車、結帳與聯絡的離線 Mock」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
4個獨立主題3個練習階段1個整合挑戰
看見缺口 → 修改一小段 → 重新載入驗收
每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。
先知道今天要做什麼
不要從長篇名詞開始；先從第一個可完成的小任務開始。
修改自己的檔案
打開 Starter 的實作檔，依 Step 逐步修改，不靠按鈕代做。
用證據驗收
重新整理頁面，對照畫面、DOM、Computed、Console 或文件證據。
4 個獨立主題
每張卡只練一個責任；完成後再進入下一張。
離線商品卡與搜尋契約
能從私有六欄的本地 Product array 顯示名稱、圖片、售價與特價，搜尋只比對 name/productId。
要修改：files/starter/js/api.js
購物車與有效售價
能由 store.js 保存 productId/qty，並由 api.js／cart.js 以有效售價計算商品小計。
要修改：files/starter/js/store.js
Checkout 訂單欄位與預估金額
能收集購買人、性別、電話、地址、信箱並顯示商品總額、運費、訂單總額與 mock 狀態。
要修改：files/starter/js/checkout.js
聯絡五欄與零網路請求
能收集姓名、性別、電話、信箱、內容並只執行本地狀態 mock。
要修改：files/starter/contact.html
最後整合挑戰
把已完成的責任轉回本章完整作品，不把整合步驟冒充成單項教學。
在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
完成全離線商品目錄、localStorage 購物車、checkout draft 與聯絡 mock；外部資料請求與遠端寫入均為 0。
第一個建議動作
如果你現在只想知道下一步，先做這件事。