Put it online

A website is a folder of files: download the page and every file it uses, make every path relative, test the folder on your own computer, then publish it to a host.

Every website you visit is a folder of files on a computer that is always switched on. Yours can be one too.

A website is a folder of files: the page, called index.html, and every picture, stylesheet, script and data file it uses, side by side. A host keeps the folder on a computer that is always online and gives it an address.

To get your page ready:

Press Download in the playground. It saves index.html and lists every file the page uses from beside it (pictures, bootstrap.min.css, vue.js, weather.json). Download each one into the same folder.
Check every path is relative: src="trophy.svg" means "beside this page". A path from your own computer (C:/Users/…) only works on your computer.
Test the folder: open index.html from your computer. If it works there, it will work online. (A page that uses fetch needs a host to test; the rest work by double-clicking.)
Publish it with your teacher: the host and how to sign in depend on your school.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

WidthMore contexts, same idea.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

page.html

<h1>Chess club</h1>
<img src="trophy.svg" alt="A gold trophy" width="80">
<p>Chess every Wednesday at lunch.</p>

src="trophy.svg" asks for a file beside the page.

You download only index.html and open it from your Downloads folder. What do you see?An error messageA blank pageEverything, just as in the playgroundThe heading and text, with a broken picture where the trophy was

RunRun it and compare the result with your prediction.

Run

Press Download, then download each file it lists into the same folder. Open index.html from that folder. If a picture is broken, which file is missing?

page.html

<h1>Chess club</h1>
<img src="trophy.svg" alt="A gold trophy" width="80">
<p>Chess every Wednesday at lunch, in the library.</p>
<h2>Our groups</h2>
<ul>
  <li><img src="star.svg" alt="" width="20"> Beginners</li>
  <li><img src="medal.svg" alt="" width="20"> Players</li>
</ul>

Try it yourselfYour edits are saved in this browser.

I downloaded the page and its files into one folder, opened index.html from my computer, and every picture showed.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html

<h1>Chess club</h1>
<img src="trophy.svg" alt="A gold trophy" width="80">
<p>Chess every Wednesday at lunch, in the library.</p>
<h2>Our groups</h2>
<ul>
  <li><img src="star.svg" alt="" width="20"> Beginners</li>
  <li><img src="medal.svg" alt="" width="20"> Players</li>
</ul>

Four kinds of path.

Think before it goes public.

It worked on my computer.

Where does each path look for its file?

trophy.svg

images/trophy.svg

C:/Users/ada/Desktop/trophy.svg

https://example.com/trophy.svg

Which of these are fine on a public page for a school club, and which stay off it?

The club's name and meeting day

Pictures you drew yourself

Your full name and your school's address

Photos of classmates

Your email address or phone number

On Ada's computer both pictures show. Online, the trophy is a broken picture and the medal is fine. Click the line that is wrong.

ModifyChange the code on purpose and check the result.

Modify

Sam's page works on Sam's computer only. Fix its paths. The preview already shows what will go wrong online: the pictures and the Bootstrap look are missing until each path is right.

Try it yourselfYour edits are saved in this browser.

Need a hint?

Each file will sit beside index.html, so each path is just the file's name.

Another hint

src="star.svg", src="medal.svg" and href="bootstrap.min.css".

Show the expected result

What the finished page looks like — What it should look like. Your words can be different.

Fix all three paths so the page works once it is online.

This ticks when your page has all of the above.

Make TypicalBuild something new using what you have learned. Expect a few tries; that is normal.

Publish your page

Publish the page you checked in Pages for everyone:

Paste it in, press Download, and put index.html and every file it lists in one folder.
Open index.html from the folder and check every part works.
Publish the folder in the way your teacher shows you: for example GitHub Pages, Netlify Drop, or your school's own website.
Open the address on another device, such as a classmate's laptop.

Try it yourselfYour edits are saved in this browser.

My page is online at an address I can share, and I checked it on another device.

