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

Lock In Your Site Rules

Write project rules that preserve the site's content and visual style.

0/3
Write Your Site RulesWrite an AGENTS.md for my-brand-site so later edits keep the same voice, layout, and checks.
10 minReady

Write Your Site Rules

Give Codex a short set of rules it can reuse for every remaining site task.

site instructionscontent ruleslaunch checks

Plain-language explanation

Your personal site now has a clear voice and visual style. AGENTS.md is where you record the small set of rules Codex should keep following as you finish it.

For my-brand-site, useful rules include keeping the one-file structure, preserving your tone, checking narrow screens, and reporting what was verified.

Why it matters

The last few site edits should feel like the same project, even when they happen in a new Codex task.

Common beginner mistake

A common mistake is pasting generic npm or framework rules into a site that only contains index.html.

Step-by-step

  1. Ask Codex to inspect the real files in my-brand-site.
  2. Write rules for the one-file structure, site voice, responsive layout, and accessibility.
  3. Add only checks that can actually run for this project.
  4. Keep AGENTS.md short enough to scan before every change.

Good prompt

Codex, inspect my-brand-site and draft a concise AGENTS.md. Keep the current one-file site, preserve its friendly personal voice, require no horizontal overflow at mobile width, keep controls accessible, and list only verification steps this project can really run. Do not invent npm commands.

Try this

Write five rules that would keep the next change consistent with the site you already built.

Completion checklist

  • The rules refer to the real my-brand-site structure and checks.
  • The rules protect the site's voice, layout, and accessibility.

Sources

Separate Site And Section RulesKeep permanent site rules separate from one-time requests for the Projects or Contact section.Turn Site Mistakes Into RulesTurn missed labels, broken links, or mobile overflow into rules that prevent the same problem next time.
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