Learn HTML by Building a Cat Photo App - Step 14

HTML-CSS
1

I thought I had the code right but I keep get the error " Your anchor (a ) element should have an opening tag. Opening tags have this syntax: <elementName> .

   **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 target="_blank" <a href="https://freecatphotoapp.com"> 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

It seems you are getting this error because you edited the previous line of code from Step 13.

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

Try and examine this line of code again and see where you went wrong.

Also, you haven’t done the exercise that has been asked of you for step 14 from what I can see, which is to convert the image into a link. You also seem to have an extra angled bracket on that line.

3

im trying to convert the image to a link and that’s where I’m having the issue.

4

first you shouldn’t nest anchor (a) inside another anchor (a) which you should only have one anchor (a) for all your code on line 7.
After that you can move one with step 14 which to turn the image into link. Wrap anchor (a) around your image text with the following instruction and don’t forget the closing tag,

5

I have to wrap a image with a link and nothing seems to be working, I’m so lost on this step lol.

   **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><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">cat photos<target="_blank>.</p>

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

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

Link to the challenge:

6

Click the Restart Step button to clean your code.
You have this by default, which is the image element:

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

Now, pretend all that code is named IMAGE. This step asks your to turn that IMAGE into a link. To turn stuff into a link, use the anchor tag.

<a>IMAGE</a>

But the anchor is useless without the “href” attribute, so add it.

How it works:
<element attribute="value"></element>
How it works in anchor:
<a href="destination_link">IMAGE</a>

That’s what you need to do, put anchor < a> tags around the whole “image” element, using the https://freecatphotoapp.com as the value.

7

Click here to view more <a href=“https://freecatphotoapp.com” cat photos.

still not working

8

I have the one opening and closing tags too

9

Please understand that < img> is an element. And that “alt” and “src” are attributes of that element, image. “alt” is the text if the image fails to load, “src” is the link for the image itself, the image file. The < img> element using all of that shows the image on the page, like this:

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

< a> is another element, the anchor element, just like < img>. But as you said, the anchor needs a closing tag.

<a>something</a>

You already have the image, which is, again:

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

Now you just need to put that image inside the anchor tag, anchor tag with the href attribute:

<a href="https://freecatphotoapp.com">your image will be here</a>
10

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