第 1 章：什麼是 AI Coding

本章目標

讀完這一章，你要理解 AI coding 不是「讓 AI 取代你寫程式」，而是學會把想法拆清楚，交給 Codex 協助產生、修改、解釋與除錯程式碼。

你會做出什麼

本章不急著寫完整網站，而是完成一份自己的 AI coding 學習任務卡：

• 我想做的第一個網頁是什麼

• 這個網頁需要哪些區塊

• 哪些事情可以請 Codex 幫忙

• 哪些結果需要自己檢查

核心觀念

AI coding 是一種新的寫程式方式。你仍然是專案的負責人，Codex 是協作工具。你負責說明目標、做決定、測試結果；Codex 協助你把需求轉成程式碼、解釋不懂的地方、找出錯誤。

初學者最容易犯的錯，是把一句很大的需求丟給 Codex，例如：「幫我做一個網站。」這樣得到的結果通常很難控制。比較好的方式是把需求拆小，例如：「請幫我產生一個個人介紹網站的 HTML 結構，包含導覽列、自我介紹、技能與作品區，不需要 CSS。」

AI 與人的分工

你負責：

• 說清楚目標

• 決定功能範圍

• 檢查畫面是否符合需求

• 測試按鈕與互動是否正常

• 保留能運作的版本

Codex 可以協助：

• 產生 HTML、CSS、JavaScript

• 解釋程式碼

• 改善版面

• 找出錯誤

• 提供重構建議

實作步驟

1. 打開 VS Code。

2. 建立一份筆記，寫下你想完成的第一個網頁。

3. 把網頁拆成 3 到 5 個區塊。

4. 把其中一個區塊改寫成可以交給 Codex 的 prompt。

範例：

我想做一個個人介紹網站。

請先只產生 HTML 結構，包含：

1. 頁首導覽列

2. 自我介紹區

3. 技能列表

4. 作品卡片

5. 頁尾

不要加入 CSS 和 JavaScript。

Codex Prompt 範例

請用初學者可以理解的方式，幫我規劃一個只使用 HTML、CSS、JavaScript 的個人介紹網站。先不要寫程式，請先列出頁面區塊、需要的檔案，以及每個檔案負責什麼。

常見錯誤

• 一次要求 Codex 做太多事

• 沒有限制使用的技術

• 沒有說明輸出格式

• 沒有測試就繼續加功能

• 看不懂程式碼也直接複製貼上

本章練習

請寫出三個 prompt：

1. 請 Codex 規劃一個網頁

2. 請 Codex 只產生 HTML

3. 請 Codex 解釋產生的 HTML

檢查清單

• 我知道 Codex 是協作工具，不是專案負責人

• 我能把大需求拆成小任務

• 我能寫出明確限制的 prompt

• 我知道產生程式後需要自己測試

第 2 章：準備開發環境

本章目標

這一章會建立第一個前端專案資料夾，並認識 HTML、CSS、JavaScript 三個檔案的分工。

你會做出什麼

你會做出一個可以在瀏覽器打開的簡單網頁，包含標題、說明文字與一個按鈕。

核心觀念

前端專案最基本的三個檔案是：

• `index.html`：負責頁面內容與結構

• `style.css`：負責顏色、間距、字體與版面

• `script.js`：負責互動行為

這三個檔案放在同一個資料夾中，就能形成一個最小可執行的網頁專案。

建立專案

在 VS Code 中建立資料夾：

examples/ch02-first-page/

裡面放三個檔案：

index.html

style.css

script.js

實作步驟

1. 建立 `index.html`，放入頁面基本結構。

2. 建立 `style.css`，設計乾淨的畫面。

3. 建立 `script.js`，讓按鈕點擊後改變文字。

4. 用瀏覽器打開 `index.html`。

5. 修改文字，再重新整理瀏覽器確認結果。

Codex Prompt 範例

請幫我建立一個初學者用的第一個網頁專案，只使用 HTML、CSS、JavaScript。請分別提供 index.html、style.css、script.js，功能是點擊按鈕後改變畫面文字。

常見錯誤

• CSS 檔案名稱和 HTML 連結名稱不一致

• JavaScript 檔案沒有用 `<script>` 載入

• 修改檔案後忘記儲存

• 瀏覽器沒有重新整理

本章練習

請修改範例專案：

• 把標題改成你的名字

• 把按鈕文字改成「開始學習」

• 點擊後顯示「我正在用 Codex 學 AI coding」

檢查清單

• 我能建立 `index.html`、`style.css`、`script.js`

• 我知道三個檔案各自負責什麼

• 我能用瀏覽器打開本機網頁

• 我能修改內容並看到結果

第 3 章：第一次和 Codex 協作

本章目標

這一章會練習第一次和 Codex 協作。重點不是讓 Codex 一次完成整個網站，而是學會用清楚的小任務控制產出。

你會做出什麼

你會把第 2 章的第一個網頁改成更完整的小首頁，並練習三種 Codex 請求：

• 產生程式

• 解釋程式

• 修改程式

核心觀念

好的 prompt 通常包含四件事：

1. 目標：你想做什麼

2. 限制：只能使用哪些技術

3. 範圍：這次只改哪個部分

4. 輸出：希望 Codex 怎麼回答

範例：

請只修改 style.css，讓這個頁面看起來更清爽，使用白色背景、淺藍紫色調、8px 以下圓角。不要修改 HTML 和 JavaScript。

協作流程

1. 先說明你要完成的畫面。

2. 請 Codex 先規劃，不急著寫程式。

3. 一次只請 Codex 修改一個檔案或一個功能。

4. 執行或打開網頁測試結果。

5. 如果有錯誤，把錯誤訊息完整交給 Codex。

Codex Prompt 範例

產生程式

請幫我把這個 HTML 首頁補完整，加入 hero 區、三個特色卡片和頁尾。只修改 HTML，不要加入 CSS。

解釋程式

請用初學者能理解的方式解釋這段 JavaScript。請分段說明每一行在做什麼。

修改程式

請只修改 CSS，讓卡片在桌面版三欄排列，在手機版一欄排列。不要修改 HTML。

