四個階段都使用各自資料夾內的 images/hero-workspace.svg。學生只需在 style.css 把這個相對路徑接到 .practice-hero,不需要下載或連線到外部圖片服務。#featured-work 會以新的展示內容承接第 04 章的內容、邊界與空間觀念;這是概念轉移,不是直接重用第 04 章的 .skill-card DOM。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | .practice-hero | 首頁頂端出現完整背景圖像 |
| TASK-02 | DONE-02 | style.css、index.html | .practice-hero、.practice-cta、#featured-work | 內容置中不貼邊,CTA 可抵達精選作品區 |
| TASK-03 | DONE-03 | style.css | .practice-hero::before | 白色標題在背景圖像上清楚可讀 |
CTA 與 #featured-work 使用同一份骨架;Starter、Checkpoint 1 的 CTA 沒有 href,Checkpoint 2 才啟用真實頁內連結。遮罩是標準答案的一部分;動畫與視差只可放延伸任務。