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

What Codex Is For

Know when to ask Codex for codebase help, implementation, debugging, or review.

agentic codingrepository contexthuman review loop

Watch, then try

01|從空資料夾建立網站(CLI 版・33 秒)

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

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site,或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令;本課權限為 workspace-write。
  3. 核對實際輸出與結束碼,不把文字回報當成瀏覽器操作證據。
  4. 打開新網站,點『查看我的作品』,確認移到作品區塊。
跟著本片操作: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 必須是『查看我的作品』連到 #works;about、works、contact 各有唯一 id。兩張作品卡片。Email 使用 hello@example.test。CSS 和 JS 都放同一檔,無外部圖片、字型、套件、CDN。手機排版不溢出。此課不要加主題切換或回頂端按鈕,留待後續。控制在 180 行內。建立後實際檢查檔案並回報。'

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

12-minute lab

Hands-on lab

Create a real one-file personal brand site in a brand-new folder. You will watch Codex create a file, explain the change, and give you a way to check it.

Before you start

  • Create an empty folder named my-brand-site anywhere on your computer.
  • In the desktop app, add that folder as a local project and start a new Codex task.

Do it now

Good prompt

Codex, this empty folder is for my personal brand site. Create one responsive index.html with a hero heading that says “Your Name”, the line “I turn ideas into clear web experiences.”, and About, Projects, and Contact sections. Add a “View my work” button that scrolls to Projects. Keep all HTML, CSS, and JavaScript in that one file and do not install packages. When finished, report the changed file and give me exact browser check steps.

What success looks like

  • The folder contains one index.html file and no installed packages.
  • The page shows a name, a short introduction, About, Projects, and Contact sections, plus a working projects button.
  • Codex reports the changed file and tells you how to check the result.
Stuck? Try this
  • If Codex says it cannot see the folder, confirm that my-brand-site is the current local project.
  • If the page does not open, ask: “Give me the simplest exact steps to open this index.html in my browser.”

Plain-language explanation

Codex is most useful when you treat it like a coding teammate. It can read unfamiliar files, explain how a project works, make scoped changes, run checks, and summarize what changed.

It is not a replacement for your judgment. Your job is to give it enough context, ask for evidence, and review the result before you accept the work.

Why it matters

This mindset keeps you in control. Codex can move quickly, but you still decide the task, the safety boundaries, and whether the evidence is good enough.

Common beginner mistake

A common beginner mistake is treating Codex like magic and accepting its output without understanding the changed files or test evidence.

Try this

Open a small project and ask Codex for a read-only explanation. Before asking for changes, write down what you still need to verify yourself.

Completion checklist

  • The site shows a name, introduction, About, Projects, and Contact sections.
  • You clicked View my work and confirmed it moves to the Projects section.

Sources

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

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