修正共同容器與唯一錨點
條件：在 1280px 與 320px 檢查 shell 邊界，依序點擊 #home、#about、#works、#contact。 驗收：四個連結各抵達唯一正確區塊，320px 容器不超出視窗
CHAPTER 13 · 120 MINUTES
作品集整合、回歸修復與階段展示
Starter 已有 Hero、About、Works 與 Contact；本章以可追查的容器邊界、唯一錨點、共同間距與 320px／1100px 回歸證據完成整合。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能修好什麼
把整合間距變成可追查規則
條件：在 1280px 檢查 .portfolio-main gap、.portfolio-hero／.portfolio-section padding、.portfolio-grid gap 與兩張 .portfolio-card 的共同視覺規則。 驗收：Hero 與內容區 padding 相同、主區塊 gap 為 24px、卡片網格 gap 為 18px，兩張卡片 computed 樣式一致
完成桌機與手機回歸清單
條件：在 320px 與 1100px 重跑導覽與作品區。 驗收：320px 導覽換行、作品單欄且不溢出；1100px 仍為兩欄
進場檢核與作品接力
- 具備第 12 章成果：在 320px 到桌機寬度都可閱讀、可操作的作品集：不看答案，展示第 12 章 viewport 矩陣、圖片／欄數／導覽證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出 selector、viewport、computed 或 hash 證據。 需要補強時從這裡接回
輸入：第 12 章已驗收的 RWD 作品與 viewport 證據
本章輸出：凍結後的 index.html／style.css、1280／320／1100 回歸清單與修補前後證據，交給第 14 章建立 Git／README／commit
交接 selector：.portfolio-shell、.portfolio-links、.portfolio-main、.portfolio-grid
產物類型：mainline；後續用途：第 14 章
PROBLEM & ANALOGY
既有骨架已完成，本章專注巡場修補
整合像組裝完成後巡查展場：招牌、動線、展品與出口都已存在，本章的工作是找到互相干擾之處並留下回歸證據，不是假裝從零搭建。
本章要解決：各章零件單獨打開都正常，合在一起卻出現失效 href、固定容器、間距規則分裂與手機版回歸。
接住上一章：第 12 章已驗收的圖片、欄數、手機導覽與 viewport 證據；本章把責任移植進完整作品。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- 共同容器
- 統一內容最大寬度與左右留白。
- 錨點 href/id
- 導覽連結與目標區塊的配對契約。
- 來源區塊
- 被整合進作品集的 Hero、內容與卡片。
- 間距系統
- 讓不同來源看起來像同一網站的共同留白。
- 320px
- 驗證整合後窄寬度的回歸基準。
SCOPE
今天的學習邊界
能自己完成
建立唯一且可跳轉的導覽錨點；統一容器與區塊間距；完成桌機與手機回歸清單。
看得懂即可
能辨識整合錯誤與單一元件錯誤的差別。
刻意延後
不新增新視覺技巧，不趁整合全面重做設計。
本章術語：integration、anchor、regression、duplicate id、scope、checkpoint。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先列出既有區塊與基準證據，再逐項修補，不一次改完整頁面。
- 每修一處就重測導覽、寬度與 class 衝突。
- 回歸證據包含桌機、手機、鍵盤與連結，不以『看起來可以』結案。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：故意讓導覽的 href="#projects" 對不到 id="works"，再讓 .portfolio-shell 固定 1180px；學生用網址 hash、Elements 與 computed boundary 對照後修正。
- 錨點不動：比對 href 的 # 名稱與唯一 id。
- 畫面像拼貼：用 Styles 與 Computed 比較共同 padding、gap 與卡片責任。
- 手機才壞：從最外層容器開始找固定寬度，不亂加 overflow hidden。
固定順序：先重現 → 讀 Console／Styles／Computed → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
點導覽沒有到正確區塊
先查：逐字比對 href 與目標 id，確認沒有重複 id。
畫面像拼貼
先查：找各來源的 container、padding 與 margin，再統一共同規則。
手機出現橫向捲軸
先查：在 320px 找真正超出的區塊，不用全域隱藏。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架，任務一路加厚
開始前先確認這四件事
- 我已列出四個導覽連結與目標 id。
- 我知道哪些規則是共同容器與共同間距。
- 我會保留每個來源區塊的功能與內容。
- 我會在 320px 操作完整導覽後再提交。
修正整合頁共同容器與可用錨點
檔案：index.html、style.css
位置：.portfolio-links a[href]、目標 id、.portfolio-shell、.portfolio-main
結果：四個導覽連結各抵達唯一正確區塊，且 320px 容器不超出視窗
統一 Hero、內容區與卡片間距
檔案：style.css
位置：.portfolio-main、.portfolio-hero、.portfolio-section、.portfolio-grid、.portfolio-card
結果：padding 同值、主區塊 gap 24px、grid gap 18px，卡片 computed 樣式一致
完成手機回歸修正
檔案：style.css
位置：@media (max-width: 760px)、.portfolio-header、.portfolio-links、.portfolio-grid
結果：320px 導覽換行、作品一欄且無水平捲動；1100px 作品維持兩欄
- 先讀任務 Starter 讀任務、先預測結果。 累積完成 0／3 個任務 開始練習
- 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
- 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
- 核對完成品 Solution 只補 TASK-03，不重構既有骨架。 累積完成 3／3 個任務 查看完整結果
網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看三個核心 TASK 對應的檔案、selector 與驗收證據；TASK-04 請回到創作挑戰。
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我的 #home、#about、#works、#contact 分別抵達 ______；.portfolio-shell 在 320px 的 right 是 ______；1280px computed gap／padding 是 ______。
整合不是把來源貼在一起；每個修改都要能說明對應哪個回歸問題，並能把通過版本交給第 14 章建立 Git 證據。
提交既有頁面的修補前後對照、320px 與桌機截圖，並現場用導覽走完四個區塊。
範圍說明：120 分鐘只驗收既有回歸修補；同一次課剩餘 60 分鐘進入第 14 章 Git 初始化與第一個 commit。
下一章：第 14 章會把整合成果建立版本紀錄並送到 GitHub。
階段關卡提交：先填需求拆解、證據清單與同儕回饋，再用四級 rubric 自評；第 3 級才算通過。開啟學生提交包
延伸整合專題：如果想把第 1～13 章重新整合成一張可部署的一頁式服務品牌網站，請開啟HTML／CSS 一頁式服務品牌整合專題。