I Built a Website with an AI Coding Agent: What I Learned Using Codex in VS Code

Simon Bennett

11 min read

·

Oct 8, 2026

--

Listen

Share

Press enter or click to view image in full size

I Built a Website with an AI Coding Agent: What I Learned Using Codex in VS Code

Link to the Deep Field website

How I used OpenAI Codex inside VS Code to develop a responsive astronomy website — and what AI agents actually mean for junior developers.

As a Level 3 software development student, one of the biggest changes I have noticed in web development is how quickly AI tools are becoming part of the development process.

I have previously used AI to help explain code, generate examples and troubleshoot problems. But there is a significant difference between asking an AI chatbot:

“How do I create a responsive navigation bar?”

and giving an AI coding agent access to your project and asking it to actually make the changes.

For this project, I used OpenAI Codex inside Visual Studio Code to develop a website called Deep Field, a visual astronomy website exploring the James Webb Space Telescope, Vera C. Rubin Observatory and Nancy Grace Roman Space Telescope.

The result gave me a much better understanding of where AI agents fit into modern software development — and, more importantly, why developers still need to understand the code being produced.

What is an AI coding agent?

A normal AI chatbot generally works by answering questions.

An AI coding agent goes further.

It can work with the context of a software project, inspect files, make changes, create or modify code, and in supported workflows work through larger development tasks.

OpenAI describes Codex as an AI agent that helps developers write, review and ship code. The Codex VS Code extension brings that agent directly into the editor, where it can use context from opened files and selected code.

This creates a development loop that looks something like:

Developer → Task → AI Agent → Inspect → Plan → Edit → Test → Review → Developer

The important part is that the developer is still involved.

I don’t see Codex as:

“AI writes my website for me.”

I see it as:

“I give an AI agent a well-defined engineering task, then I review and improve the result.”

That distinction is important when learning software development.

Installing Codex in VS Code

Getting started is relatively straightforward.

1. Install Visual Studio Code

First, install Visual Studio Code if you don’t already have it.

Open your project folder as a workspace rather than working with individual files where possible.

This gives Codex a much better understanding of the project it is working on.

2. Install the Codex extension

Open the Extensions panel in VS Code.

Search for:

Codex

Look for “Codex — OpenAI’s coding agent” published by OpenAI.

The official extension is available through the Visual Studio Marketplace and provides a Codex panel directly inside VS Code.

Install Codex from the Visual Studio Marketplace

3. Sign in

After installing the extension, open Codex and sign in with your ChatGPT account.

The exact features available can depend on your account and workspace configuration. OpenAI currently supports Codex through several surfaces, including the IDE extension, CLI, desktop application and web.

4. Open your project

For a website project, I would normally have something like:

deep-field/
├── index.html
├── styles.css
└── assets/

Then open the deep-field folder in VS Code.

5. Start with a development task

Instead of immediately saying:

“Build me a website.”

I would give Codex a specific engineering task.

For example:

# Task
Create a responsive astronomy landing page using HTML and CSS.

# Requirements
- Use semantic HTML5.
- Create a responsive navigation bar.
- Include a hero section.
- Include a three-column statistics section.
- Create an image gallery.
- Use CSS Grid for the gallery.
- Include a mobile navigation layout.
- Add accessible navigation and a skip link.
- Keep HTML and CSS separate.
- Do not introduce a JavaScript framework.

This gives the agent a much clearer target.

Why prompting still matters when using an AI agent

One misconception I had initially was that an agent means prompting is no longer important.

I actually found the opposite.

The better the task specification, the better the development process becomes.

A useful prompt can be broken down into:

Role

Tell the agent what perspective it should take.

# Role
Act as a senior front-end developer reviewing a junior developer's website.Task

Clearly explain what needs to happen.

# Task
Create a responsive image gallery using CSS Grid.

Context

Explain what already exists.

# Context
The website currently uses semantic HTML and a dark astronomy-themed design.

Constraints

Explain what the agent should not change.

# Constraints
Do not introduce React.
Do not change the existing colour palette.
Keep the existing HTML structure where possible.

Acceptance criteria

Tell the agent what success looks like.

# Requirements 
The gallery should display three columns on desktop,
two columns on tablets and one column on small screens.

This is much closer to writing a software requirement than simply asking an AI for code.

Building the Deep Field website with Codex

The project I worked on is called Deep Field.

The concept is an astronomy discovery website covering three major observatories:

• James Webb Space Telescope
• Vera C. Rubin Observatory
• Nancy Grace Roman Space Telescope

The finished HTML shows that the project developed beyond a basic landing page. It contains a navigation system, hero section, telescope statistics, image archive, field notes, resources, videos, and separate Rubin and Roman sections.
That made it a useful example of where an AI coding agent can help with an actual development workflow.

Step 1: Ask Codex to establish the page structure

The first thing I would want from an agent is the basic architecture.

For example:

# Task
Plan the structure of this website before making changes.

