CHAPTER 13 · PRACTICE WORKSPACE

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

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

01 Starter 0/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 開始修改。

FOCUS TASK · TASK-01

現在只處理：修正整合頁共同容器與可用錨點

修改：index.html、style.css

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

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

href vs id｜導覽與目標要成對

比較：導覽 href 指向目標 id；只改其中一側，畫面看似正常但點擊仍會失效。

現在做：在 index.html 只把作品 href 從 #projects 改成實際存在的 #works，重新整理後依序點擊四個 href，記錄 hash 與 target 可見性。

看預期與證據

預期：完成後四個 href 都指向實際存在且唯一的 id；只改 href 或只改 id 的另一側，點擊仍會失效。

證據：用前後截圖或口述指出 #projects 為失效配對，並證明 #works 修正後 hash 與目標一致。

共同容器 vs 區塊內容｜整合先對齊邊界

比較：外層 shell 統一頁面邊界，各 section 保留自己的內容責任。

現在做：在 DevTools 以 320px 檢查 .portfolio-shell 的 computed width／right，再在 style.css 將 1180px 改為 min(1100px, calc(100% - 32px))，重新量測並保留邊界證據。

看預期與證據

預期：完成後 shell right 不超過 viewport，外層 shell 負責頁面邊界，各 section 保留自己的內容責任。

證據：用前後 computed／bounding box 證明固定 1180px 是根因，修正後 320px shell 留在視窗內，而不是用 overflow hidden 遮住症狀。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 的 1280px 與 320px 檢查 .portfolio-links a[href]、.portfolio-main id、各 section id 與 .portfolio-shell 右邊界。
  2. B｜預測：修正後 #home、#about、#works、#contact 各只有一個目標，且 320px shell 不超出視窗。
  3. C｜實作：在 index.html 修正導覽 href／目標 id，在 style.css 修正 .portfolio-shell 與 .portfolio-main；一次只處理本任務責任。
  4. D｜故障：若 hash 或邊界不一致，先重跑原操作，再檢查 href、唯一 id、shell computed width／right 與 style.css，最後重跑原操作。
  5. E｜驗收：四個導覽連結各抵達唯一正確區塊，且 320px 容器不超出視窗

完成條件：DONE-01：四個導覽連結各抵達唯一正確區塊，且 320px 容器不超出視窗

小綠作品集

前端學習紀錄

把零件組成真正作品

查看作品

關於我

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

作品

活動頁

資訊層級與 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-01

前往 Checkpoint 1，依要求完成「修正整合頁共同容器與可用錨點」。

前往 Checkpoint 1：完成 TASK-01