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 <a href= cat photos></a>.</p>
      <a href="https://freecatphotoapp.com">cat photos</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 OPR/91.0.4516.16

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

Link to the challenge:

MY ISSUE IS STEP
I don’t know how to do the step 12

You can see the words cat photos underlined next to the image in the preview now. That’s your link; feel free to give it a click.

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com by nesting these words inside of a new anchor element.

2

For your new anchor tag, please refer to and learn from the anchor element on the 2nd line quoted above.

Specially notice the differences in the use of href and the link text location.

3

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">cat photos</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 OPR/91.0.4516.16

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

Link to the challenge:

MY ISSUE IS STEP 12
I could not do it. Please help.

Question.

Step 12

You can see the words cat photos underlined next to the image in the preview now. That’s your link; feel free to give it a click.

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com by nesting these words inside of a new anchor element.

4

the words cat photos here are not a link — what have you tried?

5

I don’t know how to insert text into p elements and also nesting them to an anchor elements.

Thank you

6

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">cat photos</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 OPR/91.0.4516.16

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

Link to the challenge:

Please help me.
I can’t pass through step 12.
Question
You can see the words cat photos underlined next to the image in the preview now. That’s your link; feel free to give it a click.

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com by nesting these words inside of a new anchor element.

7

hi, please help us understand where you are stuck.
Are you for eg. unsure of a certain meaning or how to create a link for eg?

1 Like
8

Are you having trouble inserting text into your p elements? Or nesting them into a anchor elements? Please be specific.

9

I think both of them is my problem.
I don’t know how to insert text into p elements and also nesting them to an anchor elements.

Thanks for your reply.

10

I don’t know how to insert text into p elements and also nesting them to an anchor elements.

Thanks for your reply.

11

To nest elements within each other, for example, you could so something like:
<div><p></p></div>.
In this case, the <p> element is being nested within the <div> element.
As for text, you want to put the text that the step is asking you to write down as well.
For example:
<p>*put your text in here!*</p>
The text goes in between both the beginning and ending tags.
Hope this helps!

12

The anchor element was covered in the last few steps before this one. You can take another look back.

Basically just like what you did in step 1 and 2 when you nested some text inside the h1 and h2 elements, making a link is the same but with the anchor tag.

<a href=“website-link”>text here</a>
13

Please do not create any more duplicate topics. One topic per step please. I have merged your duplicates.

14

Its_Whiz, Thank you very much. I appreciate. This gave me a lot of sleepless night. You are a genius! I have gotten it.

15

Having the same issue with question 12 here what I did please help! Thanks so much!

image
image1920×2560 582 KB

16

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button (which looks like a ?) located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.