CHAPTER 05 · PRACTICE WORKSPACE

Hero、背景、遮罩與偽元素

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

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

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

設定 Hero 背景圖

修改檔案:style.css

完成後看見:首頁頂端出現完整背景照片

TASK-02稍後處理

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

修改檔案:style.cssindex.html

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

TASK-03稍後處理

加入深色遮罩

修改檔案:style.css

完成後看見:白色標題在照片上清楚可讀

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼,再從 TASK-01 開始修改。

PORTFOLIO 2026

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

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

前往精選作品(待設定)

CONTINUE

開始 TASK-01

前往 Checkpoint 1,依要求完成「設定 Hero 背景圖」。

前往 Checkpoint 1:完成 TASK-01