zero2codex
OpenAI Codex workflow course

Course goal: ship your personal brand site

Build a personal brand site with Codex

Keep improving one project from an empty folder to a responsive one-page site with an introduction, projects, and contact details. Every lesson adds a visible result or a check toward that finish line.

Curriculum

Personal brand site build path

01

Start With Codex

Set up Codex and build the hero section of your personal brand site.

0/4
00｜Install And Open CodexInstall the desktop app, sign in, open the site project folder, and send a safe first message.What Codex Is ForBuild the first version of your site with a name, introduction, projects, contact details, and one working button.Choose A Codex SurfaceEdit the site's Projects button locally, then verify its text and behavior in a browser.Your First Useful PromptTurn “add an About section” into a concrete request with content, constraints, and browser checks.
04

Ship Verified Changes

Test the site, check desktop and mobile views, and review the final diff.

0/3
Test The ChangeAdd focused checks for the site's theme and navigation without breaking earlier work.
10 minReady

Test The Change

Use tests as evidence instead of trusting that edited code is correct.

focused testsregression coveragetest output

Watch, then try

10｜建立可重複的結構檢查（CLI 版・19 秒）

真實 CLI 輸出檢視器與本機網站錄影，非 Codex 原生介面；繁中字幕、無旁白，等待區段已剪接。

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site，或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令；本課權限為 workspace-write。
  3. 核對實際輸出與結束碼，不把文字回報當成瀏覽器操作證據。
  4. 看實際 PASS 與 exit code；靜態檢查不能取代下一課的互動驗證。
跟著本片操作：CLI 指令與練習檔（繁體中文）

這是本課的 CLI 替代實作路徑；下方概念課程仍保留其他介面的說明。先安裝並登入 Codex CLI，在 my-brand-site 資料夾內執行下列 macOS／Linux 指令。影片將真實 CLI JSON 事件排版成易讀畫面，下列指令使用一般 CLI 輸出；不是 Codex 原生介面，等待區段已剪接。

codex exec --ephemeral --ignore-user-config --sandbox workspace-write '新增 check_site.py，僅用 Python 標準庫 HTMLParser 檢查 index.html：沒有重複 id，所有 #錨點存在，about/works/contact/top 都存在，CTA『探索我的作品』與新增自介存在，mailto 是 hello@example.test，無外部 script/stylesheet，主題按鈕有文字。失敗 exit 1；通過印清楚 PASS。實際執行 python3 check_site.py 和 git diff --check。勿宣稱靜態檢查等於瀏覽器操作。不要修改 index.html。'

下載逐課練習檔與實際結果（ZIP）

Plain-language explanation

Tests turn a Codex change into evidence. A good test proves the behavior you asked for and protects it from breaking again later.

When practical, ask Codex to write or run a focused test before claiming success. The final report should include the exact command and result.

Why it matters

Without tests, you are mostly judging a diff by appearance. Tests give you repeatable proof that the requested behavior works.

Common beginner mistake

A common mistake is trusting a change because the code looks reasonable, even though no check showed the bug was fixed.

Good prompt

Codex, add check_site.py using only the Python standard library for our single index.html. Check unique IDs, fragment targets, the project CTA, introduction, email target, external resources, and the theme button name. Do not modify the website. Run python3 check_site.py and git diff --check, reporting actual output and exit codes. Distinguish static checks from browser interactions not yet performed; do not invent npm commands.

Try this

Write a request that asks Codex for a failing test, a fix, and the exact passing command.

Completion checklist

  • The test fails before the implementation when practical.
  • The final report includes the exact passing test command.

Sources

Browser VerificationOpen the real site and check content, navigation, and layout at desktop and mobile widths.Review Before AcceptingReview the site's full diff, test evidence, and any remaining visual or behavior risks.
08

Finish And Deliver The Site

Polish independent tasks in parallel, then complete one final acceptance review.

0/3
Complete The Site GoalTurn the finished personal site into one measurable goal with content, layout, interaction, and evidence checks.Polish Copy And Accessibility In ParallelUse isolated worktrees only when copy polish and accessibility review can avoid editing the same lines.Run The Final Three ReviewsRun separate content, link, and accessibility reviews, then compare all evidence against the same launch checklist.

Practice lab

Copyable Codex prompts

Plan before coding

Codex, inspect the relevant files first, then propose a plan. Do not edit until the plan names tests and verification steps.

Verification checklist

  • Relevant files are named before edits begin.
  • The plan includes tests and verification commands.

Verify a UI change

Codex, start the dev server, open the route in the browser, check desktop and mobile layouts, then report the exact evidence.

Verification checklist

  • Desktop and mobile states are checked in the browser.
  • The final note includes exact evidence.

Review focused risk

Codex, review the uncommitted diff. Focus on behavioral regressions, missing tests, and accessibility issues. Do not modify files.

Verification checklist

  • Findings lead with severity and file references.
  • Unchanged files are left untouched.
Every good Codex request says what to change, what to preserve, and how to prove it worked.

Reference

Codex concepts to keep nearby