CHAPTER 13 · PRACTICE WORKSPACE

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

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

03 Checkpoint 2 2/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-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：完成手機回歸修正

修改：style.css

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

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

桌機 vs 手機｜回歸不是只看一個尺寸

比較：桌機修正可能破壞 320px 版面；整合完成要在兩個寬度重跑同一組驗收。

現在做：在 1100px 記錄兩欄與桌機邊界，再切到 320px 讀取 flex-wrap、欄數與 scrollWidth，重整後再切回 1100px。

看預期與證據

預期：完成後兩個 viewport 都通過；桌機修正不能以破壞 320px 版面為代價。

證據：用同一組操作的 1100／320／1100 截圖或錄影證明這是回歸測試，不是只看一個尺寸。

根因修正 vs 單點補丁｜避免越修越多

比較：先找共同容器或斷點根因，比對每個區塊是否一起恢復，不要只遮住單一症狀。

現在做：先在 DevTools 比較 320px 的 shell／header／links／grid 邊界，再只修共用 media query；不要先加 overflow hidden，重跑 320px 與 1100px。

看預期與證據

預期：完成後真正超出的來源被修掉，導覽、欄數與 shell 一起恢復；不是只遮住單一症狀。

證據：用 bounding box、欄數與 scrollWidth 三種證據說明根因修正，並指出沒有把 overflow hidden 當答案。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 以 1100px 與 320px 讀取 .portfolio-header／.portfolio-links 的 flex-wrap、.portfolio-grid 欄數與 documentElement scrollWidth。
  2. B｜預測：修正後 320px 會換行、單欄且 pageFits；1100px 仍為兩欄。
  3. C｜實作：在 @media (max-width: 760px) 同時處理 .portfolio-header／.portfolio-links／.portfolio-grid，一次只改本任務責任。
  4. D｜故障：若只遮住 scrollbar 或只修單一 link，先回到 computed flex-wrap、欄數與 shell 邊界找根因，最後重跑兩個 viewport。
  5. E｜驗收：320px 導覽換行、作品一欄且無水平捲動；1100px 作品維持兩欄

完成條件：DONE-03：320px 導覽換行、作品一欄且無水平捲動；1100px 作品維持兩欄

小綠作品集

前端學習紀錄

把零件組成真正作品

查看作品

關於我

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

作品

活動頁

資訊層級與 CTA。

品牌頁

元件與 RWD。

聯絡

[email protected]

第 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-03

前往 Solution，依要求完成「完成手機回歸修正」。

前往 Solution：完成 TASK-03