CHAPTER 05 · PRACTICE WORKSPACE

Hero、背景、遮罩與偽元素

完成文字清楚可讀且 CTA 能抵達真實內容的首頁 Hero

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

設定 Hero 背景圖

修改檔案：style.css

完成後看見：首頁頂端出現完整背景圖像

TASK-02本階段處理

設定 Hero 對齊並連結真實 CTA 目標

修改檔案：style.css、index.html

完成後看見：內容置中不貼邊，CTA 可抵達精選作品區

TASK-03稍後處理

加入深色遮罩

修改檔案：style.css

完成後看見：白色標題在背景圖像上清楚可讀

WORKSPACE

本階段實作區

已完成 TASK-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：設定 Hero 對齊並連結真實 CTA 目標

修改：style.css、index.html

完成後：內容置中不貼邊，CTA 可抵達精選作品區

講解時展開：2 個小型比較

對齊 vs 間距｜內容不貼邊

比較：對齊決定內容落點，padding／gap 決定內容與邊界的距離；不要只靠 translate 假裝置中。

現在做：在 DevTools 先暫時加入 min-height: 560px 與 display: grid，再切換 align-items: center 與 padding 的值；每次只關閉一項，觀察內容落點與邊界距離哪一個改變，最後把標準對齊宣告寫回 style.css。

看預期與證據

預期：能分辨 align-items 決定內容在 Hero 舞台的落點，padding 決定內容與邊界的距離，並知道不能只靠 translate 假裝置中。

證據：寬窄視窗截圖或口述，分別指出內容落點與邊界距離的變化，並展示最後保存的 Hero 對齊宣告。

真實錨點 vs 視覺 CTA｜連結要抵達目的

比較：CTA 的外觀可以是按鈕，但導覽責任仍由有效 href 與目標 id 決定。

現在做：先在 Checkpoint 1 點擊沒有 href 的 CTA，確認它不會抵達目標；再在 index.html 把同一個 CTA 補成 href="#featured-work"，重新整理並點擊，最後檢查網址片段與目標區塊。

看預期與證據

預期：能分辨 CTA 的按鈕外觀與導覽功能是兩件事，並用 href 與 #featured-work 的實際跳轉證明連結有效。

證據：留下補 href 前後的操作截圖或網址片段，並指出 index.html 的 href 與目標 id 完全相同。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 確認背景圖像已 cover Hero，接著觀察內容高度仍由文字撐開、尚未垂直置中；CTA 外觀已存在但尚未有 href。
  2. B｜預測：把視窗拉寬與縮窄，確認 Hero 內容保持置中；再回到頁首點擊 CTA，確認網址出現 #featured-work 並抵達精選作品區。
  3. C｜實作：在 style.css、index.html 的 .practice-hero、.practice-cta、#featured-work 完成「設定 Hero 對齊並連結真實 CTA 目標」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 .practice-hero、.practice-cta、#featured-work 與 style.css、index.html，最後重跑原操作。
  5. E｜驗收：內容置中不貼邊，CTA 可抵達精選作品區

完成條件：DONE-02：內容置中不貼邊，CTA 可抵達精選作品區

PORTFOLIO 2026

把複雜問題，整理成清楚的網頁

我是小安，正在學習前端開發。

前往精選作品（待設定）

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「設定 Hero 對齊並連結真實 CTA 目標」。

前往 Checkpoint 2：完成 TASK-02