四階段使用同一份檔案骨架。Checkpoint 只逐項完成任務，Solution 不加入延伸功能。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | index.html、style.css | index.html 的 .portfolio-links a[href]、.portfolio-main id、各 section id；style.css 的 .portfolio-shell 與 .portfolio-main | 四個導覽連結各抵達唯一正確區塊，且 320px 容器不超出視窗 |
| TASK-02 | DONE-02 | style.css | style.css 的 .portfolio-main、.portfolio-hero、.portfolio-section、.portfolio-grid、.portfolio-card | Hero 與內容區 padding 相同、主區塊 gap 為 24px、卡片網格 gap 為 18px，兩張卡片 computed 樣式一致 |
| TASK-03 | DONE-03 | style.css | style.css 的 @media (max-width: 760px)、.portfolio-header、.portfolio-links、.portfolio-grid | 320px 導覽換行、作品一欄且無水平捲動；1100px 作品維持兩欄 |
階段差異
starter/：三項 TASK 都保留，先讀骨架與預測結果。checkpoint-1/：只完成 DONE-01。checkpoint-2/：保留 DONE-01，再完成 DONE-02。solution/：只在相同位置完成 DONE-03；沒有無關重構。
人工驗收
提交整合檢查表、1280／320／1100px 截圖或錄影；現場以 #home、#about、#works、#contact 走完四個區塊，並附 1280px computed gap／padding 與 320px scrollWidth 證據。