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
07

Build A Site QA Workflow

Create reusable checks for the site's content, links, and browser behavior.

0/3
Turn Site Checks Into A SkillPackage the personal site's pre-launch content, link, mobile, and accessibility checks into one reusable skill.Bring In Project Data SafelyDecide whether project cards need outside data, and use the smallest read-only connection only when it adds value.Test Contact SafelyTest the Contact section with sample data and stop before anything is sent to a real service.
9 minReady

Test Contact Safely

Verify the contact experience without exposing personal data or submitting a real message.

sample datasafe stop pointvisible feedback

Watch, then try

21|安全檢查聯絡區塊(CLI 版・32 秒)

真實 CLI 輸出檢視器與本機網站錄影,非 Codex 原生介面;繁中字幕、無旁白,等待區段已剪接。此版本沒有表單;只核對 Email 連結,不開信箱、不寄信。

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site,或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令;本課權限為 read-only。
  3. 核對實際輸出與結束碼,不把文字回報當成瀏覽器操作證據。
  4. 瀏覽器移到聯絡區塊,確認假 Email 目標後停止,不點寄信。
跟著本片操作:CLI 指令與練習檔(繁體中文)

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

codex exec --ephemeral --ignore-user-config --sandbox read-only '唯讀檢查 index.html 的聯絡區塊。列出是否有 form/input,以及 mailto 目標。不要開信箱、不要寄信、不要連外或改檔。只報告讀到的實際結果,限 120 字。'

下載逐課練習檔與實際結果(ZIP)

Plain-language explanation

The Contact section needs a real interaction check, but you do not need to send a real message. Use sample values, check labels and validation, then stop before submission.

If the current Contact section is only a mail link, verify the target without opening or sending from a real account.

Why it matters

You can verify the visitor experience without exposing personal data or triggering an external action.

Common beginner mistake

A common mistake is using a real name, email, or signed-in account when sample data would prove the same behavior.

Good prompt

Codex, open the local my-brand-site Contact section. Check the labels and fill only obvious sample values if fields exist. Verify any validation message, but stop before sending, opening a signed-in mail account, or changing external data.

Try this

Write the sample values and the exact stop point before you start the browser check.

Completion checklist

  • The Contact experience was checked with no real personal data.
  • The task stopped before any external submission or account action.

Sources

08

Finish And Deliver The Site

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

0/3

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