STUDENT HTML DOCUMENT

第 05 章練習答案對照

先自己完成 Checkpoint 2,再用這張表定位卡住的 TASK。答案對照用來找位置,不用來整份覆蓋。

四個階段都使用各自資料夾內的 images/hero-workspace.svg。學生只需在 style.css 把這個相對路徑接到 .practice-hero,不需要下載或連線到外部圖片服務。#featured-work 會以新的展示內容承接第 04 章的內容、邊界與空間觀念;這是概念轉移,不是直接重用第 04 章的 .skill-card DOM。

任務完成標記修改檔案修改位置可見結果
TASK-01DONE-01style.css.practice-hero首頁頂端出現完整背景圖像
TASK-02DONE-02style.cssindex.html.practice-hero.practice-cta#featured-work內容置中不貼邊,CTA 可抵達精選作品區
TASK-03DONE-03style.css.practice-hero::before白色標題在背景圖像上清楚可讀

CTA 與 #featured-work 使用同一份骨架;Starter、Checkpoint 1 的 CTA 沒有 href,Checkpoint 2 才啟用真實頁內連結。遮罩是標準答案的一部分;動畫與視差只可放延伸任務。