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.
Turn a vague coding wish into a prompt Codex can act on safely.
task framingconstraintsexpected checks
12-minute lab
Hands-on lab
Make one visible improvement to the same personal brand site with a prompt that clearly states the goal, context, constraints, and proof of completion.
Before you start
Open my-brand-site after completing the first two lessons.
Preview index.html once so you know its current heading, sentence, and button behavior.
Do it now
Good prompt
Codex, improve the About section in index.html by adding this short paragraph: “I enjoy turning complex ideas into simple, useful digital products.” Add comfortable responsive spacing around that section. Keep the existing design, use one file, add no dependencies, and preserve the Projects button behavior. Verify the About copy and button at wide and narrow browser widths. Report the changed file and what you observed.
What success looks like
The About section has one clear paragraph and the project remains a single file.
The Projects button still moves to the right section.
Codex reports the changed file plus the wide and narrow layout checks.
Stuck? Try this
If the result is too broad, reply: “Keep the existing design. Add only the requested About paragraph and spacing.”
If verification is vague, ask: “Tell me exactly what you observed at wide and narrow browser widths.”
Plain-language explanation
A useful Codex prompt is not long because it is fancy. It is useful because it tells Codex what outcome you want, what context matters, what rules to follow, and how to prove the work is done.
Think of the prompt as a small work order. If another developer could read it and understand the task, Codex has a much better chance of doing the right thing.
Why it matters
Clear prompts reduce guessing. They also make the final answer easier to judge because you already defined what successful work should look like.
Common beginner mistake
Beginners often write prompts like “fix this” or “improve the app,” which gives Codex too many hidden decisions.
Step-by-step
Write the goal in one sentence.
Name files, screenshots, errors, or docs that matter.
State constraints such as what not to change.
Define done with tests, build commands, or manual checks.
Try this
Take one vague request you might normally send and rewrite it with goal, context, constraints, and done-when criteria.
Completion checklist
Your prompt names the desired behavior instead of only naming a file.
Your prompt includes at least one concrete verification step.