Start learning
Back to tutorials

Introduction to ChatGPT Codex

Build your first interactive webpage with Codex. Learn to write a clear brief, inspect changes, test behavior, and request a focused revision.

FROM AN IDEA TO SOMETHING THAT WORKS

Build it.
Try it. Improve it.

Click through a project workspace, test a working webpage, and learn to review the result.

Interactive teaching workspace, recreated for this class. It does not control Codex or connect accounts. Your app’s labels may differ. All practice interfaces use crisp text and vector icons.

Your project laboratory
● ● ●Codex · Practice workspaceRECREATED INTERFACE

A small place to start.

One project. Four files. A result you can test.

HTMLStructureCSSAppearanceJSBehavior
NOW BUILD YOUR OWN

One brief. Four files.

Get the project worksheet

Use the real Codex workspace.

Open a fresh practice folder. Copy the brief, review the plan, and inspect the finished webpage.

Before marking this class complete
TRY IT IN YOUR AI ASSISTANT
In this empty practice folder, build a workshop preparation checklist.
Show a short plan and wait for my review before editing.
Use plain HTML, CSS, and JavaScript. No packages or external services.
Create index.html, styles.css, script.js, and a README.
Show six initially unchecked tasks: confirm the room; choose the start time;
prepare sample notes; check accessibility arrangements; test the projector;
review the invitation. Show an immediately updating count out of six.
Reset must clear every checkbox. Refresh must start fresh.
Use navy text, teal accents, readable labels, visible keyboard focus,
and a phone-friendly layout. Keep work inside this practice folder.
Do not publish. Preview and test if supported; report unverified checks.
SEE THE REAL DESKTOP APP

Original 1080p demonstrations.

Source: official OpenAI desktop guide ↗

Official desktop demonstrations show working with connected context and inspecting outputs. They are separate examples from our checklist project. Use full screen for detail.

Connected context: project documentsOpenAI desktop reference · 1920 × 1080 source
Review a file-based taskOpenAI desktop reference · 1920 × 1080 source
Prefer written instructions? Open the complete class notes

What you’ll be able to do

  • Describe a small software project in plain language.
  • Give Codex a focused workspace and testable requirements.
  • Inspect a preview, request a revision, and review the changed files.

Your first class: build a workshop checklist

In this 50-minute introductory class, you will ask ChatGPT Codex to create a small webpage for planning a fictional community workshop. The page will have six checkboxes, a progress counter, and a reset button. You will improve it once, test its behavior, and keep a record of what you checked.

No coding experience is required to start. You will encounter three file types: HTML describes the page structure, CSS controls its appearance, and JavaScript supplies behavior. You do not need to memorize their syntax. Your first job is to describe what a visitor should be able to do and decide whether the result works.

Suggested pace: 10 minutes for setup and planning, 20 minutes to build, 15 minutes to test and revise, and 5 minutes for the practice questions. Download the worksheet beside this lesson to record your brief, tests, and corrections.

What is Codex?

Codex is OpenAI’s coding agent. It can work with a codebase to help create, understand, change, and check software. In this class, you will use the desktop experience and a small local project. A question such as “What is a checkbox?” asks for an explanation. A task such as “Build a checklist with a working progress counter” asks for an implementation you can inspect.

Generating code is one step in making something usable. A webpage can look convincing while its buttons fail, its text is hard to read, or its behavior changes after a refresh. Your role includes choosing requirements, trying the result, and reviewing the evidence.

Before you begin

This UAI lesson and worksheet are free. Codex access, usage limits, and available features depend on your account and workspace. Check the official quickstart linked below for current setup; this lesson does not require an API key or a paid external service.

Open the current ChatGPT desktop app and sign in with your ChatGPT account. Select Codex from the product dropdown for software development, choose a project or folder, and start a new chat. OpenAI also provides IDE, command-line, and cloud workflows; the desktop route keeps this first exercise focused. Interface labels may change as the app evolves.

Create an empty practice folder called UAI Codex Practice and open it as your workspace. A workspace is the location containing this project’s files. Use a fresh folder so you can recognize every new file. No GitHub connection or deployment is needed for this local exercise.

Define success before asking for code

Our fictional organizer needs to track six preparation tasks: confirm the room, choose the start time, prepare sample notes, check accessibility arrangements, test the projector, and review the invitation. These are checklist labels, not claims that arrangements are already complete.

