Your first local web page

This lesson is still being tested: it improves with learners' feedback. If something is unclear, it is the lesson that needs fixing, not you.

By the end of this lesson, you will be able to

have a web page in a single file built;
open it in your browser, without installing or publishing anything;
ask for a precise change, and see it after a reload;
have the three parts of a page explained to you: the content, the appearance, the behavior.

Why it matters to you

A web page is first of all a file, like a document. It opens in your browser, from your computer, with no hosting and no account. It is the ideal testing ground: you see the result right away, nothing leaves your home, and you can start over any time. All the following lessons start from here.

Before you start


You need	Claude Code (app or terminal), in Manual mode, your project folder (lesson 1), and a browser (Chrome, Firefox, Safari or Edge)
Cost	The agent subscription: Claude Pro at minimum, €18 per month excl. VAT billed monthly, or €15 per month excl. VAT with the annual plan of €180 paid up front; prices shown on claude.com/pricing on 24/10/2026
Duration	60 minutes
Reminder	The page stays on your computer: nothing is published

Understand it in 3 minutes

A web page in a single file ends in .html. It contains three parts, often in the same file:

Part	What it does	Example
HTML	The content and its structure	The title, the paragraphs, a list
CSS	The appearance	The colors, the sizes, the layout on a phone
JavaScript	The behavior	What happens when you click

Three rules for a first page:

A single file, which you can copy, send, back up.
Nothing loaded from the Internet: no font, image or script coming from elsewhere. The page works offline, and nothing is sent to an outside service each time it is opened.
Readable on a phone: the layout adapts to small screens.

Reloading. The browser shows the version it loaded. After each change to the file, reload the page: according to the Chrome documentation, Cmd + R on Mac, Ctrl + R on Windows.

Do it together

1Step 1: Have the page built

In Claude Code, on your project folder, in Manual mode:

Create index.html: a simple home page for [your project], based on [your sheet or your notes].
A single file, with nothing loaded from the Internet (no external fonts or images), readable on a phone.
Do not invent any information: whatever is missing is written as [to be completed]. Do not create any other file.
Then tell me how to open it.

Read the permission request before accepting: it should concern index.html, in your folder.

In our test on 24/10/2026, for the book club’s home page, the answer stated that the page “loads nothing from the Internet” and listed the information left [to be completed].

2Step 2: Open it

On Mac

In the Finder, open your project folder and double-click index.html. It opens in your usual browser. To choose another browser: right-click (or Control-click), Open With.

On Windows

In File Explorer, open your project folder and double-click index.html. It opens in your usual browser. To choose another browser: right-click, Open with (exact label not confirmed).

Look at it on a small screen

Make the browser window very narrow, like a phone: the text should stay readable, with no sideways scrolling.

3Step 3: A precise change

Ask for one thing at a time, and check it:

In index.html, make the title dark blue and add a welcome sentence under the title: "[your sentence]". Do not change anything else.

Reload the page (Cmd + R or Ctrl + R). Check the change, and that nothing else moved.

4Step 4: Understand what is inside

Explain index.html to me in 5 lines, without jargon: where is the content, where is the appearance, and is there any JavaScript? Do not change anything.

Your turn

Have the page for your project built, with the three rules.
Open it, look at it in a narrow window.
Make three changes, one at a time, reloading after each.
Write in your journal what you learned about the file.

Check your work

It worked if:

index.html opens with a double-click, without a connection;
the page stays readable in a narrow window;
each change was checked after a reload;
you can say where the content and the appearance are in the file.

Common mistakes:

asking for five changes at once, and no longer knowing which one broke what;
forgetting to reload the page;
accepting a write outside the project folder;
a page that loads a font or an image from the Internet, without meaning to.

Keep it and pick it up later

Keep the page in the project folder, next to the specification.
After a successful change, save a version (lesson 5).

Going further

optional

According to the Chrome documentation, right-clicking an element of the page, then Inspect, shows its code and its appearance rules.

New words

5 words explained

Word	What it means
Local web page	An .html file opened from your computer, without being online
HTML	The content and structure of a page
CSS	The appearance of a page: colors, sizes, layout
JavaScript	The behavior of a page: what happens when you click
Reload	Make the browser read the file again, to see the latest version

The test in step 1 was actually run with Claude Code 2.1.310, in an isolated test folder (test report, T53). The test sessions with Claude Code were run in non-interactive mode (claude -p), once each: what you see may differ (permission requests, wording, number of questions). To be checked: opening by double-click on Windows was not tried (no Windows PC).