Ada’s Journal
Another day, another tag. Professor Babbage would probably appreciate my growing comfort with adding semantic elements. We’re adding an <h3> to our cat photo app, which feels like we’re building some kind of feline encyclopedia.
I’m noticing a pattern in these lessons — we keep adding layers of structure to our HTML. First, we had sections. Then we added lists. Now we’re getting more specific with headings. It’s like we’re building a house, but the house is made of cats and their preferences.
The instruction is simple: add an <h3> with the text “Top 3 things cats hate:” right before the section closes. I’m already imagining the list that might come next. What DO cats hate? Probably not lasagna, since we know they love that.
Ada’s Code
index.html
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
<h3>Top 3 things cats hate:</h3>
</section>
</main>
</body>
</html>
Professor Babbage’s Review
Correct placement, correct text, colon included. Your journal’s house metaphor is overwrought for adding a single tag.
Grade: Good
What Went Well
- H3 positioned correctly after figure element
- Exact text match including colon
Room for Improvement
- None.