Your first page, all the way to the web.

Keep working on the same small page throughout this route. You need a text editor and a folder you control. Publishing also requires a static hosting account of your choice; these lessons do not create one for you.

All learning paths · Download the release checklist

01 · Make a page worth sharing

Open the first-page builder. Choose a learning page, portfolio or guide. Write your own introduction, add at least two sections and one useful HTTPS link. Move a section and inspect how its navigation follows. Compare available and narrow preview widths.

Checkpoint: explain the difference between the browser tab title, h1 and h2. Follow a section link. You can return here with your browser’s Back command.

02 · Keep a local copy

Download my-first-page.html into a new folder named first-website. Open the saved file in a browser and test the links. Open the same file in a plain-text code editor. Find the style element: all CSS is inside this file. Change one sentence, save and reload the browser.

first-website/
  index.html   ← your downloaded file, renamed for hosting

Rename your copy to index.html, keeping the .html extension. Some systems hide extensions: check that the name is not index.html.txt. Keep a second copy before editing. Learn more in document structure and static websites.

03 · Learn to repair the next obstacle

Complete these exercises, then apply the same reasoning to your own file:

• A navigation that will not fit: allow whole links to wrap.
• A missing image: compare the exact filename with its request.
• A very long project name: keep every character readable at a narrow width.
• A button with no response: connect a JavaScript selector to its HTML target.

The exported builder page needs no JavaScript. The button exercise is a separate introduction to interactions you may add later.

04 · Test before uploading

Use Tab and Shift+Tab to visit the skip link, section links and useful link. Press Enter to activate a link. Check a narrow window and increased text size. Complete the accessibility laboratory to practise focus, labels and contrast.

If you add your own image in the editor, keep it in the folder, use its exact relative path and supply appropriate alternative text. The builder export itself has no image dependencies.

05 · Publish the folder

Choose hosting that serves static HTML files. In its official documentation, find its folder-upload or static-deployment instructions. Cloudflare Workers Static Assets is one option; this site uses it. Read Cloudflare’s static-assets documentation (new tab). Provider interfaces, account requirements and prices can change; review them before creating or buying anything.

1. Choose the first-website folder as the output to publish. Its top level must contain index.html, rather than another first-website folder.
2. Upload or deploy using the host’s documented workflow. If it offers a build command for an already-built static folder, follow its instructions for that case; this HTML file needs no compilation.
3. Record the exact HTTPS address returned by the host. A custom domain is optional.
4. Open that public address and compare the words and layout with your local file. A downloaded file alone has not been published.

06 · Verify the public result

• Open the exact HTTPS URL and follow every section link and external link.
• Repeat the narrow-width and keyboard checks on the published page.
• Change one sentence locally, publish again and confirm the new sentence at the public URL. Use the delivery checklist if the old text remains.
• Visit an invented missing path. Check the response using the host’s tools or a network inspector; a friendly error page by itself does not prove HTTP 404. Read real 404 responses.
• If you later split the project into files, verify a nested page and stylesheet too. Try the filename debugging trail.

07 · Help people discover it

Once the site works, give it a descriptive title and description. Add a sitemap when it has several intended public pages: write and review a sitemap. Search-engine submission requests discovery; it does not guarantee indexing or ranking.

Your finished project

You have a local source copy, an exported document, an exact public URL and a checked update. Explain where your HTML lives, where its CSS lives, how a fragment link finds a section and what you would inspect when an image fails.

Continue with the publishing toolkit → · Compare the web then and now

Original learning route by Mario V.W.B.R. Obst with AI assistance · November 2026. This route does not save progress or upload learner files.