Learn HTML by Building a Cat Photo App - Step 12

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos.</p>
      <a href="https://freecatphotoapp.com"><p/a>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.">

Your browser information:

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

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

Link to the challenge:

Sorry, every looks like step 12 has me stuffed at the moment. I have tried it multiple times. I know it won’t look like it in the code because I went to restart step before I posted this. I will have another go and see what I get wrong and post it.
Thanks, everyone.

1 Like

Ok, guys, I’ve had a bit of a go with it and this is what I got:

<a> href="https://freecatphotoapp.com"><p/a>link to cat pictures<p/a>

I don’t know why it’s not coming up but there is a, anchor at the start

You are to nest the “cat photos in your " a” tag

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

Sorry. it’s fixed now.

in this step you are originally shown these 2 lines of code:

      <p>Click here to view more cat photos.</p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>

(you can get them back by clicking the Restart Step button to reset)

the top line is a plain text paragraph which renders like below on your preview pane:

Click here to view more cat photos.

While the bottom line which is a link shows up like this:

link to cat pictures

The idea here is to change the top line only so that the preview pane displays it like this:

Click here to view more cat photos.

To do that you need to carefully add some code inside of the p element.
That code is an anchor opening tag on the left of the cat
and a closing anchor tag on the immediate right of the word photos

Hopefully knowing this, you can redo this step correctly.
Happy coding.

1 Like
  <p>Click here to view more <a href= "cat photos".<a/p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>

I gave it another go.

It’s ok I just solved it.

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