Learn HTML by Building a Cat Photo App - Step 12

You should nest a new anchor (a ) element within the p element
i keep getting this error and am unsure of what ive done wrong.please help

Your code

See more cat photos in our gallery

cat photos.

so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p> See more cat photos in our gallery</p> <a href="https://freecatphotoapp.com">cat photos</a>.</p>
     

<!-- 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/118.0.0.0 Safari/537.36 Edg/118.0.2088.46

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

Link to the challenge:

Don’t add any new text to the HTML. You added the text “cat photos” after the p element and turned it into a link.

Instead, you want to turn the text “cat photos” that is already there in the middle of the p element into a link.

thanks i definitely dropped the ball there thanks .im still have trouble getting through this .now i keep getting this: You should nest a new anchor (a ) element within the p element.

See more in our gallery

In order for us to see your actual HTML, you’ll need to paste your code in here using the following method.

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.

this work for me

Mod edit: removed solution

be carefull the gaps…!

@tsolakidis.g

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

2 Likes

i still haven’t figured out a solution yet .

Then you can share you newest code following these steps so we can see what you have

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

2 Likes

Here is an article explaining how to link text and images inside nested elements you may find helpful.

2 Likes

There should only be one instance of the words cat photos. You have properly created a link around the correct words but it is in the wrong place. Also, that last </p> after your <a> element is doing nothing. You have already closed your <p> element before the opening tag of your <a> element.

1 Like

Here you give a good trial, but need to change a liitle.

First, kindly remove the space after your opening p tag
There should be no space allowed in order to show your text as result.

<p> See more cat photos in our

Second this step is telling you to put an anchor tag

See how we put our text in anchor tag.

<a href="link">Hello World</a>

Third we will learn how we can put our anchor tag in p tag

Suppose I wanna convert coding into a link then I will wrap that into an anchor tag

<p>This is a <a href="link">coding</a> world</p>
This how we can convert any text into an link.

Hope this help you.

Happy coding.

1 Like

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