Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

I have been stuck on Step 12 forever and I DO NOT know what to do. My preview shows my code as a link with only “cat photos” as the link. Not sure what I am doing wrong for them not to accept it. PLEASE HELP!!!

My current code: I have also tried putting it all on one line…nothing works! :frowning:

Click here to view more cat photos cat photos

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO:  link to cat photos -->
<p> 
  Click here to view more cat photos <a href="https://freecatphotoapp.com" target="_blank"> cat photos </a> 
</p> 
      <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 (X11; CrOS x86_64 14816.131.4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

Your didn’t wrap the existing “cat photos” words, you added more and added some extra spaces and deleted the period.

3

Hi, and welcome to the free code camp community!
The goal is to make the text “cat photos” clickable. You don’t need to add another cat photos statement. Basically, just use the original sentence “Click here to view more cat photos”. Put the opening a tag with href attribute before the text cat photos. Then, put the closing a tag after the text cat photos (at the end of the sentence).

2 Likes
4

Thank you! I appreciate your assistance. I did what you described and it still isnot working. This is my code after your suggestions:
<p> <a href="https://freecatphotoapp.com <a href="cat photos"> Click here for more cat photos </a> </p>

5

Now you have too much text as the link

6

Thank you, so I changed it and moved the Click here for more to directly after the opening

tag, and now only “cat photos” is the actual link, but it still says its not correct. I feel like I’m going in circles.

Click here for more cat photos cat photos

7

hi there, I wrote a post to help people with step 12 but first you must understand the objective of this exercise
If you click the reset button (which looks like an arrow turning), you will be shown the original code which includes this paragraph element
<p>Click here to view more cat photos.</p>

The objective is to turn the last two words of the paragraph into a link.
That means that the last two words will become clickable when you view them in the preview pane. Nothing else will change.

Here’s the post that explains the process

1 Like
8

You wrote ‘cat photos’ twice again

9

Thank you so much, I am going to reset the code now and keep this in mind. Fingers Crossed…

1 Like
10

Hello again, I have reset the Step and added my opening and closing anchor tags in front and behind cat photos

Click here to view more link to cat pictures

11

remember I said the original code was
<p>Click here to view more cat photos.</p>

The final result should be exactly the same words
but the last two words should be a link

So the final result should be similar to
Click here to view more cat photos.

12

This is what I get when I use the reset arrow:


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

I then added, <a href=" before cat photos and I added after the period after cat photos. It still makes the words link to cat pictures, the link.

13

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.

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

14

you are not supposed to modify the anchor element that is below the paragraph.
Leave it alone and focus on adding new code within (inside) the paragraph element text to make cat photos become a link

1 Like
15

Stop adding more words. The only text must be

Click here to view more cat photos.

You must only one opening anchor tag and one closing anchor tag. Add or change nothing else.

16

Will do…will I need to use target= ", or just the open and opening and closing anchor tags? A previous reply stated I used too many words.

17

Got it…trying again…

18

you do not need the target attribute
You just need to understand the problem, then apply the anchor tags to get the result.

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

This is the original, after I reset the code.

I understand the lesson is to create a hyperlink for the text cat photos, that will take the user to the website described in the original code, however, the top sentence says cat photos, and I am adding my opening and closing anchor text to the front of cat photos and the end of cat photos, after the period.

Another reply stated I should use only 1 opening and 1 closing anchor element. So I removed the opening anchor element from the bottom line and the end of the bottom sentence and moved it to the cat photos, because it states I needed to nest in p element (an error message), which I see is only the first line.

It also states that a links text MUST BE PLACED BETWEEN THE OPENING AND CLOSING TAGS of an anchor element, hence the reason I put it at the beginning and end of the text “cat photos”.

I just do not know why or what I am doing wrong.

This is my updated code:

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

Nested in between the p element.

20

okay please listen now.

Do not modify anything at all except the line with the p tag on it.
Everything else must remain as-is.

In the p tag line, you are to -add- code only.
Do not delete anything or change anything.
Just add your anchor tag.

Please review my post to see how to add the anchor tags.
or review steps 10 and 11.

Again. Do not delete anything.
Do not change anything.
Just add code.