STEP GUIDE · Checkpoint 1

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-01；下方只比較「Starter → Checkpoint 1」的真實異動。

01

三項 Task 進度

TASK-01本步驟處理

讓 CTA 的滑入、按下與鍵盤焦點可辨識

預計修改：style.css

完成後：按鈕有平順位移、按壓回饋與焦點框

TASK-02稍後處理

替處理中徽章加入有限度的動畫

預計修改：style.css

完成後：處理中標籤以淡入淡出提示狀態

TASK-03稍後處理

尊重減少動態效果偏好

預計修改：style.css

完成後：系統偏好減少動態時取消轉場與動畫

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
CSS本步驟有異動

檔案：style.css

修改前

.cta-button { transition: none; }

修改後

.cta-button { transition: transform 180ms ease, box-shadow 180ms ease; }
.cta-button:hover { transform: translateY(-4px); box-shadow: 0 12px 22px rgb(10 70 50 / 22%); }
.cta-button:active { transform: translateY(0); }
.cta-button:focus-visible { outline: 4px solid #f5c851; outline-offset: 4px; }
JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先準備滑鼠、Tab 鍵與作業系統的減少動態效果設定。

  2. 操作

    依序用滑鼠滑入、按住按鈕，再按 Tab 聚焦，觀察三種回饋。

  3. 預期

    按鈕有平順位移、按壓回饋與焦點框
Checkpoint 1 TASK-01

讓 CTA 的滑入、按下與鍵盤焦點可辨識

完成後可見：按鈕有平順位移、按壓回饋與焦點框

作品正在準備

讓互動回饋有目的

先用 Tab 找到按鈕，再用滑鼠比較滑入、按下與等待狀態。

查看作品成果

沒有動畫時，這段重要說明仍然可讀。