完成第一個小專案

返回 Codex 教學總目錄

讀完能做到什麼

開始之前：拿到正確版本

下載Small Steps 練習材料，解壓縮後會看到 start、broken、expected。這篇只複製 expected，將副本命名為 codex-first-site，保留解壓縮的原版。start 的篩選尚未完成，broken 故意有錯，兩者留給後續課程；不要把三個資料夾合併，以免不知道自己正在驗證哪一版。

副本根目錄直接包含 index.html、style.css、app.js、core.mjs、core.test.mjs。HTML 是畫面結構，CSS 是樣式，app.js 串接瀏覽器互動，core.mjs 處理資料，test 檔負責檢查核心行為。這些檔案不用先全部看懂，但必須確認都存在。本篇需要可用的 Codex、Node.js 與 Python 3；已有工具就不重灌，只核對命令可執行。

Windows 在這個資料夾開啟 PowerShell，macOS／Linux 開啟終端機；不熟位置確認時先讀終端機與路徑。Windows 用 py --version，macOS／Linux 用 python3 --version，三個平臺都用 node --version。找不到命令時先安裝對應工具並重開終端機；這個範例沒有 package.json，因此不使用 npm install 或 npm test。

第一步：先確認修改前能運作

在副本根目錄執行核心測試，應有三個測試通過、零失敗。這是「修改前」的證據；如果現在已失敗，先核對是否誤用了 start 或 broken，或缺少檔案。不要在壞掉的基礎上要求 Codex 同時改畫面和修所有錯誤，否則無法判斷哪個結果來自哪項需求。

node --test core.test.mjs

Windows 用下方命令啟動預覽。這個終端機會持續顯示伺服器日誌，先保留它，不要等待它自動回到提示符號；需要執行別的命令時另開終端機。命令只繫結本機的 127.0.0.1。

py -m http.server 4173 --bind 127.0.0.1

macOS 或 Linux 用下方等效命令。兩段選自己的平臺其中一段執行，不能同時佔用 4173。若該埠已被自己的另一個練習使用，先停止已確認的那個伺服器，或改用 4174 並在後續網址保持一致。

python3 -m http.server 4173 --bind 127.0.0.1

瀏覽器開啟 http://127.0.0.1:4173。若這個來源已有想保留的虛構任務，先另行記錄；展開 About this exercise，選 Reset practice data，再切到 All tasks 並確認清單為空。這只清除練習資料，不會還原程式檔。接著新增 Read、Build，勾選 Read；Completed 應只看到 Read，Active 應只看到 Build。重新整理確認狀態仍在。直接雙擊 index.html 可能因 file 網址限制無法載入模組，請使用剛啟動的 http 網址。

第二步：先讓 Codex 讀取，再下修改要求

桌面版選 codex-first-site 建立任務；CLI 則在副本根目錄啟動。先要求只讀取五個檔案並摘要用途、回報工作目錄與測試命令，暫不修改。確認它知道這是沒有套件安裝步驟的靜態網站，再送出下方完整需求。即使是小修改，也要把「要保留的功能」一起交代。

Work only in this codex-first-site practice folder.
1. In index.html, set the h1 text to "Small steps, clear progress."
2. In style.css, set the :root background to #fff8ed.
Keep all todo behavior, labels, storage keys and data formats unchanged.
Do not add packages or external requests. Do not deploy the site.
Run node --test core.test.mjs.
Check the page at 390px and 1280px if browser access is available.
Report changed files, checks performed and any checks not run.

理想的差異只有 index.html 的 h1 文字與 style.css 的背景色；不是整份 HTML 被重建，也不是資料程式被換成另一套框架。Codex 若說沒有瀏覽器工具，應把畫面檢查列為未執行，你仍可自行完成。不要要求它為了聲稱檢查通過而猜測畫面，或把沒有錯誤訊息當成視覺驗收。

第三步：自己驗證成果

重新讀取兩個檔案，核對指定字串與色碼；再次執行核心測試並保留測試結果。瀏覽器重新整理後看標題、背景與原來的 Read、Build。縮到約 390px 再看一次，頁面不應出現整頁橫向捲動；放大到 1280px 檢查內容寬度。窄視窗驗證響應式版面，不代表真的測過 iPhone 或 Android。

再做兩個邊界測試：只輸入空白不能新增；把下方樣本輸入待辦欄位後，畫面應顯示原始文字，不應把它當成圖片。用 Tab 移動到輸入框、按鈕、篩選與核取方塊，應有可見焦點。這些檢查確認小幅畫面修改沒有順手破壞資料處理或鍵盤操作；核心測試不會自動涵蓋 CSS 外觀，所以兩種證據都要看。

<img src=x>

常見問題、停止與還原

頁面變成資料夾清單，表示伺服器從太外層啟動；停止它，移入直接包含 index.html 的副本，再啟動。Port 被佔用時不要亂停其他服務，先找自己的預覽或換埠。改了檔案畫面沒變，先確認儲存、網址、資料夾與重新整理；換了埠會使用不同的瀏覽器儲存來源，待辦消失不一定是程式刪掉資料。

停止預覽是在執行 Python 的終端機按 Ctrl+C。還原時只從保留的 expected 原版取回這次改過的 index.html 與 style.css，或手動恢復兩行；不要刪除瀏覽器全部資料。若要清除練習待辦，頁面 About this exercise 裡的 Reset practice data 只處理本例的儲存鍵。先保留需要的虛構記錄，再按重置。

小練習與查證紀錄

自主練習只改主標題成自己的另一句英文，仍保留所有功能並重做正常與空值案例。你能交付修改前後差異、實際測試結果、兩種寬度的觀察及未執行項目，就完成這一篇。接著讀需求描述、專案規則與測試及審查，把這次流程變成每次都能重複的工作習慣。

材料是本系列原創、可公開分享的虛構練習網站。參考版核心與瀏覽器行為已在 Windows／Edge 驗證；其他 OS 的啟動說明未冒充實機測試。Codex 入口依 2026-09-20 的官方快速開始與 CLI 文件查證。圖片只表示練習成果，不是 Codex 的產品介面。

把「預期」與「實際檢查」分開記錄

下表是驗收時的預期對照，不是你這次執行的通過紀錄。每次另記四項：實際修改的檔案；測試執行目錄與通過／失敗數；390px 與 1280px 各自的實際畫面結果；尚未完成的操作。即使核心測試 3 項全通過，主標題或背景仍可能改錯，因為這組測試檢查待辦資料邏輯。若無法開啟預覽，畫面欄填「未執行」並保留待驗收項目，不要用原始碼中的顏色值代替畫面結果。

返回 Codex 教學總目錄

閱讀完整文字說明

Request to index.html to Browser

• AI 工具
• 教學
• Codex