Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

I can’t find the error

<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/119.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 12

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Welcome to the community @Dalva !

It is important that you share, in your own words, the problem to make it easier for us to help you and guide you to a resolution.

Here is the example for Step 12 which provides excellent guidance and example of how to anchor the two words cat photos to for a link while remaining within the p element statement.

<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>

Notice how everything is inside of the p element tags.

Notice how freeCodeCamp is touched on both sides by the anchor, while it remains within the statement.
Notice the opening anchor has the href attribute and its assigned value.
Nothing other than the anchor has been added, deleted, nor changed within the p statement.

I hope this helps you move on in your coding journey.

Happy coding!

4

I looked, but I can’t find the error…

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

You’ll need to paste your HTML in here using the following technique so we can see it. Also, don’t add a second cat photos text to the HTML. You want to turn the existing cat photos in the middle of the p element into a link. The text cat photos should only appear once in the HTML.

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.

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

Those look like single quotes, not back ticks. If you can’t find the back tick on your keyboard then use the </> button in the menu bar of this editor as I suggested above.

UPDATE: Great, it looks like you’ve figured it out!

8

I’ll repeat my previous advice:

9

I tried this way too, but doesn’t work:

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

You are very close. Remember, there needs to be a space between every word in the p element. Look at your preview pane. Is there a space between every word?

11

I did it! Thank you so much for your help and patience.

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.