# Requirements
The website is an educational astronomy discovery atlas.
Create sections for:
1. Navigation
2. Hero
3. Telescope statistics
4. James Webb image gallery
5. Discoveries
6. Resources
7. Vera C. Rubin Observatory
8. Nancy Grace Roman Space Telescope
9. Videos
10. Footer

# Constraints
Use semantic HTML5 elements.
Do not write the implementation yet.
Explain the proposed structure first.

This is a useful technique because it forces the AI to plan before editing.

It also gives me the opportunity to reject a bad architecture before hundreds of lines of code are generated.

Step 2: Build the visual design

The final project uses a strong visual identity.

The CSS defines reusable design variables for colours, typography and fonts:

:root {
  --ink: #f3f0e8;
  --muted: #a8a8a1;
  --black: #0a0b0d;
  --panel: #111316;
  --line: #2a2c2e;
  --lime: #d6f36b;
  --orange: #fc7345;
  --purple: #5f42ba;
}

This is something I would specifically ask Codex to do rather than allowing it to scatter colour values throughout the stylesheet.

The result is a more maintainable design system.

A useful prompt would be:

# Task
Create a reusable CSS design system.

# Requirements
Use CSS custom properties for:
- background colours
- text colours
- accent colours
- typography
- borders

The design should feel:
- futuristic
- editorial
- scientific
- premium

# Constraints
Avoid excessive gradients and avoid using a CSS framework.

This is where I think AI is particularly useful: I can describe the design intent while still reviewing the implementation.

Step 3: Creating the image gallery

Press enter or click to view image in full size

One of the strongest parts of the project is the image archive.

The HTML uses reusable image cards rather than creating each image section completely differently. The gallery includes Webb’s First Deep Field, Rho Ophiuchi, Neptune and the Carina Nebula.

The CSS then controls the layout:

.gallery-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 1.4rem;
}

There are also wide and tall cards to create a more editorial layout.

This is a good example of where an agent can save development time.

Instead of manually working out every CSS rule, I can ask:

# Task
Improve the image gallery.

# Requirements
- Use CSS Grid.
- Create a magazine-style layout.
- Make the first image wider.
- Make one image vertically dominant.
- Add hover effects.
- Keep the existing colour palette.
- Ensure the layout collapses correctly on mobile.

Codex can then implement the changes.

But I still need to look at the result.

Step 4: Making the website responsive

Responsive design is another area where coding agents can be useful.

The project includes media queries that change the navigation, hero layout, statistics and gallery when the screen becomes smaller.

For example, the navigation changes at a smaller viewport and the gallery moves from three columns towards a two-column layout.

A useful Codex request would be:

# Task
Review the website at mobile widths.

# Requirements
Check:
- navigation
- hero layout
- buttons
- image gallery
- typography
- statistics
- content spacing

# Constraints
Make the minimum CSS changes required to improve the mobile experience.
Do not redesign the desktop version.

I particularly like the phrase:

“Make the minimum CSS changes required.”

Without a constraint like this, an AI agent may decide to redesign parts of the application that weren’t part of the task.

Step 5: Accessibility should be part of the development process

One of the things I want potential employers to see in my projects is that I don’t treat accessibility as an optional extra.

The website includes a skip link:

<a class="skip-link" href="#main-content">
  Skip to content
</a>

The CSS also provides a visible focus state when the link receives focus.

The HTML also uses semantic elements such as:

<header>
<nav>
<main>
<section>
<article>
<footer>

There are also ARIA labels for parts of the interface such as the navigation and image galleries.

I could ask Codex to perform an accessibility review:

# Role
Act as a web accessibility reviewer.

# Task 
Review the current website for:
- keyboard navigation
- semantic HTML
- focus states
- image alt text
- navigation accessibility
- heading hierarchy
- colour contrast
- mobile navigation
Do not rewrite the whole site.

# Requirements
Return:
1. Problems found
2. Why they matter
3. Recommended fixes
4. Then implement the fixes after I approve them.

# Task
Review the current website for:
- keyboard navigation
- semantic HTML
- focus states
- image alt text
- navigation accessibility
- heading hierarchy
- colour contrast
- mobile navigation
Do not rewrite the whole site.

# Requirements
Return:
1. Problems found
2. Why they matter
3. Recommended fixes
4. Then implement the fixes after I approve them.

This is an important distinction.

I’m not asking the AI to blindly “make it accessible”.

I’m asking it to identify problems, explain them and then make controlled changes.

Step 6: Using an AI agent for performance improvements

The final project also contains JavaScript that lazy-loads gallery artwork using IntersectionObserver.

The website identifies gallery images with data-art attributes and only assigns the background image when the relevant element approaches the viewport.

This is a good example of a task that can be given to an AI agent:

# Task
Review the image gallery for unnecessary image loading.The gallery contains several large external images. Investigate whether IntersectionObserver can be used to lazy-load
the gallery images.