常見錯誤

• 沒有說「只修改哪個檔案」

• 同時要求新增功能、改版面、修 bug

• Codex 回答後沒有測試

• 不看錯誤訊息，只說「不能用」

本章練習

請對第 2 章範例做三次修改：

1. 請 Codex 增加一段說明文字

2. 請 Codex 改善按鈕樣式

3. 請 Codex 解釋 `script.js`

檢查清單

• 我能寫出包含目標、限制、範圍、輸出的 prompt

• 我知道一次只改一個重點

• 我會把錯誤訊息交給 Codex

• 我會測試 Codex 產生的結果

第 4 章：HTML 基礎與頁面結構

本章目標

這一章會學會 HTML 的角色：它負責網頁內容與結構。你要能看懂常見標籤，並用語意清楚的方式組出一個基本頁面。

你會做出什麼

你會做出一個「學習筆記頁」，包含頁首、導覽列、主要內容、清單、連結與頁尾。

核心觀念

HTML 不是拿來「設計樣式」的工具，它的任務是描述內容是什麼。標題用標題標籤，段落用段落標籤，導覽用 `nav`，主要內容用 `main`，頁尾用 `footer`。

語意清楚的 HTML 對初學者很重要，因為 Codex 也會根據你的結構繼續修改。結構越清楚，後續 CSS 與 JavaScript 越容易寫。

常用標籤

• `header`：頁首或區塊開頭

• `nav`：導覽連結

• `main`：頁面主要內容

• `section`：一段主題內容

• `article`：可獨立閱讀的內容

• `h1` 到 `h6`：標題

• `p`：段落

• `ul`、`ol`、`li`：清單

• `a`：連結

• `footer`：頁尾

實作步驟

1. 建立 `index.html`。

2. 加入 `doctype`、`html`、`head`、`body`。

3. 在 `body` 中建立 `header`、`main`、`footer`。

4. 在 `main` 中加入學習目標與筆記清單。

5. 確認瀏覽器能正確顯示內容。

Codex Prompt 範例

請只使用 HTML，幫我建立一個語意清楚的學習筆記頁。內容包含頁首、導覽列、主要內容、三個學習目標、三則筆記卡片和頁尾。不要加入 CSS 和 JavaScript。

常見錯誤

• 用太多沒有意義的 `div`

• 為了字變大而亂用標題層級

• 忘記替連結加上 `href`

• 頁面只有內容，沒有清楚區塊

本章練習

請把範例頁改成你自己的「AI coding 學習筆記」，至少包含三個學習目標與三個常用 prompt。

檢查清單

• 我知道 HTML 負責內容與結構

• 我能使用語意化標籤

• 我能建立標題、段落、清單與連結

• 我能請 Codex 只產生 HTML

第 5 章：CSS 基礎與畫面設計

本章目標

這一章會學會 CSS 的角色：它負責網頁的視覺呈現。你會使用顏色、字體、間距、邊框與版面，讓 HTML 內容變得清楚好讀。

你會做出什麼

你會把第 4 章的學習筆記頁改成清爽的卡片式版面，使用淺藍紫色調與簡潔留白。

核心觀念

CSS 透過「選擇器」找到 HTML 元素，再套用樣式。常見樣式包含顏色、字體大小、內距、外距、邊框、背景與排列方式。

初學者最重要的是先掌握 Box Model。每個元素都像一個盒子，包含內容、內距、邊框與外距。

常用 CSS

• `color`：文字顏色

• `background`：背景

• `font-size`：字體大小

• `line-height`：行高

• `margin`：外距

• `padding`：內距

• `border`：邊框

• `border-radius`：圓角

• `display: flex`：一維排列

• `display: grid`：格線排列

實作步驟

1. 建立 `style.css`。

2. 在 HTML 用 `link` 載入 CSS。

3. 設定全站字體與背景。

4. 用 `max-width` 控制內容寬度。

5. 用 Grid 建立卡片排列。

6. 加上手機版一欄排列。

Codex Prompt 範例

請只修改 style.css，將這個學習筆記頁設計成清爽的卡片式版面。使用白色背景、淡灰區塊、淺藍紫色調、8px 圓角，並加入手機版一欄排列。

常見錯誤

• 所有元素都直接指定固定寬度

• 忘記處理手機版

• 顏色太多導致畫面混亂

• 圓角與陰影太重

• 文字行距太窄，閱讀吃力

本章練習

請調整範例頁：

• 把卡片改成兩欄

• 手機版維持一欄

• 替重要提示加入淡紫色背景

• 讓按鈕有 hover 效果

檢查清單

• 我知道 CSS 負責視覺樣式

• 我理解 margin、padding、border 的差異

• 我能使用 Flexbox 或 Grid 排版

• 我能請 Codex 只修改 CSS

第 6 章：JavaScript 基礎

本章目標

這一章會學會 JavaScript 的角色：它負責網頁互動。你會用按鈕事件改變文字、更新狀態，並理解 DOM 操作的基本流程。

你會做出什麼

你會做出一個小型「學習狀態卡」，點擊按鈕後更新完成數量與提示文字。

核心觀念

JavaScript 可以選取 HTML 元素，監聽使用者動作，然後改變畫面。最常見的流程是：

1. 找到元素

2. 設定初始資料

3. 監聽事件

4. 更新資料

5. 把資料顯示回頁面

這就是許多網頁互動的基礎。

常用語法

• `const`：宣告不重新指定的變數

• `let`：宣告會改變的變數

• `querySelector`：選取頁面元素

• `addEventListener`：監聽事件

• `textContent`：修改文字

• `classList`：新增或移除 class

實作步驟

1. 在 HTML 建立訊息文字、計數文字與按鈕。

2. 在 `script.js` 選取這些元素。

3. 建立一個 `completedCount` 變數。

4. 點擊按鈕時讓數字加一。

5. 更新頁面文字。

Codex Prompt 範例

請只修改 script.js，幫我替這個頁面加入互動。點擊「完成一項」按鈕時，完成數量加一，並更新提示文字。請用初學者能理解的寫法。

常見錯誤

• JavaScript 執行時 HTML 元素還不存在

