CHAPTER 13 · PRACTICE WORKSPACE

作品集整合、回歸修復與階段展示

在既有整合頁修正錨點、間距與手機版回歸，留下修補前後證據

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

修正整合頁共同容器與可用錨點

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

完成後看見：四個導覽連結各抵達唯一正確區塊，且 320px 容器不超出視窗

TASK-02本階段處理

統一 Hero、內容區與卡片間距

修改檔案：style.css

完成後看見：Hero 與內容區 padding 相同、主區塊 gap 為 24px、卡片網格 gap 為 18px，兩張卡片 computed 樣式一致

TASK-03稍後處理

完成手機回歸修正

修改檔案：style.css

完成後看見：320px 導覽換行、作品一欄且無水平捲動；1100px 作品維持兩欄

WORKSPACE

本階段實作區

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

FOCUS TASK · TASK-02

現在只處理：統一 Hero、內容區與卡片間距

修改：style.css

完成後：Hero 與內容區 padding 相同、主區塊 gap 為 24px、卡片網格 gap 為 18px，兩張卡片 computed 樣式一致

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

共同間距 vs 區塊例外｜先建立節奏

比較：共同容器與 section 間距應先統一，只有真正的內容差異才需要局部例外。

現在做：在 DevTools 比較 .portfolio-hero 與 .portfolio-section 的 padding，再只修改共同宣告，重新整理並重測兩者 computed 值。

看預期與證據

預期：完成後兩者 padding 相同；只有內容真的不同時才增加局部例外。

證據：用 computed 截圖證明共同 padding 已統一，而不是只描述畫面看起來一致。

Hero vs 卡片網格｜不同區塊仍要像同一站

比較：Hero 的舞台、內容區的寬度與卡片網格要共享視覺節奏，而不是各自貼上。

現在做：在 DevTools 比較 .portfolio-main 的 gap 與 .portfolio-grid 的 gap，接著檢查兩張 .portfolio-card 的 border／radius／background 是否來自同一責任。

看預期與證據

預期：完成後主區塊與卡片網格各有可追查的 gap，兩張卡片 computed 樣式一致，但不把 grid gap 誤當 section padding。

證據：用 computed 截圖與 CSS source 位置證明 Hero 舞台、內容區與卡片網格共享節奏而各自保留內容責任。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 以 1280px 讀取 .portfolio-main、.portfolio-hero、.portfolio-section、.portfolio-grid 的 computed gap／padding。
  2. B｜預測：修正後主區塊 gap 24px、Hero／section padding 同值、grid gap 18px，兩張卡片樣式相同。
  3. C｜實作：在 style.css 的 .portfolio-main、.portfolio-hero、.portfolio-section、.portfolio-grid 完成統一責任，一次只改本任務。
  4. D｜故障：若結果不一致，先重跑原操作，再查 computed 與 source 是否真的命中上述 selector，最後重跑。
  5. E｜驗收：Hero 與內容區 padding 相同、主區塊 gap 為 24px、卡片網格 gap 為 18px，兩張卡片 computed 樣式一致

完成條件：DONE-02：Hero 與內容區 padding 相同、主區塊 gap 為 24px、卡片網格 gap 為 18px，兩張卡片 computed 樣式一致

小綠作品集

前端學習紀錄

把零件組成真正作品

查看作品

關於我

我用清楚的結構整理每一次學習成果。

作品

活動頁

資訊層級與 CTA。

品牌頁

元件與 RWD。

聯絡

hello@example.com

第 12 章 → 第 13 章 → 第 14 章

把 RWD 作品凍結成可交付版本

第 12 章交出的 .hero-media img／.work-grid／.portfolio-nav 已有 viewport、欄數與鍵盤／錨點證據；本章不直接複製那些 DOM，改在 .portfolio-shell／.portfolio-links／.portfolio-main 整合。通過四個 hash、共同間距與 320／1100px 回歸後，第 14 章接手這個資料夾的 index.html、style.css 與修補前後證據，建立 Git／README／commit，不重新建立版面。

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「統一 Hero、內容區與卡片間距」。

前往 Checkpoint 2：完成 TASK-02