📚 Intermediate: Contents (2/8)
  1. Build your first web page with Codex
  2. How folders, files, and HTML fit together
  3. Change an existing page the way you want
  4. Read errors and fix them with Codex
  5. Connect Google Drive and search your first doc
  6. Connect GitHub and choose repository access
  7. Connect Notion and check which pages it can see
  8. Connect Slack and summarize a channel

🔁 Cuts repetitive work

New to AI? Start here → Start 1. ChatGPT vs. Codex: what's the difference?

Last checked: November 10, 2026

How folders, files, and HTML fit together

In one line

How folders, files, and HTML fit together
Once you know where things are saved, changing and reopening them gets easier.

The big picture

Illustration (may look a little different from the real screen)

How the files in a folder make up a web page
Click the picture to see it larger.

Follow along

First, open your practice folder

We’ll use the codex-practice folder from the . If you haven’t made it yet, do that lesson first.

Open the folder in Finder on Mac or File Explorer on Windows. Check that it’s the same location as the working folder you chose in Codex.

Files can be split up by job

HTML holds what’s on the page, CSS holds colors and layout, and JavaScript handles actions like clicking and saving. In a small practice project, they can all go inside one HTML file.

How to check the actual files

1. Check the file name and extension

index.html and index.html.txt are different files. If extensions are hidden, look for the option to show them: on Mac in Finder Settings → Advanced, and on Windows in File Explorer’s View menu. Menu names can differ by OS version.

2. Open the same file in your browser

Double-click index.html. If an editor opens, use Open With to pick your browser. Check that the path Codex told you matches the location of the file your browser opened.

If the project is split into several files, don’t move just the HTML. Move the related CSS, JavaScript, and images too, keeping the same structure. Relative paths are worked out from where the current file is.

Prompts you can copy

Understand the current file structure

Don't change anything in the project. First explain the file structure. Tell me which file is the one people open first, and what each file does. List the relative paths to the CSS, JavaScript, and images linked from the HTML. If there's only one file, explain simply how structure, style, and behavior are split up inside it.

Check for broken file links

On the current page, [the colors / images / button actions] aren't showing up. Before creating any new files, compare the paths in the main HTML with the actual folder structure. Check file names, capitalization, and extensions, and fix only the problem spot. Tell me separately about anything you couldn't check in a real browser.

Where people get stuck

Lots of people get stuck here. Find the one that matches your situation!

If colors or images disappeared

Illustration (may look a little different from the real screen)

Comparing the file explorer and the path in HTML side by side
Click the picture to see it larger.

File paths differ from project to project. Don’t copy the names in this picture as is. Check with Codex using the actual file names in your folder.

Quick check: If the CSS and images are separate files, will it always look the same if I move just the HTML file to another folder?

Answer: “No, check the linked paths and related files together”
Separate files are connected by paths. If you move only the HTML, the design or images may disappear.

Official sources

Next tip

Change an existing page the way you want →

I'm stuck here

Stuck while following along? Tell me where. Only the site owner sees this. Leave your email only if you'd like a reply.