• `id` 名稱和 `querySelector` 不一致

• 忘記把數字更新回畫面

• 把所有邏輯都寫在 HTML 裡

本章練習

請替範例加上「重置」按鈕，點擊後完成數量回到 0，提示文字回到初始狀態。

檢查清單

• 我知道 JavaScript 負責互動

• 我能用 `querySelector` 選取元素

• 我能用 `addEventListener` 處理點擊

• 我能更新頁面上的文字

第 7 章：讓網頁動起來

本章目標

這一章會把前面學到的 HTML、CSS、JavaScript 串起來，做出真正有互動的網頁。你會練習按鈕、輸入框、表單送出、畫面更新與錯誤提示。

你會做出什麼

你會做出一個「Prompt 筆記小工具」。使用者可以輸入 prompt，按下按鈕後把內容加入清單；如果沒有輸入內容，畫面會顯示提醒。

核心觀念

互動網頁的基本流程是：

1. HTML 提供輸入框、按鈕與顯示區

2. CSS 讓畫面清楚易讀

3. JavaScript 監聽使用者操作

4. JavaScript 檢查資料

5. JavaScript 更新 DOM

只要掌握這個流程，就能做出很多小型工具。

實作步驟

1. 建立輸入框與送出按鈕。

2. 建立一個清單顯示 prompt。

3. 用 JavaScript 選取輸入框、按鈕、清單與提示文字。

4. 點擊按鈕時讀取輸入值。

5. 如果輸入是空的，顯示錯誤提示。

6. 如果輸入有內容，新增到清單並清空輸入框。

Codex Prompt 範例

請幫我用 HTML、CSS、JavaScript 做一個 Prompt 筆記小工具。使用者可以輸入 prompt，按下按鈕後加入清單；如果輸入空白，要顯示錯誤訊息。請使用初學者能理解的寫法，不要使用任何框架。

常見錯誤

• 沒有阻止空白內容加入清單

• 只更新變數，沒有更新畫面

• 每次新增都覆蓋掉舊內容

• 按鈕沒有設定事件監聽

本章練習

請替範例加上「清空全部」按鈕，點擊後移除所有 prompt。

檢查清單

• 我能讀取輸入框的值

• 我能在畫面新增清單項目

• 我能處理空白輸入

• 我能用 Codex 協助新增互動功能

第 8 章：AI Coding 的需求拆解方法

本章目標

這一章會練習把模糊想法拆成 Codex 能執行的小任務。你會學會先規劃，再請 Codex 寫程式，而不是一次把整個需求丟出去。

你會做出什麼

你會做出一個「需求拆解表」，把一個網站想法拆成頁面、區塊、功能、檔案與 prompt。

核心觀念

Codex 的產出品質取決於你的任務描述。好的 AI coding 任務通常包含：

• 目標：我要做什麼

• 使用者：誰會用

• 技術限制：只能用什麼

• 修改範圍：這次只動哪裡

• 驗收標準：怎樣才算完成

需求越清楚，Codex 越容易給出可用結果。

拆解方法

先用五個問題拆需求：

1. 這個網頁是給誰用的？

2. 使用者進來第一眼要看到什麼？

3. 頁面需要哪些區塊？

4. 哪些地方需要互動？

5. 這次只要完成哪一小步？

再把答案整理成 prompt。

Prompt 模板

我要做一個 [網站類型]，使用者是 [目標讀者]。

請先不要寫程式，先幫我拆解：

1. 頁面區塊

2. 需要的 HTML 結構

3. 需要的 CSS 版面

4. 需要的 JavaScript 互動

5. 建議的實作順序

技術限制：只能使用 HTML、CSS、JavaScript。

常見錯誤

• 還沒規劃就要求 Codex 直接寫完整專案

• 沒有說明技術限制

• 沒有指定只修改哪個檔案

• 沒有定義驗收標準

• 一次要求太多互動功能

本章練習

請選一個你想做的小網站，例如個人介紹網站或待辦清單，完成需求拆解表。

檢查清單

• 我能把想法拆成頁面、區塊、功能

• 我能寫出有技術限制的 prompt

• 我能要求 Codex 先規劃再寫程式

• 我能定義完成標準

第 9 章：專案一：個人介紹網站

本章目標

這一章會把前面學到的 HTML、CSS、JavaScript 整合成第一個完整小專案：個人介紹網站。這個網站可以用來介紹你自己、展示技能與放上作品連結。

你會做出什麼

你會完成一個單頁式個人介紹網站，包含：

• 頁首導覽列

• Hero 自我介紹區

• 技能列表

• 作品卡片

• 聯絡區

• 手機版選單

• 點擊作品卡片顯示詳細說明

專案檔案

examples/ch09-personal-site/

index.html

style.css

script.js

先規劃再寫程式

在開始寫程式前，先把網站拆成區塊：

1. 導覽列：連到關於我、技能、作品、聯絡

2. Hero：一句簡短介紹與主要行動按鈕

3. 關於我：說明目前正在學 AI coding

4. 技能：HTML、CSS、JavaScript、Codex 協作

5. 作品：用卡片展示目前練習成果

6. 聯絡：放一段簡單文字與連結

實作步驟

1. 先用 HTML 建立完整內容。

2. 再用 CSS 設計清爽、留白充足的版面。

3. 補上手機版導覽選單。

4. 用 JavaScript 做作品卡片互動。

5. 測試桌面與手機版畫面。

6. 請 Codex 檢查是否有可讀性或結構問題。

Codex Prompt 範例

規劃

我要做一個個人介紹網站，只使用 HTML、CSS、JavaScript。請先不要寫程式，先幫我拆成頁面區塊、每個區塊需要的內容，以及建議的實作順序。

產生 HTML

請只產生 index.html，內容是一個個人介紹網站，包含導覽列、hero、自我介紹、技能、作品卡片、聯絡區。請使用語意化 HTML，不要加入 CSS 和 JavaScript。

改善 CSS

請只修改 style.css，讓這個個人介紹網站呈現清爽、留白充足、淺藍紫色調的視覺風格。卡片圓角不要超過 8px，手機版要一欄排列。

