Lesson 1 · about 15 minutes

🚀 Your First Web Page

Today you build a REAL web page for your fake product — with your own hands, no AI. By the end you'll know the secret every website is built on.

🎬 Watch first (90 seconds)

The big secret

Every website you have ever seen — YouTube, Roblox, everything — is made of three things working together, like a house:

HTML = the walls. It says what's ON the page: headlines, text, pictures, buttons.
CSS = the paint. It says how it LOOKS: colors, sizes, where things go.
JavaScript = the electricity. It makes things HAPPEN when you click.

Today: walls only. And here is the whole trick of HTML in one line:

💡 The one idea of this lesson HTML is made of LEGO bricks called elements. Each brick looks like this:

<p>Some words</p>

<p> is the opening tag ("a paragraph starts here"), </p> is the closing tag ("the paragraph ends here" — see the /?). The browser reads these labels and draws the page.

That's it. That is genuinely how the whole web works. Two bricks are enough for today:

<h1> → a giant headline
<p> → a paragraph of normal text

🛠️ Build it (the fun part)

🧪 Your mission First, invent your fake product! A candy that never melts? Sneakers with rockets? A game studio? Pick a name — then build its very first page:

Open VS Code (the app you're probably reading this next to!).
In the practice folder, create a new file called myshop.html. The .html ending is important — it tells the computer "I am a web page".

Type this (really type it, don't copy-paste — your fingers are learning too!), but replace the words with YOUR product:

<h1>Robo Sneakers</h1>
<p>The first shoes in the world that tie themselves.</p>
<p>Made for kids who are too busy to bend down.</p>

Save the file (⌘S).
Find myshop.html in Finder and double-click it — it opens in your browser. THAT IS YOUR WEB PAGE. You made that! 🎉

🕹️ Try it right here — the lesson checks your code!

Type in the dark box, watch the preview update live, then press Check my code ✔ to see if you nailed the task.

🔨 Now break it!

The best way to understand code is to break it and watch what happens. Try each experiment, save, and refresh the browser (⌘R). Predict what will happen BEFORE you refresh!

Delete the closing </h1> tag. Save, refresh. What went weird?
Put it back. Now change <h1> and </h1> to <p> and </p>. What changed?
Add a third <p> paragraph about the price of your product.

⚠️ If nothing changes when you refresh You probably forgot to save the file first. Save (⌘S), THEN refresh (⌘R). Every coder on Earth makes this mistake daily.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Creating the content — the official beginner guide from Mozilla (the Firefox people). It covers today's lesson with a few extra details. Reading it counts as a lesson block!