html · level 1 · unit 7 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A great page starts with a .
Big pages are small pieces working together. Start with a sketch: a rough drawing of what goes where. Then build it from the top down, one landmark at a time.
The skeleton holds everything. The <header> says who you are. <main> holds the good stuff: headings, paragraphs, a picture, a list. The <footer> signs off.
Run your page after every few lines. If something looks odd, check the tags around it. The bug is usually a missing closing tag or a typo.
<!doctype html>
<html lang="en">
<head><title>About Mo</title></head>
<body>
<header><h1>Hi, I'm Mo</h1></header>
<main><p>I love <strong>baking</strong>.</p><img src="cake.svg" alt="My lemon cake"></main>
<footer><p>Made by Mo</p></footer>
</body>
</html> Press show my page to see it here.
Short elements can sit on one line, like the header here. Longer ones read better spread out.
guess first
Every piece at once. What will this show?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<main>
<h2>Things I love</h2>
<ul>
<li><em>Rainy</em> days</li>
<li>My dog, <a href="https://example.com/biscuit">Biscuit</a></li>
</ul>
</main>
<footer><p>Made by Mo</p></footer>
your turn
Your turn. Start your own page.
Put your name in the title and the heading. In the blank inside <main>, write a paragraph about you and a list of three things you love.
Press show my page to see it here.
- the tab says about and your namenot checked yet
- the heading says hi with your namenot checked yet
- main has a paragraph about younot checked yet
- main lists three things you lovenot checked yet
fix it
The cake picture is missing. Can you fix it?
Press show my page to see it here.
- the picture's file is
cake.svgnot checked yet - the picture has its alt textnot checked yet
- The cake picture does not appear. Look closely at its tag.
- Every attribute value needs a quote mark at each end. Count them around
cake.svg. - Add a quote mark straight after cake.svg, before alt, then press run.
nailed it
you built a whole web page. :D
- Sketch first, then build one landmark at a time.
- Run often, and check the tags around anything odd.
- You know enough HTML to build a real page.
new words in your collection
- sketch
This lesson isn’t saved. A free account remembers every lesson you finish.