Write down these acceptance checks before building:

  • All six tasks appear and start unchecked.
  • Selecting a task updates a visible completed count.
  • Reset returns all tasks and the count to their starting state.
  • The page works on a narrow screen and with the keyboard.
  • Refresh starts a fresh checklist; this exercise does not save progress.

Acceptance checks are observable statements about the result. “Make it amazing” leaves too much unstated. “A keyboard user can reach every checkbox and see the focused control” gives you something specific to try.

Give Codex the first task

Copy this brief into your new project chat. Ask for a plan first so you can confirm the scope before implementation.

TRY IT IN YOUR AI ASSISTANT
In this empty practice folder, build a small fictional workshop preparation checklist.
First show a short plan and wait for my review before editing files.
Use plain HTML, CSS, and JavaScript. No packages, accounts, APIs, or external assets.
Create index.html, styles.css, script.js, and a README explaining how to open and test it.
Show these six tasks, initially unchecked:
Confirm the room; Choose the start time; Prepare sample notes;
Check accessibility arrangements; Test the projector; Review the invitation.
Show a completed count out of six and update it immediately when a box changes.
Add a Reset checklist button. Refresh should start fresh; do not store progress.
Use readable navy text, teal accents, clear labels, visible keyboard focus,
and a layout that works on a phone.
Keep all work inside this practice folder. Do not publish or connect services.
After building, preview it if supported, test the behavior, and report
which checks you ran and any checks you could not complete.

Review the plan, then build

A suitable plan names the four files, describes the counter and reset behavior, and explains how to check the page. If it proposes a database, sign-in, or a complex framework, ask it to return to the plain three-file webpage plus README.

When the plan matches your requirements, tell Codex to implement it. Read any requests for access or command execution against the work you intended. If a preview or a browser step is unavailable, ask it to explain how to open index.html yourself. A missing preview is a limitation to resolve, not a reason to assume success.

Open the result and investigate one behavior

Use the preview when available, or follow the README to open index.html in a browser. Check two tasks: the counter should show two of six completed. Uncheck one: it should show one. Reset: it should show zero and clear every box.

Ask Codex to explain, in beginner-friendly language, which file updates the counter and which file controls the colors. Then inspect those filenames in the changed-file list or project folder. You do not need to understand every line to recognize whether a task stayed within its intended scope.

Your practice: test, revise, and test again

  1. Try all five acceptance checks you wrote before building.
  2. Use Tab to reach the controls and Space to toggle a focused checkbox. Confirm the focus indicator is visible.
  3. Narrow the browser window and check that labels, buttons, and the count remain readable.
  4. Ask for one improvement: “When all six tasks are checked, show Ready for human review. Hide that message when any task is unchecked or Reset is pressed.”
  5. Repeat the counter and reset checks after the revision.
  6. Compare the actual result with Codex’s report. Record any check you performed that it could not run.

Your finished artifact: The four project files, a screenshot or personal note describing the preview, and a completed worksheet with test results and one revision.

Read the change summary

A diff shows what changed between versions. If your interface provides one, use it to see which files were edited. Otherwise, inspect the project folder and ask for a file-by-file summary. For this assignment, the result should remain a small local webpage.

If something fails, describe the steps and the expected result: “Check all six items, then uncheck one. The ready message stays visible, but it should disappear.” This is a reproducible bug report. Ask for a focused fix, then repeat the same steps to verify it.

A common mistake

Treating “done” as proof that the work was tested. Ask what was actually checked, and distinguish a reported automated check from a browser action you tried yourself. If a check was not run, record it as unverified until you or Codex can complete it.

Reflection and next steps

Which requirement prevented a misunderstanding? Which test caught a problem or gave you confidence? Write one sentence for each. Keep a copy of the working files before your next experiment.

For a second project, change one requirement at a time. You might add categories or a print-friendly layout. Save GitHub, cloud environments, and deployment for a later class, after you can inspect and test a small local change.

Official guides and class notes

Setup checked October 22, 2026. Product labels, access, and supported features can change.

This independent Universal AI Institute class includes an original practice project and self-checks. It does not award an OpenAI certification.

PAUSE. THINK. APPLY.

Check your understanding.

These practice questions give you feedback. They are not graded or used to award a certificate. Try again as often as you like.

01Which requirement is easiest to verify?
02Codex says the page is done, but could not open a preview. What should you do?
03After a revision, the reset button fails. What is the most useful feedback?

Now make it your own.

Complete the hands-on assignment above, review your finished artifact, and use “Mark complete” when you’re ready to move on.