Learn HTML by Building a Cat Photo App - Step 22

HTML-CSS
1

Having trouble with Step 22. I’ve looked on the forum and can’t seem to find out why my code isn’t reading correctly.

This is what the hint says: The new image should have an src value of https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg . Make sure the src attribute’s value is surrounded with quotation marks.

At this point, I feel like my code does that so is anyone able to help me find out what I’m missing or doing wrong?

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <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>

<!-- User Editable Region -->

        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul> 
        <img src="https://cdn.freecodecamp.org/cirriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">


<!-- User Editable Region -->

      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 22

Link to the challenge:

2

That first i should be a u.

If you are able, I would recommend you copy/paste strings from the instructions in order to avoid these types of errors.

3

Thanks for checking that!

I fixed the typo but this is the new message: The new image does not have an src attribute. Check that there is a space after the opening tag’s name and/or there are spaces before all attribute names.

4

Hmm, the only thing I needed to change to get your HTML to pass was the typo I pointed out above. Perhaps you accidentally changed something else when you fixed your code? You might want to reset the step to get the original back and then carefully add the img again, making sure not to change anything else.

Or you could paste your updated HTML in here (all of it please) so we can help you find the remaining error. Be sure to use the following method to paste your HTML in here so we can see your actual code.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

2 Likes
5

Resetting it worked! Thanks so much for all the help!

1 Like