選一個 topic
從第一張卡開始，先閱讀任務情境與預期畫面。
LESSON-01 · SELF-PACED PRACTICE
開發環境與瀏覽器排錯
把「開發環境與瀏覽器排錯」拆成 3 個可獨立完成、可重設、可驗證的自主學習 module。
3個獨立主題3個練習階段1個整合挑戰
看見缺口 → 修改一小段 → 重新載入驗收
每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。
先知道今天要做什麼
不要從長篇名詞開始；先從第一個可完成的小任務開始。
修改自己的檔案
打開 Starter 的實作檔，依 Step 逐步修改，不靠按鈕代做。
用證據驗收
重新整理頁面，對照畫面、DOM、Computed、Console 或文件證據。
3 個獨立主題
每張卡只練一個責任；完成後再進入下一張。
file:// 與 localhost 的資源來源差異
能從 URL 與 origin 判斷頁面由檔案系統或本機伺服器提供。
要修改：files/starter/index.html
儲存→一般重新整理→強制重新整理
能以畫面版本與 Navigation/Resource Timing 證據區分檔案未儲存、一般重載與繞過快取重取。
要修改：files/starter/index.html
Network→Console→Elements 的排錯順序
能依資源請求、程式執行、實際 DOM 三層順序定位白畫面或樣式失效。
要修改：files/starter/index.html
最後整合挑戰
把已完成的責任轉回本章完整作品，不把整合步驟冒充成單項教學。
在同一份章節作品中整合 3 個 module，排除單項通過但組合失敗的問題。
能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
第一個建議動作
如果你現在只想知道下一步，先做這件事。