Learn HTML by Building a Cat Photo App - Step 12

Can’t figure out how to turn cat photo into a link to https://freecatphotoapp.com by adding opening and closing anchor (a) tags around these words been trying to figure it out for hours

the previous step you turned the words `link to cat pictures` into a link by placing them between opening and closing anchor (`a`) tags. You can do the same to words inside of an element, such as a `p` element.

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com by adding opening and closing anchor (a) tags around these words.

  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p href="https://catphotos.com">

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

  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p href="https://catphotos.com">

      <a href="https://freecatphotoapp.com">link to cat pictures</a>
**Your code so far**
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p href="https://catphotos.com">

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

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

Link to the challenge:

I’ve edited your code for readability. 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 (').

Reset your code, start over.

You have this:

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

The first line is a paragraph. The second line is a link, with the clickable words “cat photos”.

You want to replace the “cat photos” in the first line with the link, so the “cat photos” in the first line will be clickable.

I did that now it’s saying you should nest a anchor element within the(p) element

Please copy the new code here within a pre formatted code block.

click here to view more cat photos.

cat photos

is this how it’s suppose to look

  is this how it's suppose to look

click here to view more cat photos.

cat photos

You need to do the formatting I described in my above post. The forum is trying to interpret the HTML you posted. You have to tell it not to by either putting three backticks on the line before the code and three on the line after … or use code button in the editor, it looks like </>.

It’s explained above.

thank you

[quote=“tcnew12, post:7, topic:583007, full:true”]
is this how it’s suppose to look

click here to view more cat photos.

cat photos [/quot

Thank you i got you were very helpful

Thank you for your help I got I appreciate your help

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