Ada’s Journal
Another image, another chance to disappoint Professor Babbage. We’re adding a lasagna picture to our cat photo app, and I’m starting to wonder if these cats have any nutritional understanding whatsoever. Lasagna? Really?
I’ve been adding images for a few lessons now, so this feels almost routine. src attribute, check. alt text for accessibility, check. But there’s always that tiny voice in my head wondering if I’ll mess up the quotation marks or forget a space. Precision matters in HTML, even if it seems trivial.
The lesson is straightforward — add an image right after the unordered list about things cats love. Which, apparently, includes lasagna. I’m picturing Professor Babbage raising an eyebrow at this culinary choice. “An image of lasagna, Ada? In a cat photo application?” His disapproval is almost audible.
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>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
</section>
</main>
</body>
</html>
Professor Babbage’s Review
Correct. Image is positioned properly with both attributes set exactly as specified.
Grade: Good
What Went Well
- Image placed in correct location after the unordered list
- Both src and alt attributes properly formatted with quotation marks
Room for Improvement
- None.