Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Hi I’m sorry I’ve been stuck on this one problem for over an hour, I’ve looked through all the answers to other questions about question 12 and not one of them have helped me understand what is wrong with my code. nothing looks wrong with it to me. please help I’m losing my mind.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p>
        See more cat photos in our gallery. <a href="https://freecatphotoapp.com">cat photos</a>
      </p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </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/115.0.0.0 Safari/537.36

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

Link to the challenge:

2

You didn’t add an a element around the words ‘cat photos’ in the text hare.

3 Likes
3 
<p>
        See more <a> cat photos </a> in our gallery. <a href="https://freecatphotoapp.com">cat photos</a>

like this? it doesn’t seem to work

2 Likes
4

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3 Likes
5

Closer, but

  1. you have inserted extra spaces

  2. your new a element doesn’t have the right attribute (no href)

  3. you have that extra stuff you added after the .

3 Likes
6 
p>
        See more cat photos in our gallery. <a href="https://freecatphotoapp.com"><a cat photos</a>
      </p>

I have changed it to this but I still do not understand it

2 Likes
7

am I at least getting closer here? because I just feel like I’m sat here staring at the same text and not getting anywhere

2 Likes
8

I would suggest resetting the lesson. What they are asking is that you take the existing text, “See more cat photos in our gallery” and turn “cart photos” into a link. Do not add the words “cat photos” to the end.

9

thank you, I’ve tried resetting. when I delete the words cat photos it just says The link’s text should be cat photos . You have either omitted the text or have a typo.

10

You undid the fix I told you to make. That should be a bad sign.

The solution to this issue is not to delete every change before the . but instead to delete every change after the .

11

if I delete everything after . it’s saying I no longer have a link

<p>
       See more <a cat photos</a> in our gallery.
        </p>
12

Compare with

What’s different?

13

the spaces and the < > but when trying all different solutions none of them work

14

Hold up. Answer my question here. What is different between the top (bad) and bottom (ok) code?

15

the spaces and the <>

16

Lets fix the < > first.

Fix this code so each tag has both < and >

17 
 <p>
       See more <a> cat photos</a> in our gallery.
        </p>
18

Ok, now lets get rid of all those extra spaces and line breaks.

You have an bunch of extra spaces between <p> and “See”, you added an extra space between <a> and “cat”, and you added a bunch of extra spaces after the .

19 
<p>See more <a>cat photos</a> in our gallery.</p>
20

Ok, you are mostly there.