加入互動

請只修改 script.js，加入手機版導覽選單，並讓使用者點擊作品卡片時，在頁面上顯示該作品的詳細說明。

常見錯誤

• 一開始就要求 Codex 同時完成 HTML、CSS、JavaScript

• 作品卡片只有樣式，沒有清楚內容

• 手機版導覽列無法使用

• Hero 標題太抽象，看不出這是誰的網站

• CSS 為了好看加入太多顏色與陰影

本章練習

請把範例網站改成你自己的版本：

• 改成你的名字

• 修改自我介紹

• 把技能改成你目前正在學的內容

• 新增三個自己的練習作品

• 調整聯絡區文字

檢查清單

• 網站可以直接用瀏覽器打開

• 導覽列連結能移動到對應區塊

• 手機版選單可以開合

• 作品卡片點擊後會顯示說明

• HTML、CSS、JavaScript 分工清楚

第 10 章：專案二：待辦清單 App

本章目標

這一章會完成一個待辦清單 App。你會練習把使用者輸入轉成資料，並用 JavaScript 管理新增、完成、刪除與儲存。

你會做出什麼

你會完成一個可用的待辦清單，包含：

• 新增待辦事項

• 標記完成與未完成

• 刪除項目

• 顯示剩餘數量

• 儲存到 `localStorage`

• 重新打開頁面後保留資料

專案檔案

examples/ch10-todo-app/

index.html

style.css

script.js

核心觀念

待辦清單的重點不是畫面，而是資料狀態。每一筆待辦都可以是一個物件：

{

id: 1,

text: "練習 JavaScript",

done: false

}

畫面不是資料本身，畫面是根據資料產生的結果。當資料改變時，就重新渲染清單。

實作步驟

1. 建立輸入框、按鈕、清單與統計文字。

2. 在 JavaScript 建立 `todos` 陣列。

3. 新增項目時，把新物件放進陣列。

4. 寫一個 `renderTodos()` 函式，根據陣列更新畫面。

5. 點擊完成按鈕時，切換 `done` 狀態。

6. 點擊刪除按鈕時，從陣列移除該項目。

7. 每次資料改變後，存到 `localStorage`。

8. 頁面載入時，從 `localStorage` 還原資料。

Codex Prompt 範例

規劃

我要做一個待辦清單 App，只使用 HTML、CSS、JavaScript。請先不要寫程式，請先規劃需要的 HTML 結構、資料格式、JavaScript 函式與實作順序。

實作 JavaScript

請只修改 script.js，幫我實作待辦清單功能：新增、完成切換、刪除、剩餘數量統計，並使用 localStorage 儲存。請用初學者能理解的寫法。

除錯

以下是我的待辦清單 JavaScript。新增項目後畫面沒有更新。請幫我找出原因，先解釋問題，再提供最小修改版本。

常見錯誤

• 只改畫面，沒有改資料陣列

• 改了資料，忘記重新渲染畫面

• 儲存到 `localStorage` 前沒有轉成 JSON 字串

• 讀取 `localStorage` 後沒有轉回陣列

• 每個項目沒有唯一 `id`

本章練習

請替範例加上篩選功能：

• 全部

• 未完成

• 已完成

檢查清單

• 我能用陣列管理多筆資料

• 我能用物件表示單一待辦事項

• 我能根據資料重新渲染畫面

• 我能使用 `localStorage` 保存資料

第 11 章：專案三：簡易計算機

本章目標

這一章會完成一個簡易計算機。你會練習把按鈕輸入轉成程式狀態，處理數字、運算子、結果與錯誤輸入。

你會做出什麼

你會完成一個計算機，包含：

• 數字按鈕

• 加、減、乘、除

• 小數點

• 清除

• 等號計算

• 鍵盤輸入

• 除以 0 的錯誤防護

專案檔案

examples/ch11-calculator/

index.html

style.css

script.js

核心觀念

計算機看起來像是按鈕很多，但核心其實是狀態管理。你需要保存：

• 目前顯示的數字

• 前一個數字

• 目前選擇的運算子

• 是否剛完成計算

本章不使用 `eval()`。雖然 `eval()` 可以快速計算字串，但它不適合初學者理解，也容易帶來安全與除錯問題。

實作步驟

1. 建立顯示區與按鈕區。

2. 用 `data-*` 屬性標記每個按鈕的動作。

3. 在 JavaScript 建立計算機狀態變數。

4. 點擊數字時更新目前顯示。

5. 點擊運算子時保存前一個數字與運算子。

6. 點擊等號時執行計算。

7. 加入清除與小數點處理。

8. 加入鍵盤輸入支援。

Codex Prompt 範例

規劃

我要做一個簡易計算機，只使用 HTML、CSS、JavaScript。請先不要寫程式，先規劃需要的狀態變數、按鈕結構、事件處理與錯誤防護。

實作

請只修改 script.js，實作計算機邏輯。不要使用 eval。功能包含數字、小數點、加減乘除、等號、清除，以及除以 0 的錯誤提示。

加入鍵盤

請只修改 script.js，替計算機加入鍵盤支援：數字鍵、小數點、+、-、*、/、Enter、Backspace、Escape。

常見錯誤

• 連續輸入多個小數點

• 按完等號後再輸入數字時沒有重置

• 運算子切換時狀態沒有更新

• 除以 0 沒有處理

• 用 `eval()` 逃避狀態邏輯

本章練習

請替範例加上百分比 `%` 按鈕，讓目前數字除以 100。

檢查清單

• 我能用變數保存計算機狀態

• 我能處理數字、運算子與等號

• 我能避免除以 0

• 我能加入鍵盤事件

第 12 章：專案四：圖片展示頁

本章目標

這一章會完成一個圖片展示頁。你會練習使用 CSS Grid 建立圖片網格，並用 JavaScript 實作分類篩選與放大視窗。

你會做出什麼

你會完成一個作品展示頁，包含：

• 圖片網格

• 分類按鈕

• 點擊圖片開啟放大視窗

• 關閉按鈕

• 點擊背景關閉

• Escape 鍵關閉

• 手機版一欄排列

專案檔案

