CHAPTER 11 · PRACTICE WORKSPACE

CSS 重構、優先權與 DevTools

整理後、可追查覆蓋來源的作品集 CSS

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

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

建立可理解的品牌色與間距變數

修改檔案:style.css

完成後看見:卡片間距與按鈕品牌色由具名變數控制

TASK-02稍後處理

修正外溢的選取器範圍

修改檔案:style.css

完成後看見:卡片說明不再被頁面級規則覆蓋

TASK-03稍後處理

把按鈕 class 從 work-card__button 改為 work-card__action

修改檔案:index.htmlstyle.css

完成後看見:HTML 與 CSS 只剩新 class,舊名稱為零且 hover、focus 規則集中

WORKSPACE

本階段實作區

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

CSS REPAIR LAB

作品卡片

這段文字應維持容易閱讀的品牌色。

查看證據

重構只整理規則,不改變內容責任。

CONTINUE

開始 TASK-01

前往 Checkpoint 1,依要求完成「建立可理解的品牌色與間距變數」。

前往 Checkpoint 1:完成 TASK-01