Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
hek
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<a href="https://freecatphoto.com">cat photos</a></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>

Your browser information:

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

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

Link to the challenge:

1 Like
2

Be sure to read the hint carefully. It is telling you where the error is. Is your href URL exactly the same as the instructions are asking for?

Also, look at the preview pane. Do you see anything weird about that sentence. Usually you have a space between words, right? Does your sentence have a space between the word “more” and “cat”?

1 Like
3

it isn’t working …

1 Like
4

Obviously I can’t know why it isn’t working if I can’t see what you’ve changed :slight_smile: Please paste your updated HTML in here.

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.

1 Like
5 
type or paste code here
``` <p>Click here to view more cat photos<a href=<'https://freecatphotoapp.com'><a/></p>
1 Like
6

Honestly, I would stick with the first code you provided:

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

You are close with this (much closer than the HTML you just posted). Go back and read my first response to help fix the two errors.

1 Like
7

**Tell us what’s happening:**t
Describe your issue in detail here.
its saying the links text should be cat photos…im really confused
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 <a href='https://freecatphotoapp.com'></a>
      <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/105.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
8

Originally the preview pane showed this plain text message:

Click here to view more cat photos.

If you do what this exercise wants you to do, this line will look like this instead:

Click here to view more cat photos.

(the last 2 words become a link)

1 Like
9

i asked for help ,this didnt

1 Like
10

look at your preview pane. Do you think you have fulfilled the requirement for this step?
If yes, you should see
Click here to view more cat photos.

If not, then ask yourself, what is missing?
(it should be clear if you just look)

1 Like
11

where should i nest a new anchor element between the p element

1 Like
12

nesting is very simple, if you have this to begin with:
<p>hello I'm a header</p>
then nesting is placing another element between the two given tags
<p>hello I'm a <h1>header</h1></p>

Notice how the h1 element is fully nested inside the p element.

Your anchor should also be fully nested in the same way (between the opening and closing tags of the p)

1 Like
13

it isnt working …so what now

14

does your preview pane show what is expected?
or is the problem that you have made it look correct but the step is not accepting the code?
(probably good to share your newest attempt either way)

1 Like
15

yes ,it isn’t accepting the code

1 Like
16

please share your newest code

1 Like
17

Click here to view more cat photos

1 Like
18 
type or paste code here
```<p>Click here to view more cat photos<a href=<'https://freecatphotoapp.com'><a/></p>
1 Like
19

So do you think your code has made the last two words into a link?
(Are you able to click the word “cat photos”?

1 Like
20

Your opening ‘a’ tag has a bracket that doesn’t belong there.

1 Like