用尺寸看懂作品網格
- 下載起始檔，另存自己的 student-work/L07/portfolio。正常版不要被故障副本覆蓋。
- 在 works.html 找到卡片共同父層。原.card-grid也用在其他頁，這次只多加works-grid，不改其他頁排列。
- 先親手新增「晨光工作室網站」；附完整HTML、CSS及剩餘兩筆資料給Cursor內建AI，補成六張，不重複新增第四張。
- 開啟DevTools裝置工具列，輸入CSS viewport寬度，依序測320、599、600、768、1023、1024、1280。每次記欄數與生效規則；桌面視窗寬不等於viewport欄位數字。
- checkpoint-01各尺寸gap為20px。親手加入手機16px，再請AI只改min-width:600px時的24px。
- 正常網站確認後，才下載故障包另放fault-L07。320px向右滑動並選第一張卡片，看Computed的width與來源。
- 對照父容器與卡片寬度，提供DOM、完整CSS和截圖給AI；只去掉400px故障區塊，不在body隱藏溢出。
- 重驗全部尺寸、圖片與六條服務入口。Tab看焦點、Enter真的開頁。記下自己做過的結果，未測不填成功。
所有Prompt以Cursor內建AI為主；ChatGPT備援需重新貼檔案內容。這份指南不會執行AI、Git或替你驗收。
新增三筆作品的完整資料
原三張保留；以下都是虛構練習，圖片是教學示意。
第4張：晨光工作室網站
- 類型：網站練習
- 圖片：assets/work-web.jpg（960×640）
- alt：紫色頁首、綠色主圖與卡片，晨光工作室網站練習示意
- 摘要：整理工作室的服務與作品，讓訪客依序讀懂內容。
- 角色：本人角色：內容整理與前端練習
- 入口：了解合作服務，href=services.html，class=primary-link
第5張：日光咖啡攝影
- 類型：攝影練習
- 圖片：assets/work-brand.jpg（960×640）
- alt：米色背景與山形標誌，作為日光咖啡攝影頁的構圖練習素材
- 摘要：借用同一份教學素材，練習整理攝影主題與圖片說明。
- 角色：本人角色：內容整理與前端練習
- 入口：了解合作服務，href=services.html，class=primary-link
第6張：街角日常攝影
- 類型：攝影練習
- 圖片：assets/work-layout.jpg（960×640）
- alt：深綠底與亮綠圓形，作為街角日常攝影頁的版面練習素材
- 摘要：這是虛構攝影專案的版面練習，圖片為設計示意而非實拍作品。
- 角色：本人角色：內容整理與前端練習
- 入口：了解合作服務，href=services.html，class=primary-link