Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Tell us what’s happening:

So am trying but nothing works i think is href bc is red but am not sure

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>

<!-- User Editable Region -->

      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <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/128.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 12

2

There are now two cat photos here. There should only be the first one and it should be clickable.

Your versions does this:
See more cat photos in our gallery. cat photos

But the correct version does this:
See more cat photos in our gallery.

3

Its still not working and the href is still red

4

the red is just syntax highlighting, not a symptom of it being wrong. Post your latest code please

5 
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery. </p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <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>
6

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 (').

7

What? so what is problem with my code i dont understand what you mean by Backtics

8

You can just highlight the code and click this code formatting button in the editor. It will fill in backticks for you.

Screenshot 2024-09-15 091705

9

looks like you added an extra space after the dot here.

When posting code on the forum, you have to take an extra step to make it readable.
The earlier posts were showing you what to do for that.

1 Like