Info

Where this leads

Your page is ready for real people, and online. A page that needs a server of its own (saving data for everyone, a login) is a web app: Web apps with Flask.

You change your page after it is online. What do you do?Make a new websiteChange the files in the folder, and publish the folder againNothing: it updates itselfDelete the old one first

For teachers

Students predict that a downloaded page loses its pictures, download a page and its files into one folder and open it from their computer, match paths to where they look, sort what is safe to publish, find a path from one computer, fix three paths, and publish their own page. About 55 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can download a page and every file it uses into one folder.
I can make every path in a page relative, so it works online.
I can publish a page and check it from another device.

Before class

A website is a folder: index.html (the name hosts show first) and the files it uses, side by side. The playground's Download button saves the page as index.html, wrapped in a full HTML page if the student's code has no <!DOCTYPE>, and lists the files it uses from beside it (pictures, bootstrap.min.css, vue.js, weather.json), each with its own download link. Opening index.html by double-clicking tests nearly everything; a page that uses fetch needs a host (browsers block fetch from a file on the computer).

Publishing is teacher-led, because every host needs an account. Choose one before the lesson and check your school's rules on accounts, age and what students may publish:

GitHub Pages: free, needs a GitHub account (13 or older); upload the folder to a repository and turn on Pages. Good for students who go on to code.
Netlify Drop: drag the folder onto app.netlify.com/drop; a free account keeps the site online.
Your school's own website or learning platform, if it can host a folder of files; often the simplest for younger students, with no new accounts.
No accounts at all: students can still finish (the publish step is a "typical" step); the downloaded folder on a USB stick or shared drive is a working site.

Privacy: the sort task covers what stays off a public page. Check that no page names a student or the school, and that photos follow the school's consent rules.

Running the lesson

Predict: have everyone download only index.html first and open it, before the Run step, so the broken picture is their own.
Run: check each student's folder: index.html plus every listed file, all side by side.
Investigate: for the sort, ask "could a stranger use this to find you?"
Modify: point at the preview: the broken pictures are what Sam's visitors would see.
Make: publish together with the host you chose; open each address on another device.

The hard part (on purpose)

Things work on the student's computer and not online, and they can't see why. Ask "where is this file, and where does the path look?" before checking anything for them.

When students get stuck

Pictures are broken when index.html is opened from the computer. Ask: Is the picture file in the same folder as index.html, with exactly the same name? Fix: Download it into that folder; names must match, capitals included.
A Bootstrap or Vue page looks plain or does nothing once downloaded. Ask: Is bootstrap.min.css (or vue.js) in the folder? Fix: Download the library from the list the Download button shows.
The fetch lesson's page says Loading for ever on the computer. Ask: Was it opened by double-clicking? Fix: fetch needs a host: test it once it is published.

Stretch and support

Stretch: Make a second page (about.html) and link the two with relative links. Add the page's language and a description in the head. Run Lighthouse on the published page.

Support: Prepare one folder for the class (the run page and its pictures) so everyone publishes the same site first, then their own.

Where it leads

Web apps with Flask: sites that run code on a server, for logins and shared data. Class idea: a shared class gallery page linking every student's published page.

Sources

GitHub Docs: Creating a GitHub Pages site (checked 12 October 2026)
Netlify Docs: Netlify Drop (checked 12 October 2026)

What each step is for

Predict: Students think the page is one file; predicting a broken picture makes "a site is a folder" concrete before they download anything.
Investigate: A relative path is read from where the page is; anything that points at one computer, or at nothing, breaks online.
Modify: Making a page ready to publish is making every path relative to the page.
publish your page: Goals only: the student's own checked page, as a folder, online at an address.

Now you can

Download a page and every file it uses into one folder.
Make every path in a page relative, so it works online.
Publish a page and check it from another device.

You reached the endBack to Your site, for real

Source: content/code/site/site-publish/lesson.md