How the web works, and your first page

Find out what happens when you type an address into a browser, and build the foundation of your website.

What happens when you open a website

When you type something like www.myschool.com into a browser, here’s what happens:

The browser sends a message over the internet to a server – the computer where the website lives: “Hey, send me the page!”
The server replies and sends back files – text, images, code.
The browser draws the page on your screen using those files.

The files the server sends are written in a language called HTML. And that’s exactly what you’re about to learn. For now your website won’t be on a server – it’ll live on your own computer, and we’ll put it online in the very last lesson.

Pick your project

Before you write a single line, decide what you’re actually building. You’ll work on one of these projects for the whole level:

🏫 My school’s website – schedule, lunch menu, events, teachers
🙋 My personal website – about me, what I like, my creations
🌍 A travel journal – trips, photos, memories
⚽ A sports club website – team, matches, training

Picked one? Great. Every lesson’s tasks will cover all four projects – just find the one that’s yours.

Show me: the skeleton every page on Earth starts with

Every web page – from yours to YouTube’s – starts with the exact same skeleton:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Let’s translate that into plain English:

Code	What it tells the browser
`<!doctype html>`	”Heads up, an HTML page is starting!”
`<html lang="en">`	”Everything inside is one page, and it’s in English.”
`<head>` … `</head>`	”Here’s information about the page.” Visitors don’t see it.
`<meta charset="UTF-8">`	”There might be special characters here, be ready for them.”
`<title>` … `</title>`	The page’s name – shown in the browser tab.
`<body>` … `</body>`	”Everything the visitor actually sees starts here.” All your content goes here.

Notice how tags work: <h1> opens something and </h1> (with the slash) closes it again. Whatever is between them belongs to that tag. Just like parentheses.

Your turn 💪

Open your my-website folder (from the Prep Level) in VS Code, and open the index.html file inside it. Delete whatever’s there and type the page skeleton from the example above.
Change the <title> and <h1> to match your project, and add a <p> paragraph below the heading with one sentence about what your website is.
Save (Ctrl+S) and open index.html in your browser (or refresh the page with F5).

Not sure how? Here are solutions for each project:

🏫 Solution: My school's website

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Solution: My personal website

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Solution: Travel journal

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Solution: Sports club website

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Check yourself: The browser tab shows your website’s name, and the page shows your heading and sentence. If so – the foundation stone is laid!

What to take away from this lesson

A website = files that a server sends to a browser. The browser draws a page from them.
Every page has the same skeleton: <head> (information about the page) and <body> (visible content).
Tags open like <this> and close like </this>.