四階段使用同一份檔案骨架。Checkpoint 只逐項完成任務，Solution 不加入延伸功能。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | .hero-media img | 320px 圖片 right 不超過父容器，且圖片保留比例 |
| TASK-02 | DONE-02 | style.css | .work-grid、680px 與 1020px media query | 390px／800px／1100px 實際為一欄／兩欄／三欄 |
| TASK-03 | DONE-03 | style.css | .portfolio-nav 與導覽連結 | 320px 導覽可換行，連結留在導覽盒內且至少 44px 高，鍵盤與點擊都能到達三個錨點 |
階段差異
starter/：三項 TASK 都保留，先讀骨架與預測結果。checkpoint-1/：只完成 DONE-01。checkpoint-2/：保留 DONE-01，再完成 DONE-02。solution/：只在相同位置完成 DONE-03；沒有無關重構。
人工驗收
- 在 320px 記錄
.hero-media img與父容器的 right 邊界，並在 Styles／Computed 指出三個圖片規則；頁面捲軸只作補充觀察，不作唯一故障判定。 - 在 390px、800px、1100px 記錄
.work-item實際欄數，指出它們分別由基礎規則、680px與1020pxmedia query 控制。 - 在 320px 記錄
.portfolio-nav的flex-wrap、每個連結高度與邊界；不可用全域overflow:hidden掩蓋溢出。 - 用 Tab 逐一聚焦三個導覽連結，再以滑鼠／觸控點擊
#about、#works、#contact，確認網址 hash 與目標區塊一致。 - 提供四個 viewport 的截圖或量測紀錄，說明圖片是 HTML inline SVG，並指出沒有整份貼上 Solution。