AI 商用網站開發跟著步驟，做出自己的作品
返回任務地圖

改錯了，只回復那一部分

第 4 堂 · 第 3／3 關 · 觀念 18 分鐘＋實作 42 分鐘

查看本堂完整六步
先接任務，準備開始

留下需要的，找回正常的。

兩個檔案都有差異，只有一個是錯誤。先指出要留下的內容，再親手回復指定檔案。

這關帶走：救回錯誤 CSS，同時保留作品角色文字。

步驟 5／6 · 觀念 18 分鐘

先學一招：要留下的修改，和要回復的錯誤

先看範圍，再決定回復哪一個檔案。

帶上你的裝備

  • 正常 portfolio 先保留
  • 獨立故障包與 Git 指南
works.html   三段作品角色文字：要保留
styles.css   內文字色改錯：要回復

回復整份 CSS 會捨棄這份檔案相對基準的修改。這次只有一處故意錯誤，且沒有暫存；若還有其他要保留的 CSS，先停下釐清。

跟著觀察

  1. 讀正常基準與候選版本的差異。
  2. 指出哪個檔案要保留、哪個要回復。
  3. 知道故障儲存庫與正常作品是兩個位置。
這次只要回復什麼？

選一個試試看，答錯也可以再試。

這是你的實際操作確認，小測不會替你勾選。

步驟 6／6 · 實作 42 分鐘

動手挑戰：只救回 CSS，保留作品文字

實際回復指定檔案，留下自己的結果。

先準備

  • 獨立 fault-L04/portfolio
  • 自己的基準提交、status 與 diff
取得 Git 故障練習依指南建立獨立故障儲存庫

下載包含 baseline/portfolio 與 candidate/portfolio，不含 .git。先依指南在另一個資料夾建立真正的基準，再只複製候選 works.html 與 styles.css 進來。先讀差異、再請 AI 解釋，最後由自己回復。

照這個順序開始

  1. 按故障指南完成獨立基準、套入兩份候選檔案並重現看不清文字。
  2. 把實際 status、diff、基準識別附上，請 AI 只提出方法。
  3. 核對範圍後親手只回復 CSS，確認作品角色文字仍在；記錄與重新檢查三頁。

保留作品文字，回復 CSS

主要使用 Cursor 內建 AI；先附資料，再送出指令。

1．附上這些檔案與資料
  • 獨立 fault-L04/portfolio 的儲存庫根目錄與基準提交識別
  • 實際 git status、git diff -- styles.css works.html；暫存區應為空
  • 錯誤現象、希望保留的三筆角色文字，以及本堂 HTML Git 指南
2．貼到哪裡
  1. 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
  2. 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
  3. 把狀態與差異貼在內建 AI 對話；只要求說明方法，不允許 AI 執行提交、回復、清除或推送。
3．預期回覆與操作
  • AI 先確認實際範圍，只提出指定 CSS 回復方法及影響，不代執行。
  • 若另有需保留的 CSS、已暫存或範圍不符，先釐清，不整庫重設。
4．自己檢查結果
  • 自己核對後只回復 CSS；git diff -- styles.css 為空。
  • git diff -- works.html 仍有三筆角色文字；三頁圖片與六條路線正常。
保留作品文字，回復 CSS Prompt（可收合）

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：沿用第 3 堂青禾三頁 portfolio，APPA 與紫綠配色不變。學生操作說明為本堂 HTML Git 指南；在自己獨立的練習網站確認 Git 安裝與目前路徑，身份設定只作用於本儲存庫，不修改全域設定、不推送。故障包有 baseline/portfolio 與 candidate/portfolio，不附 .git；依指南在另一個 fault-L04/portfolio 建立實際本機基準後才套入待檢查檔案。

本次任務：我只在獨立 fault-L04/portfolio 練習儲存庫操作。已從 baseline/portfolio 建立自己的基準提交，再從 candidate/portfolio 套入 works.html 與 styles.css，尚未加入暫存區。CSS 內文字色被改錯，但 works.html 的三筆本人角色文字要保留。請閱讀我附的實際儲存庫根目錄、git status、git diff -- styles.css works.html、基準提交識別及 HTML Git 指南，先確認只有這兩份差異且暫存區為空。只說明將 styles.css 從該基準回復到工作區的方法與影響，由我確認後親自執行；不代執行、不回復 works.html、不做整庫 reset、clean 或推送。若 CSS 還有要保留的修改、已暫存或範圍不符，先停止回復並列出要補充的資料。回復後應核對 CSS 與基準一致、works.html 三筆角色文字仍在、三頁圖片與六條路線正常，所有結果由我實際記錄，不預填成功。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。
Cursor AI 無法使用？改用 ChatGPT 備援

把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。

收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。

兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。

複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。

卡住時，APPA 給你一點線索

線索 1｜先看位置與證據

故障包沒有 Git 歷史，要先依指南在獨立資料夾建立真正基準。

線索 2｜再縮小操作範圍

只套入候選兩檔、不暫存；status 若不符就停下，不硬做回復。

回到自己的作品，逐項檢查

  • CSS diff 為空，作品頁 diff 仍有三段角色文字。
  • 三頁與圖片正常，正常作品儲存庫未被操作。
  • 未實際執行的 AI、Git、發布或另一裝置檢查保持待完成。
需要對照？看這一關的參考成果

先檢查自己的作品，再對照差異。開啟參考不會算完成。

對照保留角色文字的正常畫面（另開分頁）

尚未完成可以先往下看，之後再回來補做。

每一步，都留下自己的成果。

先實際完成上面兩項確認，再記下這一關的修改與結果。也可以先往下閱讀，之後回來補做。

進入第 5 堂：讓畫面有清楚的主次返回上一關：替作品留一個存檔點

關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。

留下自己的檢查紀錄

這是第 4 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。

重設會清除第 4 堂六步勾選，筆記、另一堂進度與網站檔案保留。