examples/ch12-gallery/

index.html

style.css

script.js

核心觀念

圖片展示頁的重點有兩個：

1. CSS Grid：讓多張圖片穩定排列。

2. 狀態切換：根據分類顯示或隱藏項目。

這個範例不依賴外部圖片，而是用 CSS 漸層色塊作為縮圖。這樣可以專注在版面與互動，不需要處理素材來源。

實作步驟

1. 建立分類按鈕。

2. 建立多張圖片卡片，每張卡片有 `data-category`。

3. 用 CSS Grid 排列圖片。

4. 點擊分類按鈕時，只顯示對應分類。

5. 點擊圖片卡片時，開啟 modal。

6. 在 modal 顯示標題、分類與說明。

7. 加入關閉按鈕、背景關閉與 Escape 關閉。

Codex Prompt 範例

規劃

我要做一個圖片展示頁，只使用 HTML、CSS、JavaScript。請先不要寫程式，請先規劃 HTML 結構、CSS Grid 版面、分類篩選邏輯與 modal 開關流程。

實作互動

請只修改 script.js，替圖片展示頁加入分類篩選與 modal。點擊分類按鈕時過濾卡片；點擊卡片時開啟 modal；點擊關閉按鈕、背景或 Escape 時關閉 modal。

常見錯誤

• 分類按鈕的值和卡片 `data-category` 不一致

• modal 開啟後沒有提供關閉方式

• 手機版圖片太小或排列擠在一起

• 只隱藏圖片，沒有更新分類按鈕的 active 狀態

• 鍵盤 Escape 沒有處理

本章練習

請替範例新增一個分類「筆記」，並加入兩張新的展示卡片。

檢查清單

• 我能用 Grid 建立圖片網格

• 我能用 `data-category` 做篩選

• 我能用 JavaScript 開關 modal

• 我能處理滑鼠與鍵盤關閉方式

第 13 章：專案五：學習儀表板

本章目標

這一章會完成一個學習儀表板。你會練習把課程清單、完成狀態、進度條與 localStorage 組合成一個可持續使用的小工具。

你會做出什麼

你會完成一個學習儀表板，包含：

• 課程清單

• 完成狀態切換

• 總進度百分比

• 進度條

• 已完成與未完成統計

• localStorage 保存

• 重置進度

專案檔案

examples/ch13-learning-dashboard/

index.html

style.css

script.js

核心觀念

學習儀表板的核心是「資料驅動畫面」。課程資料放在陣列中，畫面根據陣列和完成狀態產生。當使用者勾選課程時，程式更新狀態、重新計算進度，並把結果保存到 localStorage。

這和真實應用很接近：資料改變，畫面跟著更新。

實作步驟

1. 建立課程資料陣列。

2. 建立儀表板統計區。

3. 根據資料渲染課程清單。

4. 點擊課程按鈕時切換完成狀態。

5. 重新計算完成數量與百分比。

6. 更新進度條寬度。

7. 把完成狀態保存到 localStorage。

8. 加入重置進度按鈕。

Codex Prompt 範例

規劃

我要做一個學習儀表板，只使用 HTML、CSS、JavaScript。請先不要寫程式，請先規劃資料格式、畫面區塊、進度計算方式與 localStorage 儲存方式。

實作

請只修改 script.js，根據課程資料陣列渲染學習清單。使用者點擊課程時切換完成狀態，更新完成數量、百分比、進度條，並保存到 localStorage。

常見錯誤

• 進度條只改文字，沒有改寬度

• 完成狀態存在畫面上，沒有存在資料中

• localStorage 只存一個值，無法對應多個課程

• 重置後沒有重新渲染

• 課程資料和畫面內容重複寫兩份

本章練習

請替範例新增一個「專案篇」分類，並新增第 14 到第 18 章的學習項目。

檢查清單

• 我能用陣列保存課程資料

• 我能根據資料渲染畫面

• 我能計算完成百分比

• 我能用 localStorage 保存多個項目的狀態

第 14 章：如何閱讀與修改 AI 產生的程式碼

本章目標

這一章會建立一套閱讀 AI 程式碼的方法。你會學會先看檔案結構，再看 HTML、CSS、JavaScript 的分工，最後才開始修改。

你會做出什麼

你會完成一個「讀碼練習頁」，可以用按鈕切換不同觀察重點：

• HTML 結構

• CSS 樣式

• JavaScript 互動

• 修改檢查清單

核心觀念

不要把 AI 產生的程式碼當成黑盒子。你不需要一開始就完全理解每一行，但你需要知道：

• 哪些檔案存在

• 每個檔案負責什麼

• 哪個區塊對應畫面上的哪個部分

• 修改前要先確認目前版本可以運作

• 每次只修改一個重點

讀碼順序

建議使用這個順序：

1. 先看專案檔案：有哪些 HTML、CSS、JavaScript。

2. 再看 HTML：頁面有哪些區塊。

3. 再看 CSS：哪些 class 控制版面。

4. 再看 JavaScript：事件從哪裡開始。

5. 最後才修改程式。

修改前檢查

修改前先問自己：

• 這次要改哪個功能？

• 需要改哪個檔案？

• 改完後要怎麼測試？

• 如果壞掉，能不能回到上一個可運作版本？

Codex Prompt 範例

解釋檔案

請先不要修改程式。請閱讀這三個檔案，說明 index.html、style.css、script.js 各自負責什麼，並列出主要區塊。

解釋一段程式

請用初學者能理解的方式解釋這段 JavaScript。請先說明整體目的，再逐段說明事件流程。

安全修改

請只修改 style.css，把卡片間距加大。不要修改 HTML 和 JavaScript。修改後請說明我應該測試哪些畫面。

常見錯誤

• 還沒看懂檔案分工就開始改

• 一次要求 Codex 大幅重構

• 修改 HTML 後忘記同步 CSS 選擇器

• 修改 JavaScript 後沒有測試點擊流程

• 不保存可運作版本

本章練習

請打開前面任一個範例專案，完成以下任務：

1. 寫出三個檔案各自負責什麼

2. 找出一個 HTML 區塊

3. 找出控制該區塊的 CSS

