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

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <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.">
    </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/106.0.0.0 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
2

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

3

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

4

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

5

Sorry. it’s fixed now.

6

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
7 
  <p>Click here to view more <a href= "cat photos".<a/p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>
8

I gave it another go.

9

It’s ok I just solved it.