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

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.

Prompt Like A Builder

Map the site, plan its sections, and turn rough ideas into clear changes.

0/3

Find the Files to ChangeAsk Codex to show which files control each part of the site before you edit anything.Plan Before CodingPlan the site's theme control before editing, including risks and browser checks.Define Done WhenDefine visible completion checks, then implement the site's light and dark themes.

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

Ship Verified Changes

Test the site, check desktop and mobile views, and review the final diff.

0/3

Test The ChangeAdd focused checks for the site's theme and navigation without breaking earlier work.Browser VerificationOpen the real site and check content, navigation, and layout at desktop and mobile widths.Review Before AcceptingReview the site's full diff, test evidence, and any remaining visual or behavior risks.

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

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

Build A Site QA Workflow

Create reusable checks for the site's content, links, and browser behavior.

0/3

Turn Site Checks Into A SkillPackage the personal site's pre-launch content, link, mobile, and accessibility checks into one reusable skill.Bring In Project Data SafelyDecide whether project cards need outside data, and use the smallest read-only connection only when it adds value.Test Contact SafelyTest the Contact section with sample data and stop before anything is sent to a real service.

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.

9 minReady

Complete The Site Goal

Keep every final task aimed at a personal site that is ready to show someone else.

site goallaunch checklistcompletion evidence

Plain-language explanation

Now collect everything you built into one finish line: a personal site with About, Projects, and Contact; working navigation and CTA; a layout that holds up on wide and narrow screens; and clear review evidence.

The goal should stay active until every launch item is complete or explicitly left for you to review.

Why it matters

A single site goal connects the remaining work to the project you started in lesson one.

Common beginner mistake

A vague goal such as 'finish my website' lets important sections or mobile checks disappear from the final review.

Step-by-step

List the required About, Projects, and Contact content.
List the navigation, CTA, theme, and Back to top behavior to keep working.
Require wide and narrow layout checks plus valid links.
Match every item with command, browser, or human-review evidence.

Good prompt

Codex, track this goal for my-brand-site: About, Projects, and Contact are complete; navigation, CTA, theme, and Back to top work; there is no desktop or mobile overflow; links are valid; and final command, browser, and human-review evidence is reported. Keep the one-file structure and current visual direction.

Try this

Turn the site's remaining notes into a checkbox list with a matching check for each item.

Completion checklist

The goal covers content, behavior, layout, and evidence.
Every launch item is complete or clearly marked for human review.

Sources

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

Build a personal brand site with Codex

Personal brand site build path

Start With Codex

Prompt Like A Builder

Work Safely

Ship Verified Changes

Lock In Your Site Rules

Finish The Site Details

Build A Site QA Workflow

Finish And Deliver The Site

Complete The Site Goal

Plain-language explanation

Why it matters

Common beginner mistake

Step-by-step

Good prompt

Try this

Completion checklist

Sources

Copyable Codex prompts

Plan before coding

Verification checklist

Verify a UI change

Verification checklist

Review focused risk

Verification checklist

Codex concepts to keep nearby