4. 找出一個 JavaScript 事件

5. 只做一個小修改並測試

檢查清單

• 我能說出專案檔案分工

• 我能從 HTML 找到畫面區塊

• 我能從 class 找到 CSS 樣式

• 我能追蹤基本事件流程

• 我能一次只修改一個重點

第 15 章：除錯入門

本章目標

這一章會建立初學者的除錯流程。你會學會看錯誤訊息、定位問題、提出假設、做最小修改，並把錯誤資訊交給 Codex 分析。

你會做出什麼

你會完成一個「除錯工作台」，可以切換常見錯誤案例：

• HTML 連結錯誤

• CSS 選擇器錯誤

• JavaScript 找不到元素

• localStorage JSON 錯誤

每個案例都會顯示錯誤訊息、可能原因、修復方式與 Codex prompt。

核心觀念

除錯不是猜。除錯是一個固定流程：

1. 重現問題

2. 讀錯誤訊息

3. 找到相關檔案

4. 提出可能原因

5. 做最小修改

6. 重新測試

如果要請 Codex 幫忙，不要只說「不能用」。你要提供：

• 你做了什麼

• 預期結果

• 實際結果

• 錯誤訊息

• 相關程式碼

常見錯誤類型

HTML 錯誤

• 檔案路徑錯誤

• 標籤沒有關閉

• `id` 或 `href` 寫錯

CSS 錯誤

• class 名稱不一致

• 選擇器寫錯

• 樣式被後面的規則覆蓋

JavaScript 錯誤

• `querySelector` 找不到元素

• 事件綁定在不存在的元素上

• 變數名稱拼錯

• 資料型別不符合預期

Codex Prompt 範例

我正在除錯一個只使用 HTML、CSS、JavaScript 的網頁。

預期結果：點擊按鈕後新增一筆資料。

實際結果：點擊後沒有反應。

Console 錯誤訊息：Cannot read properties of null。

請先解釋這個錯誤代表什麼，再告訴我應該檢查哪些地方。不要直接重寫整個檔案。

常見錯誤

• 沒有打開 Console

• 只看畫面，不看錯誤訊息

• 一次改很多地方

• 沒有確認錯誤是否真的消失

• 把整個專案丟給 Codex 要它重寫

本章練習

請打開前面任一個範例，故意把一個 `id` 改錯，再用 Console 錯誤訊息找出問題。

檢查清單

• 我能重現問題

• 我能讀 Console 錯誤訊息

• 我能找出相關檔案

• 我能做最小修改

• 我能把錯誤資訊整理成 prompt

第 16 章：建立自己的 AI Coding 工作流程

本章目標

這一章會把前面學到的技能整理成固定工作流程。你會學會從目標開始，拆解任務、限制範圍、讓 Codex 協助、測試結果，並保留可運作版本。

你會做出什麼

你會完成一個「AI Coding 工作流程產生器」，輸入目標後產生：

• 任務摘要

• 實作順序

• Codex prompt

• 測試清單

• 完成標準

核心觀念

穩定的 AI coding 流程比單次 prompt 更重要。好的流程可以降低改壞專案的機率，也能讓你更清楚地和 Codex 協作。

建議流程：

1. 描述目標

2. 拆解功能

3. 限制技術

4. 指定修改檔案

5. 小步實作

6. 立即測試

7. 保存可運作版本

8. 再進行下一步

工作節奏

每次和 Codex 協作時，盡量遵守：

• 一次只改一個功能

• 一次只改必要檔案

• 修改前先說明現況

• 修改後立刻測試

• 錯誤訊息完整保留

• 不懂的程式先請 Codex 解釋

Codex Prompt 模板

我正在做一個只使用 HTML、CSS、JavaScript 的專案。

目前目標：[目標]

這次範圍：[只改哪個功能]

允許修改：[檔案名稱]

不要修改：[不想動的檔案或功能]

完成標準：[如何確認完成]

請先簡短說明修改計劃，再提供程式碼。

常見錯誤

• 還沒測試就連續加功能

• 一次要求 Codex 改太多檔案

• 沒有寫完成標準

• 出錯後直接要求重寫

• 沒有保存能運作的版本

本章練習

請選一個前面的範例，使用本章流程做一次小改版。例如：

• 替待辦清單新增「清空完成項目」

• 替圖片展示頁新增新分類

• 替學習儀表板新增一個章節

檢查清單

• 我能寫出目標、範圍與完成標準

• 我能限制 Codex 只修改指定檔案

• 我能小步修改並測試

• 我能把錯誤整理成可用 prompt

第 17 章：期末專案：個人作品集網站

本章目標

這一章會把前面完成的作品整理成一個個人作品集網站。你會練習規劃首頁、作品區、關於我區與聯絡區，並用 JavaScript 加入專案篩選與詳情顯示。

你會做出什麼

你會完成一個可以作為學習成果展示入口的作品集網站，包含：

• 清楚的個人定位

• 前端技能摘要

• 作品卡片

• 作品分類篩選

• 點擊作品顯示細節

• 手機版導覽

• 聯絡行動區

專案檔案

examples/ch17-portfolio/

index.html

style.css

script.js

核心觀念

作品集不是把所有東西都塞進頁面，而是讓訪客快速理解三件事：

1. 你正在學什麼

2. 你做出了哪些作品

3. 每個作品證明了什麼能力

每張作品卡片都應該包含：作品名稱、練習重點、使用技術、可以展示的成果。

實作步驟

1. 先列出要放進作品集的專案。

2. 替每個專案寫一句重點說明。

3. 建立首頁 Hero，說明你正在學 AI coding。

4. 建立技能區與作品區。

5. 用 JavaScript 做作品分類篩選。

6. 點擊作品時顯示詳細說明。

7. 檢查手機版閱讀體驗。

8. 請 Codex 幫你檢查文字是否清楚。

Codex Prompt 範例

我要做一個個人作品集網站，只使用 HTML、CSS、JavaScript。內容要展示我在 AI coding 入門書中完成的作品：個人介紹網站、待辦清單 App、簡易計算機、圖片展示頁、學習儀表板。請先規劃頁面區塊與作品卡片內容，不要直接寫程式。

