Learn HTML by Building a Cat Photo App - Step 9

Tell us what’s happening:

Describe your issue in detail here.
How to put alt with
A cute orange cat lying on its back

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more cat photos in our gallery.</p>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 9

Can you show where you’ve tried to add the alt attribute? I only see a src attribute.

1 Like

Inside the img element, add an alt attribute with this text:
A cute orange cat lying on its back

Yes, I know those are the instructions.

I am asking you to show where you tried to add the alt property. Somewhere inside of your img element you need to have alt="my alt text" or something like that.

I been having trouble doing that. I put first <imag src= inside and then I put alt= orange cat

Please show the code you wrote.

This is the code I been typing. I might be doing it wrong.

<imag src=lying on its back.jpg
alt=A cute orange cat

Four problems

  1. You should not change ‘img’ to ‘imag’

  2. You should not change the src attribute

  3. That is not the value for alt you were told to use - you set the value for the alt to the src instead

  4. Don’t delete the > at the end of the img element

I would reset the code and only add the alt="the thing you were asked to use" to the img element. Making other changes will cause problems.

2 Likes

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

What do i do now that I dont have the lesson?

What do you mean by ‘I don’t have the lesson’?

It’s here

The lesson I needed help is no longer there

Did you click on the link I just posted?

I did not see a link

Your browser is not showing this link?

oh sorry yeah it did

Add the “alt” somewhere inside your img element (preferably at the end)

i.e
<img src=“link” alt = "A cute orange cat lying on its back>

Mod Edit: SOLUTION REMOVED

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like

Oh ok my bad

When I usually get stuck and check the solution I try to understand what I did wrong and what they did to get to this conclusion

i thought other people would do the same