STEP GUIDE · Checkpoint 1

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

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

01

三項 Task 進度

TASK-01本步驟處理

加入卡片內距

預計修改：style.css

完成後：文字不再貼著卡片邊緣

TASK-02稍後處理

加入邊框與圓角

預計修改：style.css

完成後：每個技能區塊有清楚卡片邊界

TASK-03稍後處理

設定卡片外距

預計修改：style.css

完成後：相鄰卡片之間保有一致空隙

02

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

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

HTML本步驟無異動

檔案：index.html

修改前

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

修改後

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

檔案：style.css

修改前

.skill-card { background: white; }

修改後

.skill-card { padding: 24px; background: white; }
JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

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

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

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

怎麼看到結果

  1. 準備

    先重新整理本階段頁面，記住目前畫面，再開始操作。

  2. 操作

    重新整理後觀察文字與卡片四邊的距離。

  3. 預期

    文字不再貼著卡片邊緣
Checkpoint 1 TASK-01

加入卡片內距

完成後可見：文字不再貼著卡片邊緣

HTML

把內容整理成清楚結構。

CSS

替結構安排外觀與空間。

排錯

從畫面線索找出問題來源。