前三篇，我先決定了要做「泰語小旅伴」，接著整理 App 的需求，也弄清楚 ChatGPT 和 Codex 要怎麼分工。

接下來，終於要開始建立專案了。

不過，對完全沒有寫過程式的我來說，光是「建立專案」這四個字，就已經有很多不懂的地方。

我知道這次打算使用 HTML、CSS 和 JavaScript，但這三個東西到底各自負責什麼？為什麼一個 App 要拆成好幾個檔案？

既然前面已經決定先和 ChatGPT 討論、理解，再交給 Codex 實作，那就從最基本的專案骨架開始吧。

第一個任務：先建立能運作的專案

前面雖然已經規劃了五個旅遊情境，也想加入發音、單字卡和測驗，但這次沒有把所有功能一次交給 Codex。

我先把目標縮小成一件事：

建立「泰語小旅伴」的基本專案，讓網頁可以正常顯示。

這個階段不需要真的能學泰語，也不需要測驗或學習進度。只要先把專案需要的檔案建立起來，確認它們可以正常運作，就能繼續往下做。

Codex 建立完成後，專案的資料夾結構是這樣：

thai-buddy/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
├── data/
│   └── lessons.js
├── assets/
│   ├── images/
│   └── icons/
└── README.md

另外還有 .gitignore，但這次先把注意力放在最主要的幾個檔案上。

第一次看到這種資料夾結構，我還是覺得很陌生。明明只是想做一個泰語學習 App，為什麼會需要這麼多檔案？

所以接下來，我先從 index.html、style.css 和 app.js 開始理解。

HTML：決定畫面上有什麼

先從 index.html 開始。

和 ChatGPT 討論後，我先把 HTML 理解成：負責網頁的內容與結構。

例如「泰語小旅伴」的標題、說明文字，以及之後要出現的課程卡片，都需要有地方放。

可以先把 HTML 想成是在安排畫面裡有哪些東西，以及它們彼此的關係。

這次 Codex 建立的最初首頁很簡單，主要只有：

• 泰語小旅伴
• Thai Buddy
• 從旅行情境開始學實用泰語

畫面上還出現了泰文「สวัสดี」。

這時候的網頁還沒有完整課程，也沒有真正可以操作的學習功能，但至少已經有了第一個看得見的畫面。

我也開始理解，如果之後想調整畫面上有哪些文字或內容，HTML 就是需要認識的地方之一。

CSS：決定畫面長什麼樣子

接下來是 css/style.css。

如果說 HTML 負責畫面上有什麼，那 CSS 就是在處理這些東西要怎麼呈現。

例如文字的顏色、大小、間距，以及整個畫面的排列方式，都可以透過 CSS 調整。

這次 Codex 建立的初始畫面使用淡藍色設計，並且以手機優先的方式安排版面，符合我們前面討論過的需求。

因為「泰語小旅伴」主要希望讓使用者在手機上使用，所以畫面也要先考慮手機的閱讀方式。

透過這次的專案，我開始理解 HTML 和 CSS 雖然都會影響最後看到的畫面，但負責的事情不太一樣。

HTML 比較像先把內容放上去，CSS 再決定內容應該怎麼排列、呈現。

之後如果要把簡單的歡迎畫面改成更像手機 App 的首頁，就需要繼續調整這兩個部分。

JavaScript：讓網頁開始有反應

第三個檔案是 js/app.js。

ChatGPT 幫我整理的簡單概念是：JavaScript 可以負責網頁的行為與互動。

例如之後點擊「基本問候」，要能進入課程；點擊返回按鈕，要能回到首頁。這些事情就不只是把文字顯示出來而已。

不過，第一個專案還沒有做到這些功能。

當時的 app.js 只有先放入一個載入確認訊息：

console.log("Thai Buddy 已載入");

這是我第一次透過自己的專案接觸 console.log()。

簡單來說，它可以把訊息輸出到瀏覽器的 Console，而不是直接顯示在網頁畫面上。

Console 可以先理解成瀏覽器提供的訊息視窗，之後檢查程式有沒有正常執行、是否出現錯誤，都會用到它。

這次的目的很單純，就是先確認 JavaScript 有沒有成功載入並執行。

至於怎麼寫點擊事件、怎麼切換課程畫面，現在還不需要一次全部搞懂。

那其他檔案又是做什麼的？

除了 HTML、CSS 和 JavaScript，Codex 還建立了幾個檔案與資料夾。

其中比較特別的是 data/lessons.js。

它是預留給泰語教材使用的資料檔，但這個階段還沒有放入真正的課程內容。

前面 Day 2 討論需求時，我們已經決定每句教材需要中文、泰文、羅馬拼音等資訊，所以先留一個位置，之後再把教材加進去。

另外，assets/images/ 和 assets/icons/ 分別預留給圖片與圖示；README.md 則用來記錄專案的基本說明。

目前不需要把每個檔案都研究得很深入，我先把最重要的概念整理成：

index.html
→ 畫面有什麼內容

style.css
→ 畫面長什麼樣子

app.js
→ 畫面可以做什麼

lessons.js
→ 保存泰語教材資料

至少這樣一來，之後看到 Codex 說它修改了某個檔案，我就比較能理解那次修改大概是在處理什麼。

Codex 說完成了，我要怎麼驗收？

專案建立完成後，接下來就是驗收。

畢竟這次的目標不是讓 Codex 產生幾個檔案就好，而是要確認它們真的能夠運作。

我先在瀏覽器打開首頁，並把畫面截圖貼回 ChatGPT 討論。

畫面確實出現了「泰語小旅伴」、「Thai Buddy」和歡迎文字，代表最初的網頁已經可以顯示。

接著，我也打開瀏覽器的 Console，看到：

Thai Buddy 已載入

這個訊息就是前面放在 app.js 裡的內容。

因此，除了確認 HTML 能正常顯示、CSS 有呈現出畫面樣式，也確認了 JavaScript 成功執行到這行程式。

這次驗收的範圍其實很小，但也讓我第一次理解，原來檢查程式不一定要等到所有功能完成。

像這次就可以分別確認：

• HTML 有沒有正常顯示？
• CSS 有沒有呈現出預期的樣式？
• JavaScript 有沒有成功執行？

把問題拆小之後，我至少知道自己正在確認什麼，而不是只看 Codex 回報一句「完成」，就直接進入下一個功能。

當然，這只能證明目前檢查的部分正常，還不能代表整個 App 已經完成。

今天學到什麼？

今天終於建立了「泰語小旅伴」的第一個專案，也第一次透過自己的專案理解 HTML、CSS 和 JavaScript 各自負責什麼。

它們不再只是三個常常一起出現，但我不知道差在哪裡的名字。

目前我先用最簡單的方式記住：

HTML 管內容與結構，CSS 管外觀，JavaScript 負責行為與互動。

當然，這只是方便自己入門的理解方式，真正的程式還有很多細節需要慢慢學。

而且今天最初的成果，其實也還不是功能完整的 App。它只是一個可以打開、有畫面，並且確認 JavaScript 有成功載入的網頁。

但對從零開始的我來說，至少已經跨出了第一步。

不過，事情還沒有這麼順利。

因為直接打開 index.html 之後，我也在瀏覽器的 Console 裡遇到了一個看不懂的訊息：

Unsafe attempt to load URL file:///...

明明首頁已經顯示出來了，為什麼瀏覽器還會出現這個訊息？

後來我才知道，原來「網頁打得開」和「開發環境已經準備好」，並不是同一回事。

這就是下一篇要處理的問題。