三項 Task 進度

TASK-01已完成

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

預計修改：index.html、style.css

完成後：四個導覽連結都到正確區塊

TASK-02已完成

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

預計修改：style.css

完成後：各來源區塊像同一個網站而非貼上碎片

TASK-03本步驟處理

完成手機回歸修正

預計修改：style.css

完成後：320px 下導覽換行、作品一欄且無水平捲動

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。

CSS本步驟有異動

檔案：style.css

修改前

/* 手機回歸修正放在這裡。 */

修改後

@media (max-width: 760px) {
  .portfolio-header, .portfolio-links { flex-wrap: wrap; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-hero, .portfolio-section { padding: 24px 18px; }
}

JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。

README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。

怎麼看到結果

準備
先從桌機寬度開啟整合頁，再準備切到 320px。
操作
把視窗縮到 320px，檢查導覽換行、作品一欄與水平捲動。
預期
320px 下導覽換行、作品一欄且無水平捲動

Solution TASK-03

完成手機回歸修正

完成後可見：320px 下導覽換行、作品一欄且無水平捲動

小綠作品集

前端學習紀錄

把零件組成真正作品

查看作品

關於我

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

作品

活動頁

資訊層級與 CTA。

品牌頁

元件與 RWD。

聯絡

hello@example.com