Learn HTML by Building a Cat Photo App - Step 12

HTML-CSS
1

Hey guys,
I am stuck on stage 12. I am trying to follow the example but it doesnt work.

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

Please paste your HTML in here using the following method so we can see what you have tried.

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.

2 Likes
3

is this any better? thatā€™s the code i entered following the example given but doesnt work. Thank you.

4

Yes, that is better.

You want to turn the words ā€œcat photoā€ in the middle of the p element into a link. You turn words into a link by wrapping them in an anchor tag. This is done by placing an opening a tag before the words and a closing a tag after the words. Look at the example in the instructions to see how the word ā€œfreeCodeCampā€ is turned into a link to see how it is done.

So thatā€™s what you need to do to the words ā€œcat photosā€ in the p element.

1 Like
5

Still confused. where do you put the ā€˜aā€™ anchor? I have tried to follow the example but I dont know whatā€™s my mistake.
Here is what I tried to do as shown in the example:

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more cat photos <a href="https://freecatphotoapp.com"> in our gallery.</p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <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>
6

I guess I need to learn more about the basics to understand every aspect of this better (element, tag, anchor etc.) I just started yesterday :slight_smile: Thanks for the help!

7

Iā€™ll quote myself :slight_smile:

Let us know what you donā€™t understand about that explanation. There are no ā€œstupidā€ questions. We were all beginners at one time.

Also, maybe it will help if I paste the example in the instructions in here:

<a href="https://www.freecodecamp.org">freeCodeCamp</a>

That turns the word ā€œfreeCodeCampā€ into a link. You want to turn the words ā€œcat photosā€ into a link. So you would wrap them in a tags just like the example did for ā€œfreeCodeCampā€.

1 Like
8 
Step 12
You can turn any text into a link, such as the text inside of a p element.

<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
In the text of your p element, turn the words cat photos into a link by adding opening and closing anchor (a) tags around these words. Then set the href attribute to https://freecatphotoapp.com

in the tutorial, as shown above, after the word ā€œI thinkā€ the (a) anchor is added. I am trying to do the same think. I open an (a) anchor after the words and try to add href as link shown and close the anchor.
what am I missing? Thanks for your understanding!

9

This is the wrong way to look at it. In the example, the word ā€œfreeCodeCampā€ is turned into a link. So the opening a tag is added immediately before the word ā€œfreeCodeCampā€ and the closing a tag is added immediately after the word ā€œfreeCodeCampā€. In other words, you position the a tags based on the words you want to turn into a link.

In your code:

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

you put the opening a tag after the words you want to turn into a link instead of before them.

2 Likes
10

I got it!! Thank you again. You had explained it perfectly I dont know what I was thinking. :smiley:

1 Like
11

Thank you so much @bbsmooth , you just saved me from posting this same exact question. I was so puzzled but now i under where i messed up at and it was so small.

Thank you again.

1 Like
14

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