請只修改 script.js，替作品集網站加入作品分類篩選與詳情面板。點擊分類按鈕時過濾作品；點擊作品卡片時顯示作品名稱、技術與學到的能力。

常見錯誤

• 作品只有標題，沒有說明學到什麼

• 首頁標題太抽象

• 卡片太多資訊，難以掃讀

• 手機版卡片擠在一起

• 分類篩選後沒有更新 active 狀態

本章練習

請把範例改成你的版本：

• 改成你的名字

• 改寫自我介紹

• 替每個作品補上真實心得

• 新增一個你自己的作品

• 調整聯絡區內容

檢查清單

• 首頁能清楚說明你是誰

• 每張作品卡片都有重點說明

• 作品分類可以正常篩選

• 點擊作品可以看到細節

• 手機版能正常閱讀

第 18 章：下一步學什麼

本章目標

這一章會替你的 AI coding 入門學習收尾，並規劃下一階段。你已經用 HTML、CSS、JavaScript 和 Codex 完成多個作品，下一步不是急著追所有新工具，而是選一條清楚路線繼續累積。

你會做出什麼

你會完成一個「下一步學習路線圖」，包含：

• Git 與 GitHub

• API 基礎

• 部署網站

• 前端框架

• 作品集深化

• AI coding 工作流程升級

核心觀念

學完本書後，你應該先穩住三件事：

1. 能讀懂自己的 HTML、CSS、JavaScript

2. 能用 Codex 協助，但不盲目複製

3. 能完成、測試、展示小型作品

接下來的學習應該圍繞作品展開。每學一個新工具，就拿它改善一個既有作品。

建議學習順序

1. Git 與 GitHub

先學會版本控制，保存每一次可運作版本。這會讓你更敢修改，也更適合和 Codex 協作。

2. API 基礎

學會從外部資料來源取得資料，讓你的網頁不只顯示固定內容。

3. 部署

把作品放到線上，讓別人可以打開你的網站。

4. 前端框架

當你已經熟悉 HTML、CSS、JavaScript，再考慮 React 或其他框架。框架不是起點，而是用來管理更複雜介面的工具。

5. 作品集深化

把前面的作品整理、改版、補說明、加截圖，讓作品集更像真正的學習成果。

Codex Prompt 範例

我已經完成一本 AI coding 入門書的 HTML、CSS、JavaScript 專案。請幫我規劃下一階段 4 週學習路線，主題包含 Git/GitHub、API、部署、作品集改版。請每週給我一個明確成果。

請檢查我的作品集網站，幫我列出下一步最值得改進的 5 件事。請依照影響程度排序，並說明為什麼。

常見錯誤

• 還沒熟悉基礎就急著學框架

• 學了很多工具但沒有作品

• 沒有使用版本控制

• 作品沒有部署，無法展示

• 每次都開新專案，沒有深化舊作品

本章練習

請選擇一個已完成作品，規劃下一版：

• 要改善什麼

• 需要學哪個新技能

• 預計修改哪些檔案

• 如何確認完成

檢查清單

• 我知道下一步不是盲目追工具

• 我知道 Git/GitHub 的重要性

• 我知道 API 可以讓作品接外部資料

• 我知道部署能讓作品被看見

• 我能用既有作品安排下一階段學習

附錄 A：常用 Codex Prompt 模板

產生頁面

請幫我產生一個只使用 HTML、CSS、JavaScript 的 [頁面類型]。

請先提供檔案結構，再分別提供 index.html、style.css、script.js。

風格要清爽、留白充足、適合初學者閱讀。

解釋程式碼

請用初學者能理解的方式解釋這段程式碼。

請先說明整體目的，再分段說明每個區塊在做什麼。

修改樣式

請只修改 style.css。

目標是讓頁面更清爽、留白更明確、手機版更好閱讀。

不要修改 HTML 和 JavaScript。

找出錯誤

我的網頁出現錯誤。

預期結果：[寫下預期]

實際結果：[寫下實際狀況]

Console 錯誤：[貼上錯誤訊息]

請先解釋可能原因，再提供最小修改方式。

重構程式碼

請幫我重構這段 JavaScript。

要求：

1. 不改變原本功能

2. 函式名稱清楚

3. 初學者可以理解

4. 請說明修改前後差異

加入新功能

我想加入 [功能名稱]。

目前專案只使用 HTML、CSS、JavaScript。

請先規劃需要修改哪些檔案，不要直接寫程式。

確認後再提供最小修改版本。

附錄 B：HTML 常用標籤速查

基本結構

• `<!doctype html>`：宣告 HTML 文件

• `html`：整份 HTML 文件

• `head`：頁面設定與資源

• `body`：實際顯示內容

• `title`：瀏覽器分頁標題

• `meta`：編碼與響應式設定

• `link`：載入 CSS

• `script`：載入 JavaScript

內容標籤

• `h1` 到 `h6`：標題

• `p`：段落

• `a`：連結

• `img`：圖片

• `ul`、`ol`、`li`：清單

• `strong`：重要文字

• `code`：程式碼片段

語意化區塊

• `header`：頁首

• `nav`：導覽

• `main`：主要內容

• `section`：主題區塊

• `article`：可獨立閱讀內容

• `footer`：頁尾

表單

• `form`：表單

• `label`：欄位標籤

• `input`：輸入欄位

• `textarea`：多行文字

• `button`：按鈕

• `select`、`option`：下拉選單

常用屬性

• `class`：給 CSS 與 JS 使用的分類名稱

• `id`：唯一元素名稱

• `href`：連結目標

• `src`：資源位置

• `alt`：圖片替代文字

• `type`：輸入或按鈕類型

• `data-*`：自訂資料

附錄 C：CSS 常用屬性速查

文字

• `color`：文字顏色

• `font-family`：字體

• `font-size`：字體大小

• `font-weight`：字重

• `line-height`：行高

• `text-align`：對齊

盒模型

• `width`、`height`：寬高

• `margin`：外距

• `padding`：內距

• `border`：邊框

• `border-radius`：圓角

