用 Codex 做出第一個網頁，
在自己的電腦打開

1. PHASE 01認識 Vibe Coding 和工具
2. PHASE 02第一次做出東西
3. PHASE 03規劃你的產品
4. PHASE 04做出小店預約
5. PHASE 05上線前要懂的事
6. PHASE 06換成你的點子
7. PHASE 07往商用產品前進

你現在在這裡：第 2 階段的第一課。上一課裝好了 Codex，這一課第一次請它做出東西。

怎麼用 Codex 做出第一個網頁？

先在電腦上建一個空資料夾，在 Codex 打開它，再貼一段話請它做網頁。Codex 會在資料夾裡寫好一個網頁檔案，你用瀏覽器打開，就看得到自己的小店名稱。整個過程不用自己寫程式。

網頁檔案是什麼

網頁檔案像一張註明了排版的菜單原稿：上面寫著「這行是大標題、這行是小字」，瀏覽器照著註明把它排好給你看。它的正式名稱是 HTML 檔，檔名結尾是 .html。HTML 入門 ↗

為什麼先建資料夾

資料夾就是 Codex 的工作桌。你在 App 裡打開哪個資料夾，Codex 就在那裡讀檔案、改檔案，做出來的東西都集中在同一個地方，不會和電腦裡其他檔案混在一起。官方說明 ↗

這個網頁是暖身，讓你先完整做成一次。第 05 課會用 VS Code 打開它、自己改一個字；真正的小店預約從第 07 課的起點包重新開始做。

成果預覽：你的第一個網頁

你的網頁不會和這張一模一樣，Codex 每次寫的都不同。看得到自己的店名，就是做對了。

上課前：準備好這三樣

Codex

第 03 課裝好、登入的 ChatGPT 桌面 App。

小店名稱

想一個小店名稱，真的或想像的都可以，例如「小森髮廊」。網頁上會用大字寫出它。

瀏覽器

Mac 內建的 Safari 就可以，用 Chrome 也行。

這兩步要你自己按

資料夾要建在哪裡、要讓 Codex 碰哪個資料夾，由你決定。

步驟 1在「文件」裡建一個 my-shop 資料夾

1. 打開 Finder，點左邊的「文件」。
2. 從上方選單按「檔案」→「新增檔案夾」，名稱打 my-shop。

做完應看到：「文件」裡多了一個空的 my-shop 資料夾。

為什麼名稱用英文：資料夾名稱用英文小寫、不加空格，之後各種工具處理起來比較不會出錯。

步驟 2在 App 打開 my-shop 資料夾

1. 打開 ChatGPT 桌面 App。
2. 選擇要在哪裡工作時，選「打開資料夾」，再選剛建好的 my-shop。

做完應看到：App 顯示你正在 my-shop 這個資料夾裡工作。

如果找不到「打開資料夾」：選項可能是英文，找有「Folder」字樣的按鈕。

Windows：用檔案總管在「文件」裡新增資料夾，一樣命名為 my-shop。

操作步驟：請 Codex 做出網頁

步驟 1切到 Codex，開新對話

1. 確認上方下拉選單選的是「Codex」。
2. 在 my-shop 資料夾裡按「New chat」開新對話。

做完應看到：新對話的畫面標示著 my-shop。

步驟 2貼上提示詞，換成你的店名

1. 按「複製」，貼到輸入框。
2. 把「（換成你的小店名稱）」改成你的店名，送出。

請在這個資料夾做一個最簡單的網頁，檔名叫 index.html。
網頁上用大字寫店名「（換成你的小店名稱）」，下面一行寫「營業時間：每天 10:00–19:00」，再加一句歡迎客人的話。
只要這一個檔案，不要用其他工具或套件。做好後告訴我怎麼打開它。

複製

做完應看到：Codex 回報做好了 index.html，也告訴你怎麼打開。

如果 Codex 先問你同不同意：它要建立檔案或執行動作前，可能會先問你。看清楚它要做什麼、是不是在 my-shop 裡，再同意。

步驟 3用瀏覽器打開網頁

1. 在 Finder 打開 my-shop 資料夾，雙擊 index.html。

做完應看到：瀏覽器打開你的網頁，看得到店名和營業時間。

如果打開的是一堆 < > 符號：請看下面的「卡住時怎麼辦」。

看一下瀏覽器的網址列：開頭是 file://，代表這個網頁是從你自己的電腦打開的，只有這台電腦看得到。讓別人也能用，是上線要做的事，第 18 課會講。

成果檢查

成功的樣子：

• my-shop 資料夾裡有一個 index.html。
• 用瀏覽器打開後，看得到我的店名和營業時間。
• 網址列開頭是 file://。

還沒成功的樣子：資料夾是空的、雙擊後打開的是文字編輯器，或網頁上的中文變成亂碼。照下面「卡住時怎麼辦」處理。

還是做不出來也沒關係：下載本課的進度存檔，解開後就是做好的 my-shop 資料夾，放進「文件」裡，第 05 課接著用。

下載第 04 課的進度存檔（04.zip）

卡住時怎麼辦

my-shop 資料夾裡找不到 index.html

把這段貼給 Codex：

我在 my-shop 資料夾裡找不到 index.html。請告訴我你把檔案存在哪裡；如果不在 my-shop 裡，請把它放進來。

雙擊後打開的是一堆 < > 符號

檔案被文字編輯器打開了。在 index.html 上按右鍵，選「打開檔案的應用程式」→「Safari」。

網頁上的中文變成亂碼

網頁上的中文變成亂碼，請幫我修好，改完告訴我改了什麼。

改好後，回瀏覽器按 ⌘R 重新整理（Windows 按 Ctrl + R）。

Codex 說它不能建立檔案

確認有照「這兩步要你自己按」的步驟 2 打開 my-shop 資料夾，而且這個對話是在 my-shop 裡開的。不確定的話，重新打開資料夾、開新對話，再貼一次提示詞。

練習：請 Codex 改一個地方

請把營業時間改成「週一公休，週二到週日 11:00–20:00」，再加一行電話「（換成你的店電話）」。

常見問題