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

Finish The Site Details

Use the app, CLI, or cloud where each remaining site task fits best.

0/3
Polish The Site In The AppUse the Codex app to polish one Projects card, review the diff, and check the result at two widths.
10 minReady

Polish The Site In The App

Complete one visible site refinement from edit through browser review in the same workspace.

project contextdiff reviewresponsive check

Plain-language explanation

Use the Codex app to finish one visible detail of the site from start to finish. A Projects card is a good example because you can edit its copy, inspect the diff, and immediately check the layout.

This lesson is not about learning every app feature. It is about completing one real site improvement without losing track of the evidence.

Why it matters

Keeping files, diff, terminal output, and browser checks together makes final polish easier to review.

Common beginner mistake

A common mistake is accepting a nicer-looking card without checking what else changed or how it wraps on a narrow screen.

Step-by-step

  1. Choose one Projects card and state the exact improvement.
  2. Ask Codex to keep the existing site style and file structure.
  3. Review the changed lines in the diff.
  4. Check the card at desktop and mobile widths.

Good prompt

Codex, in the app, improve the second Projects card in my-brand-site so its title and description clearly explain what I made. Keep the current visual style and one-file structure. Then show the focused diff and check the card at wide and narrow browser widths.

Try this

Rewrite one project description, inspect the diff, and resize the page before accepting it.

Completion checklist

  • Only the intended card and necessary styles changed.
  • The card remains readable at wide and narrow widths.

Sources

Run Site Checks In The CLIUse the terminal to catch duplicate IDs, missing section links, and whitespace errors in the single-file site.Delegate An Isolated Site TaskHand off a bounded content or accessibility audit without opening the door to a full redesign.
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