Learn HTML by Building a Cat Photo App - Step 14

HTML-CSS
1

Tell us what’s happening:
i am using the <a href target=> with the proper url address, closing my anchor tag**, I see i am using a closing

which think is the problem

  **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" 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."><a href target="https://freecatphotoapp.com"></a></p>
  </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; 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

Beautifully done on adding a new anchor tag which is well-formed and has all the correct values.
Just one problem, the instructions say to “turn the image into a link”.
So what do you think is missing?
(by image , they are referring to the <img... line btw. in case you were wondering)

3

So i see I uploaded image from URL line, with an alt text. Am i suppose to insert the link anchor after my URL line, with a >. then delete the whole ALT attribute?

What i thinking by your comment
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"><a href target="https://freecatphotoapp.com"</a></p>

4

Here’s another hint. Anchor tags have a start and closing tag for a reason. Say I have this text:

I am a link

Right now the words do not link to anything. But I can turn them into a link by nesting them inside the anchor tag so that I get this

I am a link

Using this code

<a href=“#”>I am a link</a>

So to turn anything into a link, the anchor start tag must be placed on the left and the end tag in the right hand side of the text/image/element/etc

If you understand this, then look at the original code you posted and ask yourself, what is the anchor tag start to the left of? What is the closing tag to the right of? Whatever is in the middle is the new link.

1 Like
5

I guessing that I may need to activate the anchor command, THEN use my photo source URL

6

Tell us what’s happening:
Took some suggestions from a helpful advisor, I activated the target/link anchor FIRST, follow with my URL + ALT, with a closing tag, I see the index finger icon change from the standard pointer, so I know that I am on the right path. yet once I point, to the photo, nothing happens. This exercise is frustrating and cause me to avoid this site for a whole day. I want to be positive minded and take on this challenge of learning a complete new skill set, Coding, but without proper source material, i feel that I have to make sense of random commands/elements

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; 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:

7

Compare with our other anchor element

Vs

Also, you deleted the closing > on your img element

8

I don’t want you to be frustrated. There are multiple ways to learn HTML. FCC uses the project-based style of learning but you could also just as easily look at an article on the basics of HTML like this one if you prefer to read about things in one shot:

1 Like
9

thank you so much, with your suggestion with trial and error, i was able to solve exercise 14. I thought *<a target=“blahblah”*was an actual command or element. I realize that target was used as an generic example meant to plug in. I think part of my problem or issue is actually understanding the question or task at hand. Its embarrassing knowing that my misunderstanding or lack HTML code knowledge is slowing my progress on coding. Sorry for the lengthy rant, but thank you non the less.

1 Like
10

Please do believe me when I say you are not alone! I also struggle to understand instructions like these. The style of expression used in the exercises is very very concise and specific! But the good news is, once you get stuck a few times you get the hang of understanding the instructions style and the hints etc. I am sorry there is a bit of a learning curve to this, but unfortunately that is where we stand.

1 Like
11

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