• `box-sizing`：盒模型計算方式

背景與視覺

• `background`：背景

• `box-shadow`：陰影

• `opacity`：透明度

• `overflow`：超出範圍處理

排版

• `display`：顯示模式

• `flex`：彈性排版

• `grid-template-columns`：Grid 欄位

• `gap`：間距

• `align-items`：垂直對齊

• `justify-content`：水平分配

響應式

@media (max-width: 800px) {

.grid {

grid-template-columns: 1fr;

}

常用初始設定

* {

box-sizing: border-box;

}

body {

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

附錄 D：JavaScript 常用語法速查

變數

const name = "AI Coding";

let count = 0;

選取元素

const button = document.querySelector("#button");

const cards = document.querySelectorAll(".card");

事件

button.addEventListener("click", () => {

console.log("clicked");

});

修改文字與 class

title.textContent = "新的標題";

card.classList.add("active");

card.classList.remove("hidden");

card.classList.toggle("open");

陣列

const items = ["HTML", "CSS", "JavaScript"];

items.forEach((item) => {

console.log(item);

});

物件

const todo = {

id: 1,

text: "練習 JavaScript",

done: false

};

localStorage

localStorage.setItem("todos", JSON.stringify(todos));

const todos = JSON.parse(localStorage.getItem("todos")) || [];

建立元素

const item = document.createElement("li");

item.textContent = "新項目";

list.append(item);

附錄 E：初學者常見錯誤清單

HTML

• CSS 檔名寫錯：`style.css` 寫成 `styles.css`

• JavaScript 沒有載入：忘記加 `<script src="script.js"></script>`

• `id` 和 JavaScript 選取名稱不一致

• 標籤沒有正確關閉

• 連結 `href` 寫錯

CSS

• HTML class 是 `card`，CSS 寫成 `.cards`

• 忘記加 `box-sizing: border-box`

• 固定寬度導致手機版超出畫面

• 樣式被後面的規則覆蓋

• 使用太多顏色與陰影，畫面變亂

JavaScript

• `querySelector` 找不到元素，回傳 `null`

• script 載入時機太早

• 變數拼字不一致

• 改了資料但沒有重新渲染畫面

• localStorage 讀寫時忘記 `JSON.stringify` 或 `JSON.parse`

AI Coding

• 一次要求 Codex 做太多事

• 沒有限制技術範圍

• 沒有指定修改檔案

• 沒有提供錯誤訊息

• 看不懂程式碼就直接貼上

除錯檢查順序

1. 確認檔案有儲存

2. 重新整理瀏覽器

3. 打開 Console

4. 看錯誤訊息

5. 找到相關檔案

6. 做最小修改

7. 再次測試

附錄 F：AI Coding 術語表

AI Coding

用 AI 協助規劃、產生、修改、解釋與除錯程式碼的工作方式。人仍然負責目標、判斷與測試。

Codex

協助寫程式的 AI coding 工具。可以根據需求產生程式碼、解釋程式、找錯與提出修改建議。

Prompt

你交給 AI 的任務描述。好的 prompt 通常包含目標、限制、範圍、輸出格式與完成標準。

HTML

負責網頁內容與結構的語言，例如標題、段落、連結、表單與頁面區塊。

CSS

負責網頁視覺樣式的語言，例如顏色、字體、間距、卡片、版面與響應式設計。

JavaScript

負責網頁互動的程式語言，例如按鈕點擊、表單處理、資料更新與畫面變化。

DOM

瀏覽器把 HTML 轉成可被 JavaScript 操作的物件結構。JavaScript 可以透過 DOM 找到元素並修改畫面。

Event

使用者或瀏覽器觸發的事件，例如 click、input、submit、keydown。

localStorage

瀏覽器提供的本機儲存空間，可以保存少量文字資料，常用來保存待辦清單或學習進度。

JSON

常用資料格式。JavaScript 物件或陣列要存進 localStorage 時，通常會先轉成 JSON 字串。

Render

根據資料產生或更新畫面的過程。資料改變後重新 render，畫面才會跟著更新。

State

程式目前保存的狀態，例如待辦清單陣列、目前篩選分類、計算機目前數字。

Debug

找出錯誤原因並修正的過程。常見步驟是重現問題、看 Console、定位檔案、做最小修改。

Console

瀏覽器開發者工具中的訊息面板，可以顯示 JavaScript 錯誤、警告與 `console.log` 輸出。

Responsive Design

響應式設計，讓網頁在手機、平板與桌面都能正常閱讀與操作。

Refactor

重構，在不改變功能的前提下整理程式碼，讓程式更清楚、更容易維護。

AI Coding 入門

第 1 章：什麼是 AI Coding

本章目標

你會做出什麼

核心觀念

AI 與人的分工

實作步驟

Codex Prompt 範例

常見錯誤

本章練習

檢查清單

第 2 章：準備開發環境

本章目標

你會做出什麼

核心觀念

建立專案

實作步驟

Codex Prompt 範例

常見錯誤

本章練習

檢查清單

第 3 章：第一次和 Codex 協作

本章目標

你會做出什麼

核心觀念

協作流程

Codex Prompt 範例

產生程式

解釋程式

修改程式

常見錯誤

本章練習

檢查清單

第 4 章：HTML 基礎與頁面結構

本章目標

你會做出什麼

核心觀念

常用標籤

實作步驟

Codex Prompt 範例

常見錯誤

本章練習

檢查清單

第 5 章：CSS 基礎與畫面設計

本章目標

你會做出什麼

核心觀念

常用 CSS

實作步驟

Codex Prompt 範例

常見錯誤

本章練習

檢查清單

第 6 章：JavaScript 基礎

本章目標

你會做出什麼

核心觀念

常用語法

實作步驟

Codex Prompt 範例

常見錯誤

本章練習

檢查清單

第 7 章：讓網頁動起來

本章目標

你會做出什麼

核心觀念

實作步驟

Codex Prompt 範例

常見錯誤

本章練習

檢查清單

第 8 章：AI Coding 的需求拆解方法

本章目標

你會做出什麼

核心觀念

拆解方法

Prompt 模板

常見錯誤

本章練習