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.
9 minReady

Choose A Codex Surface

Pick a Codex surface based on project access, speed, and verification needs.

Codex appCLI workflowscloud tasks

Watch, then try

02|用 CLI 做一次小修改(CLI 版・31 秒)

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

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site,或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令;本課權限為 workspace-write。
  3. 核對實際輸出與結束碼,不把文字回報當成瀏覽器操作證據。
  4. 重新載入網站,確認新文案仍連到作品。這一版使用 CLI,不演示 App 介面。
跟著本片操作:CLI 指令與練習檔(繁體中文)

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

codex exec --ephemeral --ignore-user-config --sandbox workspace-write '只改 index.html:將 CTA『查看我的作品』改為『探索我的作品』,保留 href=#works、其餘版面與內容。用 git diff -- index.html 檢查變更並簡短回報。'

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

10-minute lab

Hands-on lab

Continue with the starter folder from lesson one. Use the local project for the file change, then use browser verification—or exact manual steps—to check the rendered result.

Before you start

  • Finish lesson one so my-brand-site contains index.html.
  • Open that folder as the current local project and start a separate task for this outcome.

Do it now

Good prompt

Codex, inspect index.html in this local project. Change the hero button label from “View my work” to “Explore my work” without changing its scroll behavior or adding packages. After editing, verify the rendered label and that it still moves to Projects; otherwise give me exact manual check steps. Report the changed files and visible result.

What success looks like

  • Codex changes only index.html and installs no packages.
  • The rendered button says “Explore my work” and still moves to the Projects section.
  • The final report separates the file change from the browser or manual verification evidence.
Stuck? Try this
  • If browser tools are unavailable, accept exact manual verification steps instead of skipping verification.
  • If Codex edits unrelated styles, reply: “Revert unrelated changes and keep only the button-label change.”

Plain-language explanation

You do not need to know every Codex surface before you begin. You only need to choose the surface that gives Codex the right files, tools, and review loop for the task in front of you.

A small local fix usually belongs in a local app or CLI session. A task that can be delegated safely, or one you want to run in parallel, may fit a cloud or worktree flow better.

Why it matters

Choosing the surface first prevents wasted time: Codex gets the right context, you get the right evidence, and the task stays easier to review.

Common beginner mistake

A common beginner mistake is starting every task in the same place, then wondering why Codex cannot see the files, browser state, or review context it needs.

Try this

Pick one task you might ask Codex to do. Write down whether it belongs in the app, CLI, browser, cloud, or worktree, and explain the reason in one sentence.

Completion checklist

  • You can name at least two Codex surfaces and the kind of task each one fits.
  • You can explain what context or verification the chosen surface gives Codex.

Sources

Your First Useful PromptTurn “add an About section” into a concrete request with content, constraints, and browser checks.
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