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
03

Work Safely

Add site interactions while keeping every edit safe and easy to undo.

0/3
Local Thread BoundariesAdd Back to top while keeping the task limited to one file and one visible outcome.Sandbox And ApprovalsServe the personal site locally and review every command before approving it.
11 minReady

Sandbox And Approvals

Use sandbox and approval settings intentionally instead of treating them as noise.

sandbox modesapproval policycommand risk

Watch, then try

08|使用最小權限(CLI 版・25 秒)

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

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site,或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令;本課權限為 read-only。
  3. 核對實際輸出與結束碼,不把文字回報當成瀏覽器操作證據。
  4. 畫面顯示 read-only;只列目錄狀態,不提高權限。
跟著本片操作:CLI 指令與練習檔(繁體中文)

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

codex exec --ephemeral --ignore-user-config --sandbox read-only '這次使用 read-only sandbox。只執行 pwd、git status --short。不要啟動伺服器、不要安裝、不要連外。回報本次真正跑的兩個命令,並解釋唯讀檢查不需要 workspace-write。限 120 字。'

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

12-minute lab

Hands-on lab

Serve the finished page locally with the narrowest useful command. Review what each command touches before Codex runs it instead of approving by reflex.

Before you start

  • Save the current index.html and make sure my-brand-site is the active local project.
  • Close any old preview server so the verification starts from a known state.

Do it now

Good prompt

Codex, verify this static page with the narrowest local commands. Before running anything, list each command, what it reads or changes, whether it uses the network, and whether it may need approval. Prefer pwd followed by python3 -m http.server --bind 127.0.0.1 8000 from this project. Do not install packages, access external sites, or touch files outside my-brand-site. After browser verification, stop the server and report the commands used.

What success looks like

  • Codex explains the scope and risk of every command before execution.
  • The page is served from my-brand-site without installing packages or accessing external sites.
  • The local server is stopped after verification and no project file changes.
Stuck? Try this
  • If port 8000 is busy, ask Codex to identify the conflict and propose one alternate local port—do not approve a broad process-kill command.
  • If Codex proposes npm install, ask why the built-in Python server is insufficient for this static page.

Plain-language explanation

Sandboxing controls what Codex can touch. Approvals control when Codex must pause before running a command or doing something riskier.

When a permission prompt appears, you are not just clicking through a dialog. You are deciding whether the requested action is safe for this task.

Why it matters

Intentional approvals keep Codex useful without giving it unnecessary reach across your machine, network, or files.

Common beginner mistake

The common mistake is approving broad commands without checking what directory, network access, or file changes they involve.

Try this

List three commands you commonly run. Mark each as safe, review-needed, or too broad for an automated agent.

Completion checklist

  • You can identify a command that is safe to run locally.
  • You can identify a command that should require explicit approval.

Sources

Network Access RiskAudit fonts, images, scripts, and links to decide whether the site needs network access.
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