# 第 2 章：準備開發環境
## 本章目標
這一章會建立第一個前端專案資料夾，並認識 HTML、CSS、JavaScript 三個檔案的分工。
## 你會做出什麼
你會做出一個可以在瀏覽器打開的簡單網頁，包含標題、說明文字與一個按鈕。
## 核心觀念
前端專案最基本的三個檔案是：
- `index.html`：負責頁面內容與結構
- `style.css`：負責顏色、間距、字體與版面
- `script.js`：負責互動行為
這三個檔案放在同一個資料夾中，就能形成一個最小可執行的網頁專案。
## 建立專案
在 VS Code 中建立資料夾：
```text
examples/ch02-first-page/
```
裡面放三個檔案：
```text
index.html
style.css
script.js
```
### 基礎程式碼 (Boilerplate)
這三個檔案一開始不是空白的。你可以把這三段程式碼當作起手式，複製貼上到對應的檔案中：
**1. `index.html`**
負責告訴瀏覽器這是一個網頁，並載入 CSS 和 JS：
```html
我的第一個網頁
歡迎來到 AI Coding
```
**2. `style.css`**
讓畫面不要太單調：
```css
body { font-family: sans-serif; text-align: center; margin-top: 50px; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
```
**3. `script.js`**
負責按鈕點擊後的魔法：
```javascript
// 這裡目前是空的，等一下我們要寫互動邏輯
```
## 實作步驟
1. 建立 `index.html`，放入頁面基本結構。
2. 建立 `style.css`，設計乾淨的畫面。
3. 建立 `script.js`，讓按鈕點擊後改變文字。
4. 用瀏覽器打開 `index.html`。
5. 修改文字，再重新整理瀏覽器確認結果。
## Codex Prompt 範例
```text
請幫我建立一個初學者用的第一個網頁專案，只使用 HTML、CSS、JavaScript。請分別提供 index.html、style.css、script.js，功能是點擊按鈕後改變畫面文字。
```
## 常見錯誤
* **[錯誤] CSS 檔名和 HTML 連結不一致**
**[解法]**：確保 `` 中的檔名與資料夾內完全一致（注意大小寫）。
* **[錯誤] JS 沒有用 ``。
* **[錯誤] 修改後忘記儲存**
**[解法]**：VS Code 頁籤上有圓點代表未存檔，請養成隨手按 `Ctrl + S` 的習慣。
* **[錯誤] 瀏覽器沒有重新整理**
**[解法]**：存檔後記得切換回瀏覽器按下 `F5` 才能看到最新畫面。
## 本章練習
請修改範例專案：
- 把標題改成你的名字
- 把按鈕文字改成「開始學習」
- 點擊後顯示「我正在用 Codex 學 AI coding」
## 檢查清單
- 我能建立 `index.html`、`style.css`、`script.js`
- 我知道三個檔案各自負責什麼
- 我能用瀏覽器打開本機網頁
- 我能修改內容並看到結果