Lesson 3 · about 15 minutes

🖼️ More Bricks: Headings, Lists & Pictures

Your page has walls now. Today you get THREE new LEGO bricks — and one brand-new superpower that makes pictures possible.

🎬 Watch first (90 seconds)

Headings come in sizes

You already know <h1>, the giant headline. But there's a whole family: <h1> down to <h6>. They are sizes of importance, like a book:

<h1> = the book title. One per page. The boss.
<h2> = a chapter title. Use these for the big parts of your page.
<h3> = a section inside a chapter. Smaller again.
…all the way down to tiny <h6> (almost nobody uses that one!).

Bricks INSIDE bricks: lists

Here's a cool trick — LEGO bricks can go inside other bricks. That's called nesting. A list is a big brick (<ul>, "unordered list") holding little bricks (<li>, "list item") inside it:

<ul>
  <li>Never melts</li>
  <li>Tastes like rainbows</li>
  <li>Glows in the dark</li>
</ul>

The browser draws a bullet point (•) before each item. Swap <ul> for <ol> ("ordered list") and the browser numbers them for you — 1, 2, 3 — perfect for top-3 lists or recipes.

One more mini-brick: wrap important words in <strong> and the browser makes them bold. It means "this bit really matters!"

The new superpower: attributes

💡 The one idea of this lesson Some elements need extra info. You write it INSIDE the opening tag, like a sticky note on the brick. That extra info is called an attribute (it'll be in the glossary too!):

<img src="photo.jpg" alt="a red sneaker">

src says WHICH picture to show. alt describes the picture for people who can't see it (and it shows up if the picture breaks). And notice: <img> has NO closing tag — it's a special self-contained brick. Nothing goes inside a picture, so it doesn't need one!

The pattern is always the same: name="value", with quotes around the value. You'll meet lots more attributes soon — this is a big deal!

🛠️ Build it (the fun part)

🧪 Your mission Give your product page a features list and its very first picture!

Open practice/myshop.html in VS Code (the page you built in lessons 1 and 2).
Inside <body>, under your paragraphs, add a chapter heading:
```
<h2>Why it's awesome</h2>
```

Under it, add a bullet list with 3 features of YOUR product (type it, don't copy!):

<ul>
  <li>Ties itself in 2 seconds</li>
  <li>Never gets smelly</li>
  <li>Comes in <strong>glow-in-the-dark</strong> green</li>
</ul>

Now the picture! Add this line (it's a free placeholder photo from the internet):
```
<img src="https://picsum.photos/300/200" alt="a photo of my product">
```
Change the alt words to describe YOUR product.
Save (⌘S), then refresh your browser (⌘R). Bullet points AND a photo. Your page is starting to look like a real shop! 🎉

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

Type in the dark box, watch the preview update live, then press Check my code ✔.

🔨 Now break it!

Time to break things on purpose in myshop.html. Predict what will happen BEFORE you refresh!

Change <ul> and </ul> to <ol> and </ol>. Save, refresh. Numbers! Change it back (unless you like it).
Break the picture on purpose: change the src to "https://picsum.photos/oops". Save, refresh. You'll see a broken-picture icon and your alt text — THAT is exactly what alt is for! Fix the src again.
Change your <h2> to <h6>. Save, refresh. See how tiny? Now you know why chapter titles use h2. Put it back.

⚠️ If your picture doesn't show at all Check the quotes! Attributes need them: src="...". Also check there's a space between img, src, and alt. And remember: save FIRST, then refresh.

🎮 Quiz time

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

📚 Want more?

⭐ Best thing to read next MDN: HTML images — the official Mozilla guide to <img>, src and alt, with extra tricks like picture sizes. Reading it counts as a lesson block!