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

00｜Install And Open Codex

Finish the setup and know where to start a local Codex task.

desktop appChatGPT sign-inlocal folder

Watch, then try

00｜CLI 環境與第一次執行（CLI 版・25 秒）

真實 CLI 輸出檢視器與本機網站錄影，非 Codex 原生介面；繁中字幕、無旁白，等待區段已剪接。CLI 已事先安裝與登入；本片不含安裝或帳號登入畫面。

zero2codex
MP4

Step-by-step

  1. 先依官方 CLI 文件完成安裝與登入，再建立空的 my-brand-site 資料夾。
  2. 在專案目錄執行本片 CLI 指令；本課權限為 read-only。
  3. 核對實際輸出與結束碼，不把文字回報當成瀏覽器操作證據。
  4. 確認工作目錄正確、尚未建立 index.html。CLI 已事先安裝及登入；本片不錄帳密。
跟著本片操作：CLI 指令與練習檔（繁體中文）

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

codex exec --ephemeral --ignore-user-config --sandbox read-only '只執行 pwd 和 ls -la，確認目前的 my-brand-site 示範資料夾。不要建立檔案。用繁體中文兩句說明：目前有沒有 index.html；接下來會建立什麼。'

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

8-minute lab

Hands-on lab

Install and open the desktop app, sign in, attach an empty practice folder, and send one read-only message to confirm the setup works.

Before you start

  • Have your ChatGPT account ready. Create one first if you do not have one yet.
  • Create an empty folder named my-brand-site anywhere on your computer.

Do it now

Good prompt

Codex, before we begin, confirm the name of the current folder and list the files you can see. Do not create, edit, rename, or delete anything yet.

What success looks like

  • The desktop app is open and signed in to your account.
  • The task is using my-brand-site as its local folder.
  • Codex says the folder is empty and makes no file changes.
Stuck? Try this
  • If you cannot find Codex, open the ChatGPT dropdown in the task composer and select Codex.
  • If Codex cannot see the folder, start a task or use the folder picker again and select my-brand-site.

Plain-language explanation

Before the first coding exercise, get the desktop app ready. Install it, sign in with your ChatGPT account, and open one folder that Codex is allowed to read.

You do not need to understand every button yet. For now, find the Codex task, the message box, and the folder attached to the task. That is enough to begin.

Why it matters

The next lesson asks Codex to create a real file. Doing this setup first means you can focus on the exercise instead of wondering whether Codex can see the right folder.

Common beginner mistake

Starting a task before checking the selected folder. Codex may then have no project context or may be looking at a different folder.

Try this

Find the task sidebar, message box, current folder, and changed-files view. You only need to know where they are; do not change any settings yet.

Completion checklist

  • The desktop app is installed, open, and signed in.
  • A Codex task can see my-brand-site and no files were changed.

Sources

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