CHAPTER 14 · PRACTICE WORKSPACE

Git、GitHub、README 與版本交付

具備清楚 README、可檢查 commit history 與可核對遠端版本的作品 repo

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

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

寫清楚作品用途與目標讀者

修改檔案：README.md

完成後看見：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

TASK-02稍後處理

列出真實功能與本機開啟方式

修改檔案：README.md

完成後看見：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

TASK-03稍後處理

記錄排錯流程並驗證 commit 切分

修改檔案：README.md

完成後看見：排錯紀錄可重現，git log 顯示三筆範圍清楚且可說明的 commit，git status --short 顯示乾淨

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：寫清楚作品用途與目標讀者

修改：README.md

完成後：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

講解時展開：2 個小型比較

工作目錄 vs commit｜修改尚未等於交付

比較：檔案有變更只代表工作目錄改了，commit 才留下可追查的版本邊界。

現在做：先在「作品介紹」與第一筆 commit 做一次最小對照：只改這個責任並重新整理／操作，接著依「完成作品用途後，在個人練習資料夾執行 git init、git add README.md README.html index.html style.css、git commit -m "建立作品集骨架與定位"，再執行 git show --stat --oneline HEAD 與 git status --short。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨」，並說出檔案有變更只代表工作目錄改了，commit 才留下可追查的版本邊界。

證據：用前後截圖或口述比較「README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨」，指出這個小型實驗如何證明檔案有變更只代表工作目錄改了，commit 才留下可追查的版本邊界。

README vs 程式｜用途要對得上作品

比較：README 說明作品用途，程式提供實際行為；兩者都要與本次修改範圍一致。

現在做：先在「作品介紹」與第一筆 commit 做一次最小對照：只改這個責任並重新整理／操作，接著依「完成作品用途後，在個人練習資料夾執行 git init、git add README.md README.html index.html style.css、git commit -m "建立作品集骨架與定位"，再執行 git show --stat --oneline HEAD 與 git status --short。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨」，並說出 README 說明作品用途，程式提供實際行為；兩者都要與本次修改範圍一致。

證據：用前後截圖或口述比較「README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨」，指出這個小型實驗如何證明 README 說明作品用途，程式提供實際行為；兩者都要與本次修改範圍一致。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：先把 starter 整個資料夾複製到教材 repo 外的個人練習資料夾，在該資料夾開啟終端機，以 pwd 與檔案清單確認範圍；README.html 只供階段對照。
  2. B｜預測：在個人練習資料夾先以 Starter 骨架建立 Git 初始化 commit（納入 README.md、README.html、index.html、style.css），再完成 README 作品介紹，執行 git show --stat --oneline HEAD 與 git status --short。
  3. C｜實作：在 README.md 的 「作品介紹」與第一筆 commit 完成「寫清楚作品用途與目標讀者」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 「作品介紹」與第一筆 commit 與 README.md，最後重跑原操作。
  5. E｜驗收：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

完成條件：DONE-01：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

VERSION DELIVERY LAB

Git 到 GitHub 交付板

  1. 工作目錄確認路徑與修改
  2. 暫存區git add 後用 status 驗證
  3. 本機版本git commit 建立快照
  4. 遠端倉庫git push 後到 GitHub 檢查
查看本階段 README 靜態對照

README.html 是靜態對照，不會隨 README.md 編輯同步；請用 VS Code Markdown Preview 驗證自己的修改。

CHAPTER HANDOFF

第 13 章 → 第 14 章 → 第 15 章

接收：沿用第 13 章已驗證的 index.html、style.css 與回歸證據；本章只在教材 repo 外的個人資料夾建立 README 與 Git 版本證據。

交給第 15 章：保留同一份 index.html、style.css、README 與三筆可說明的 history；下一章直接新增 script.js 與 DOM 事件，不重做本章骨架。

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「寫清楚作品用途與目標讀者」。

前往 Checkpoint 1：完成 TASK-01