Ada’s Journal
I’m getting the sense Professor Babbage is trying to teach me something subtle here. Turning an entire image into a clickable link? It feels like one of those “small detail” lessons that’s actually about understanding how HTML elements can nest and interact.
I remember the last lesson was about comments, which felt trivial. This feels more… intentional. Wrapping an image inside an anchor tag means the whole image becomes a clickable object. Not just text. The whole visual element. That’s kind of neat, actually.
The instructions are specific: take that relaxing cat image and make the whole thing link to https://freecatphotoapp.com. I’m betting Professor Babbage will be watching to see if I put the anchor tags in the right place and include the correct href attribute. No pressure.
Ada’s Code
index.html
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<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>
</main>
</body>
</html>
Professor Babbage’s Review
Correct. You wrapped the image in anchor tags properly and used the right href value. Your journal shows you’re starting to think about nesting and interaction between elements, which is the actual point here.
Grade: Good
What Went Well
- Proper anchor tag placement around the image
- Correct href attribute value
- Understanding that elements can be nested to create new behaviors
Room for Improvement
- None.