AI-generated editorial artwork inspired by the StageSpark demonstration; not a screenshot of the finished website.
One of the things I wanted to test with Codex was just how much web-development knowledge you actually need to create a small website.
For this experiment I deliberately kept things simple.
The website is made from ordinary HTML, CSS and a small amount of JavaScript. There is no React, Next.js, database or complicated development environment.
I used Codex to create the website, GitHub to store the files, and Cloudflare Pages to put it online for free.
If you've never built a website before, don't be put off by those names. I'll explain each part as we go.
The basic process is:
Describe the website to Codex
↓
Codex creates the website files
↓
Open index.html and check the website
↓
Save the files to GitHub
↓
Connect GitHub to Cloudflare Pages
↓
Website is live
What are we building?
For the demonstration I invented a children's performing arts school called:
StageSpark Performing Arts
The idea is to pretend that a customer has given me their logo, photographs, class information and the text they want on the website.
Codex then turns that information into a finished website.
The finished demo has four pages:
Home, Street Dance, Actors Studio and a demonstration booking page.
The locations, testimonials and business itself are fictional.
What is HTML and CSS?
You don't really need to understand HTML and CSS to follow this guide, but it helps to know what they do.
HTML contains the content and structure of the page: headings, paragraphs, photographs, buttons and links.
CSS controls what everything looks like: colours, spacing, fonts, sizes and the layout.
JavaScript adds small pieces of behaviour. In this example it controls things such as the mobile menu and the demonstration booking form.
A basic website might therefore contain files such as:
index.html
street-dance.html
actors-studio.html
book.html
assets/
css/
styles.css
js/
main.js
images/
logo.png
hero.jpg
street-dance.jpg
actors-studio.jpg
You don't have to create all of these files yourself. That is what we're going to ask Codex to do.
Step 1 — Create a GitHub account
The first thing we need is a GitHub account.
GitHub stores a copy of the website online and keeps a history of the changes we make.
For a simple project, you can think of it as an online home for the website's source files.
Go to https://github.com/ and create a free personal account if you don't already have one.
You will need to verify your email address before you can use all of GitHub's features.
Once signed in, choose:
New repository
A repository is simply a project stored on GitHub.
I'm going to call mine:
stagespark-demo
You can choose whether the repository is public or private.
Because we're going to create the website on our computer first, leave the options for creating a README, .gitignore and licence switched off.
Then select:
Create repository
GitHub will create an empty repository ready for our website.
Step 2 — Make sure Git is installed
Git is the software that allows your computer to send your website files to GitHub.
You only need to set this up once.
On a Mac
Open Terminal.
You can find it using Spotlight by pressing:
Command + Space
Type:
git --version
If Git is installed, you'll see a version number.
If it isn't installed, macOS will normally offer to install Apple's Command Line Tools.
You can also start the installation manually with:
xcode-select --install
Follow the instructions on the screen.
On Windows
Open PowerShell.
You can find it by typing:
PowerShell
into the Windows Start menu.
Then type:
git --version
If Windows tells you that git isn't recognised, install Git for Windows from the official Git website.
Run the installer and accept the normal default options.
Then close PowerShell, open it again and run:
git --version
You should now see the installed version.
Step 3 — Download Codex from OpenAI
For this project I'm using the Codex desktop experience rather than installing programming tools such as Node.js or npm.
Follow the download instructions in the official OpenAI desktop app guide to install the application for your computer.
Install it and sign in with your ChatGPT account.
Open the application and choose Codex.
Codex can work directly with folders and files stored on your computer.
That means we can give Codex an empty website folder and ask it to create the whole site inside it.
Step 4 — Create a folder for the website
You could simply create a new folder using Finder on a Mac or File Explorer on Windows.
I'm going to call it:
stagespark-demo
If you'd rather do it using a command, here are the equivalent instructions.
Mac
Open Terminal and type:
cd ~/Documents
mkdir stagespark-demo
cd stagespark-demo
Windows
Open PowerShell and type:
cd $HOME\Documents
mkdir stagespark-demo
cd stagespark-demo
We now tell Git that this folder is a project we want it to keep track of.
The Git commands are the same on Mac and Windows:
git init
git branch -M main
Don't worry too much about what these commands mean.
The first tells Git:
Start tracking this folder.
The second tells Git to call the main version of our website:
main
Step 5 — Add the customer's images
Normally a customer would give me things such as their logo and photographs.
For my fictional example I created four image files:
hero-performing-arts.jpg
street-dance.jpg
actors-studio.jpg
StageSparkLogo.png
Eventually these will live inside:
assets/images/
You can copy the images into the project before giving Codex the instructions, or ask Codex to create the folders first and then copy the images in afterwards.
Step 6 — Open the folder in Codex
Open Codex and choose the option to open a local folder.
Select:
stagespark-demo
Codex can now see and work with the files inside that folder.
At this point our folder is almost empty.
Now comes the interesting part.
We're going to describe the website we want.
Step 7 — Give Codex the brief
You could type:
Create a website for a children's performing arts school.
Codex could build something from that.
The problem is that we've left Codex to guess almost everything.
What pages should there be?
What colours should it use?
What should the buttons say?
What information belongs on each page?
Where are the photographs?
What happens when somebody presses the booking button?
A much better approach is to give Codex something similar to a customer brief.
Download the complete StageSpark website prompt (.txt) — this is the actual prompt I used to generate the demonstration site.
My StageSpark prompt starts like this:
Build a small demonstration website for a fictional children's performing arts
school called:
StageSpark Performing Arts
Assume that the customer has supplied:
- written copy
- a logo/brand direction
- three photographs
- class information
TECHNOLOGY
Build the site using plain:
- HTML5
- CSS3
- a small amount of vanilla JavaScript
Do not use React, Next.js, Bootstrap, Tailwind or other frameworks.
The finished site must work as a simple static website suitable for deployment
to Cloudflare Pages.
I then tell Codex exactly which files I want:
Create:
/
index.html
street-dance.html
actors-studio.html
book.html
assets/
css/
styles.css
js/
main.js
images/
hero-performing-arts.jpg
street-dance.jpg
actors-studio.jpg
StageSparkLogo.png
Then I describe the appearance:
Create a friendly, energetic and professional children's performing arts
website.
It should feel modern rather than corporate.
Use:
- lots of white space
- large confident headings
- dark charcoal/navy text
- a bright coral/red primary accent
- a warm yellow secondary accent
- rounded cards
- subtle shadows
- large photography
- playful but restrained decorative shapes
- clear call-to-action buttons
I also give Codex the actual words to put onto the website.
For example:
Hero heading:
Find your confidence.
Find your creativity.
Find your stage.
Intro text:
StageSpark gives young performers a welcoming place to move, perform, create
and make friends. Our small-group classes are designed to help every student
develop confidence while learning practical performance skills.
Primary button:
Book a trial class
Secondary button:
Explore our classes
And the details of individual classes:
Street Dance
High-energy classes combining rhythm, choreography and performance. Students
learn routines, develop coordination and build confidence while dancing as
part of a group.
Ages:
7–16
Location:
Rosewick Community Hall
Button:
Discover Street Dance
The locations aren't real because this is only a demonstration.
I continue in the same way for Actors Studio, the booking page, the footer and the other sections of the site.
Why is the prompt so detailed?
The prompt is deliberately quite long.
Most of it isn't programming.
I'm really just telling Codex what I would normally tell a web designer or developer.
I'm specifying the content, pages, appearance and behaviour I want.
I also tell Codex what not to do.
For example:
Do not invent a postcode or use a real address.
Do not include genuine telephone numbers, email addresses,
social media accounts or business addresses.
Do not create additional locations, staff biographies, holiday camps,
parties, nursery services or other pages.
This is important because otherwise an AI may try to be helpful by adding things that the customer never asked for.
Tell Codex about mobile phones and accessibility
I also include instructions such as:
RESPONSIVE DESIGN
The site must look good at:
- 375px mobile width
- tablets
- normal laptops
- wide desktop screens
Avoid excessively large text on mobile.
Images should crop well using object-fit: cover.
And:
ACCESSIBILITY
Include:
- keyboard accessible navigation
- visible focus states
- descriptive image alt text
- sufficient colour contrast
- form labels associated with controls
- aria-expanded on the mobile menu button
- reduced-motion support where appropriate
I don't necessarily need to understand all of those terms.
I'm giving Codex a checklist of good practices that I want it to follow.
A template for your own website
The StageSpark prompt is specific to this demonstration.
You wouldn't use the same text to build a plumber's website, photography portfolio or restaurant.
However, the overall structure of the prompt can be reused.
Here is a simple starting template:
Build a small website for:
[BUSINESS OR WEBSITE NAME]
ABOUT THE BUSINESS
[Explain what the business does.]
CUSTOMER-SUPPLIED MATERIAL
The customer has supplied:
[LIST THEIR LOGO, PHOTOS, TEXT AND OTHER MATERIAL]
TECHNOLOGY
Create the website using:
- HTML5
- CSS3
- a small amount of vanilla JavaScript
Do not use a JavaScript framework.
The website must be a static website suitable for Cloudflare Pages.
PAGES
Create:
[LIST THE PAGES]
For example:
index.html
about.html
services.html
contact.html
DESIGN
The website should feel:
[FRIENDLY / MODERN / PREMIUM / FUN / PROFESSIONAL / ETC.]
Use:
[DESCRIBE COLOURS]
[DESCRIBE FONTS OR TYPOGRAPHY]
[DESCRIBE PHOTOGRAPHY]
[DESCRIBE BUTTONS]
[DESCRIBE CARDS AND PAGE STYLE]
NAVIGATION
Include:
[HOME]
[ABOUT]
[SERVICES]
[CONTACT]
Create an accessible mobile menu.
HOME PAGE
Main heading:
[YOUR HEADING]
Introductory text:
[YOUR TEXT]
Main button:
[BUTTON TEXT]
Link it to:
[DESTINATION]
Add the following sections:
[DESCRIBE EACH SECTION]
OTHER PAGES
For each page provide:
- heading
- text
- images
- buttons
- links
- any special information
RESPONSIVE DESIGN
Make the website work well on:
- mobile phones
- tablets
- laptops
- large desktop screens
ACCESSIBILITY
Use:
- semantic HTML
- descriptive image alt text
- keyboard accessible navigation
- visible focus states
- sufficient colour contrast
- properly labelled forms
IMAGES
Use customer-supplied images from:
assets/images/
Do not hotlink external photographs.
IMPORTANT
Do not invent information about the business.
Do not invent:
[ADD ANYTHING YOU PARTICULARLY DON'T WANT CODEX TO CREATE]
FINALLY
Review the complete website for:
- broken links
- missing images
- spelling mistakes
- mobile layout problems
- inconsistent spacing
- accessibility problems
- information that I did not provide
Fix any problems you find.
The parts inside square brackets are the things you change.
For another business, the technology might remain exactly the same.
What changes is the content and design brief.
For example, a photographer might want large image galleries. A builder might want pages showing previous projects. A restaurant might need menus and opening hours.
The important part is to explain clearly what you want rather than expecting Codex to guess.
Step 8 — Let Codex build the website
Now give Codex the prompt.
Codex will start creating the files inside the project folder.
You may see it creating things such as:
index.html
street-dance.html
actors-studio.html
book.html
assets/css/styles.css
assets/js/main.js
Once it has finished, ask Codex:
Review the complete website.
Check all pages and internal links.
Check that all images load correctly.
Check the layout at mobile and desktop sizes.
Check for spelling mistakes and accessibility problems.
Fix any problems you find.
This gives it a second opportunity to check its own work.
Step 9 — Look at the website
This part is much easier than it might sound.
Because we've deliberately built a normal HTML website, we don't need to install a web server just to look at it.
Find the project folder.
Then find:
index.html
On a Mac, double-click index.html in Finder.
On Windows, double-click index.html in File Explorer.
Your normal web browser should open and display the website.
That's it.
There is no need to install Python, Node.js or another development server for this demonstration.
You can click around the website and check the other pages.
If you find something you don't like, go back to Codex and simply describe the change.
For example:
The heading on the home page is too large on my phone.
Reduce the mobile heading size but don't change the desktop version.
Or:
Make the Street Dance and Actors Studio cards the same height.
Or:
The yellow buttons are difficult to read.
Improve the contrast without changing the overall design.
Codex can then modify the existing files.
When would I need a local web server?
Opening index.html directly works well for a simple website like this.
More advanced websites can use browser features that aren't allowed when files are opened directly from your hard drive.
For example, a site using JavaScript modules, fetch(), APIs or certain security-sensitive browser features may need to run through a local web server.
But our StageSpark demonstration doesn't need that.
Step 10 — Save the finished website with Git
Once you're happy with the site, we save the current version using Git.
Open Terminal on the Mac or PowerShell on Windows and make sure you're inside the project folder.
On a Mac:
cd ~/Documents/stagespark-demo
On Windows:
cd $HOME\Documents\stagespark-demo
Now run:
git status
This shows the files that have changed.
Next:
git add .
This tells Git that we want to include all of those files.
Now save this version:
git commit -m "Create StageSpark website"
A Git commit is basically a saved point in the history of the website.
If Git asks you to identify yourself the first time you use it, enter:
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
Use the name and email address you want associated with your Git commits.
Then run the commit command again.
Step 11 — Connect the website to GitHub
Go back to the empty stagespark-demo repository you created on GitHub.
GitHub displays the repository address.
It will look something like:
https://github.com/YOUR-USERNAME/stagespark-demo.git
Copy your own repository address.
Back in Terminal or PowerShell, enter:
git remote add origin https://github.com/YOUR-USERNAME/stagespark-demo.git
Obviously replace YOUR-USERNAME with your own GitHub username.
Then enter:
git push -u origin main
Git may ask you to sign into GitHub.
Follow the sign-in instructions shown on your computer.
Once finished, refresh the GitHub page.
You should now see your HTML, CSS, JavaScript and image files stored in the repository.
What happens when I make changes later?
This is where Git starts to become useful.
Suppose I ask Codex:
Change the main button colour to dark red and make the mobile navigation
slightly larger.
Codex changes the website files.
I look at index.html again and make sure I'm happy.
Then I save the changes with:
git add .
git commit -m "Improve buttons and mobile navigation"
git push
Those three commands will become the normal routine:
git add .
git commit -m "Describe what changed"
git push
You don't need to understand everything Git can do to use this basic workflow.
Step 12 — Create a free Cloudflare account
Our website currently exists on our computer and on GitHub.
Now we need somewhere to host it.
I'm using Cloudflare Pages.
Cloudflare Pages can host static HTML websites and can connect directly to a GitHub repository.
Create a Cloudflare account if you don't already have one and sign into the Cloudflare dashboard.
Step 13 — Create the Cloudflare Pages website
From the Cloudflare dashboard open:
Workers & Pages from the Compute menu
Choose:
Create application
Then choose the Continue with Pages option. This is now next to Need to use the legacy Pages workflow? at the bottom.
Import an existing Git repository
Cloudflare will ask you to connect your GitHub account.
Allow Cloudflare access to the repository containing the website.
Choose:
stagespark-demo
and continue to the setup screen.
For our simple website there is nothing to compile.
The production branch should be:
main
There is no framework, so choose None if Cloudflare asks for a framework preset.
For a site with no build step, use exit 0 as the build command, as recommended in Cloudflare’s static HTML guide.
For the output directory, select the folder containing index.html.
In our demonstration index.html is at the top level of the repository, so the project root is the website itself.
Then start the deployment.
Cloudflare supports exactly this sort of static HTML deployment and can deploy directly from a connected GitHub repository.
Step 14 — Your website is online
After the first deployment Cloudflare will give the project an address ending in:
.pages.dev
For example:
stagespark-demo.pages.dev
Open that address and you should see the same website that you previously opened from index.html on your computer.
Except this time it is available on the internet.
You can see the finished demonstration here: Visit the StageSpark demo website.
The really useful bit — future updates are automatic
Cloudflare is now connected to GitHub.
That means our normal workflow becomes:
Ask Codex to make a change
↓
Check the website locally
↓
git add .
↓
git commit
↓
git push
↓
GitHub receives the new version
↓
Cloudflare automatically deploys it
For example:
git add .
git commit -m "Add new Street Dance information"
git push
After the push reaches GitHub, Cloudflare can automatically create and deploy the new version of the site.
There is no need to manually upload files to a web server each time.
What did I actually have to code?
Almost nothing.
I had to describe the website I wanted, organise the customer's content and photographs, review what Codex produced and make decisions about what I liked.
Codex handled the HTML, CSS and JavaScript.
That doesn't mean understanding web development is useless. Knowing HTML and CSS makes it much easier to understand what is happening and diagnose problems.
But it does mean that building a simple website has become much more approachable.
Why use plain HTML for this?
For larger projects I might choose something like Next.js.
For a four-page website like this, that would probably be unnecessary.
Plain HTML and CSS has several advantages.
There are very few moving parts. There are no software packages to constantly update. There is no complicated build process. The pages load quickly. Hosting is easy. The website can be moved somewhere else easily. And if Codex disappeared tomorrow, the files are still completely normal web files that can be edited by anybody.
That's important to me.
I'm using AI to make building the website easier, rather than making the website dependent on AI.
Final thoughts
This experiment isn't really about whether Codex knows how to write HTML.
Of course it does.
What I find more interesting is that the process starts to feel less like traditional programming and more like describing what I want.
I can give Codex the customer's text, photographs and requirements and say:
This is the website I want.
These are the pages.
This is how I want it to look.
These are the things you must not invent.
Make it work on phones and computers.
Then check your work.
Codex turns that brief into an actual website.
I can open the result by double-clicking index.html, ask for changes in normal language, save the finished version to GitHub and publish it using Cloudflare Pages.
For a simple brochure-style website, that's a remarkably straightforward workflow.