Building a Website with Codex
Build a static event-registration page, check keyboard access and mobile sizing, and inspect the changes before use.
Overview
For learners who want to complete this practical exercise with inspectable sample data and explicit checks.
- Write a small, bounded website specification.
- Use Codex in a new folder and inspect generated files.
- Test the interface in a browser rather than relying on an image.
You will build: Three HTML/CSS/JS files and a locally served event page.
Prerequisites
- Codex access through an account or API as described in official guidance.
- A terminal, browser, Python 3, and Git; optionally Node.js/npm for the npm CLI installation.
Codex access and limits depend on the account; API usage is billed separately when chosen. This is a local exercise and needs no hosting purchase or deployment.
Step-by-step tutorial
Step 1. Create an isolated workspace
Create an empty folder and open it in your installed Codex interface, or use the official CLI. Follow the current installation guide, run codex inside the practice directory, and sign in. Avoid installation commands from unverified posts.
mkdir codex-site-lab
cd codex-site-lab
git init
codexStep 2. Give a specification with acceptance criteria
Build a fictional "AI Study Session" website using index.html, styles.css, and app.js. Include a 19:00 session, Online venue, and a display-name form. The form only shows an on-page confirmation; no data transmission or localStorage. Use labels, visible keyboard focus, and responsive sizing from 390px. No external libraries, backend, remote images, commits, or deployment. Summarize the intended files before editing.Step 3. Serve the page and test its behavior
python3 -m http.server 8080 --bind 127.0.0.1Open http://127.0.0.1:8080. Submit a fictional name and confirm that the page does not reload or open an unrelated URL. Try an empty submission to check validation. Use DevTools Network to verify that the form sends no external requests.
Step 4. Check mobile, keyboard, and text insertion
Set the viewport to 390px and Tab through links, the input, and the button. Try the name <img src=x>; it should remain text rather than becoming an HTML element, so response code should use textContent. Ask Codex to fix observed defects rather than replacing the whole design on each iteration.
Review app.js: user-entered names must be rendered with textContent, not innerHTML. Fix only identified defects and preserve content/layout. Explain how to retest in a browser.Step 5. Inspect files and end the session
git status --short
git diff
git diff --no-index -- /dev/null index.htmlIn a fresh repository, git diff omits untracked file contents; open each file or use the no-index command above. A no-index exit code of 1 means differences were found, not that the website failed. Stop the server with Ctrl+C when finished.
Verification
- The form works by keyboard and has no horizontal overflow at 390px.
- All three files were inspected, including an input containing < >.
Troubleshooting
The codex command is missing
Cause: The CLI is not installed or PATH has not refreshed.
Fix: Follow the official CLI guide or use the installed app; do not install similarly named packages.
Port 8080 is already in use
Cause: Another process is listening there.
Fix: Change both the command and URL to port 8081; do not stop an unknown process.
Exercises & extensions
- Add an opt-in checkbox while keeping the exercise offline.
- Write a regression checklist before requesting color or content changes.
The form is a demo and registers nobody. A working page does not establish production security, accessibility, or operational readiness.