# Requirements
- Do not break the existing gallery.
- Provide a fallback for browsers without IntersectionObserver.
- Keep the existing HTML structure.
- Explain the performance trade-offs before implementing.

The important lesson is that the agent is not just generating code.

It can help me investigate an engineering problem.

Step 7: Adding new website sections

Press enter or click to view image in full size

The website eventually grew beyond the original James Webb section.

The code contains dedicated sections for the Vera C. Rubin Observatory and Nancy Grace Roman Space Telescope. The Rubin section includes statistics, field notes, galleries and videos, while Roman has its own hero, facts, discoveries, resources and media content.
This is where an agent becomes particularly useful.

Instead of saying:

“Add Roman.”

I could give Codex a reusable specification:

# Task
Add a new telescope section that follows the existing website design.

# Requirements
- Reuse existing typography and colour variables.
- Include a hero visual.
- Include three statistics.
- Include three discovery cards.
- Include an image gallery.
- Include resource links.
- Include video content.
- Make it responsive.
- Use semantic HTML.
- Do not duplicate CSS unnecessarily.

This encourages the agent to work with the existing architecture rather than creating an unrelated design.

Coding agents are powerful — but they are not senior developers

This is probably the biggest lesson I have taken from the project.

An AI agent can produce impressive code.

That doesn’t mean every piece of code it produces is correct.

A coding agent can still:

• misunderstand requirements
• make unnecessary changes
• introduce bugs
• use inappropriate dependencies
• create inaccessible interfaces
• produce inefficient code
• misunderstand existing architecture
• generate inaccurate content
• change working code while fixing something unrelated

This is why I believe AI skills should be combined with traditional software development skills.

A junior developer who says:

“Codex wrote it, so it must be right.”

is not demonstrating strong development practice.

A junior developer who says:

“I used Codex to implement the feature, reviewed the diff, tested it, identified a problem, and refined the implementation.”

is demonstrating something much more valuable.

My development workflow with Codex

The workflow I am aiming to develop is:

1. Understand

What problem am I actually solving?

2. Plan

What files need to change?

3. Prompt

Give Codex the task, context and constraints.

4. Review

Read the changes before accepting them.

5. Test

Run the website and check the behaviour.

6. Inspect

Check the browser, responsive layout, console and accessibility.

7. Refine

Give Codex a smaller follow-up task.

8. Commit

Only commit changes I understand and am happy to maintain.

This makes AI part of the development lifecycle rather than a replacement for it.

What I would show an employer

If I were presenting this project during a job interview, I wouldn’t simply say:

“I built this website using Codex.”

I’d say:

“I used an AI coding agent as part of my development workflow. I used it to help structure the site, implement HTML and CSS, develop responsive layouts, add galleries and improve performance. I reviewed the generated code and used browser testing to validate the results.”

That tells an employer much more about how I work.

It demonstrates:

• HTML and CSS knowledge
• responsive design
• accessibility awareness
• debugging
• requirements gathering
• version control discipline
• AI-assisted development
• code review
• performance awareness
• ability to explain technical decisions

These are transferable development skills.

The biggest lesson: AI doesn’t remove the need to understand code

Using Codex has actually made one thing clearer to me as a student:

Learning to code is still important.

If anything, AI makes understanding code more important.

If I don’t understand CSS Grid, how will I know whether Codex has created a sensible layout?

If I don’t understand semantic HTML, how will I know whether the generated markup is accessible?

If I don’t understand JavaScript, how will I debug an IntersectionObserver problem?

If I don’t understand Git, how will I safely manage AI-generated changes?

The AI can accelerate implementation.

But I still need the engineering knowledge to decide:

What should be built?

Why should it be built that way?

Does it actually work?

Can another developer maintain it?

My current view of AI-assisted development

As a Level 3 developer, I don’t think my goal should be to compete with AI at typing code.

My goal should be to become better at solving problems with code.

AI agents such as Codex can help me move faster between an idea and a working implementation.

But the developer still provides the requirements, judgement, testing, review and responsibility.

The Deep Field project showed me that the most useful relationship with an AI coding agent isn’t:

Developer vs AI

It’s:

Developer + AI + testing + review

That is the workflow I want to continue developing as I move from education into professional software development.

Resources

Codex

OpenAI Codex documentation

Codex in VS Code

Codex VS Code extension — Visual Studio Marketplace

Codex Help Centre

Using Codex with your ChatGPT plan

OpenAI Codex developer resources

OpenAI Developers — Codex

VS Code

Visual Studio Code

Final thought

I’m still a Level 3 software development student.

I don’t expect AI to make me an experienced developer overnight.

What I do think is that learning to work effectively with AI coding agents is becoming another important developer skill.

The developers who stand out won’t necessarily be the people who generate the most code.

They will be the people who can understand the problem, give good instructions, evaluate the result, test it properly and take responsibility for the software they ship.

That is the skill I’m trying to build.