CHAPTER 13 · PRACTICE WORKSPACE

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

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

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

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

修改檔案:index.htmlstyle.css

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

TASK-02已完成

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

修改檔案:style.css

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

TASK-03已完成

完成手機回歸修正

修改檔案:style.css

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

WORKSPACE

本階段實作區

已完成 TASK-03;請操作完整作品,逐項核對三項 Task 的可見結果。

小綠作品集

前端學習紀錄

把零件組成真正作品

查看作品

關於我

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

作品

活動頁

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

把完成品帶進本章創作挑戰

三項固定任務都已完成;下一步請改造需求、留下成果證據,不要停在照抄 Solution。

前往本章創作挑戰