Learn HTML by Building a Cat Photo App - Step 63

Tell us what’s happening:
Describe your issue in detail here.
i have tied everything but its still saying the link text should be https.//www.freecodecamp.org. pls can i know the problem in my code

  **Your code so far**
<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <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="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>
    </section>
    <section>
      <h2>Cat Lists</h2>
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>  
      </figure>
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo">
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset>
          <legend>What's your cat's personality?</legend>
          <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
          <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
          <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
        </fieldset>
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
  <footer>
    <p>
<a href="https://www.freeCodeCamp.org">No copyright - freecodecamp.org</a> 
 </p>
  </footer>
</body>
</html>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

So the above is your attempt. And it probably shows up like this in the preview area

No copyright - freecodecamp.org

All in blue, all the words are clickable, correct?

Now try to make only the last word clickable.
Just the last word please, nothing else. Give that a try.
if you do it correctly it will look like this:

No copyright - freecodecamp.org

how do i do that, is there any style of doing it

fair question. You already know how to make an anchor tag though.
So just look at your code, specifically the anchor tag. What can you change to make the link portion be only one word instead of three?

2 Likes

still not get it, i’ve tried to check the spaces and any omitted letter

okay no problem. Let me try another way to show you how to proceed.

Can you copy this line of text below and make it into a link for me? (then show me your code?)

I am a link to google search.

(ps. just make it a link to google.com)

<p >i am a link to google search</p>
<p>i am a link to <a>google.com</a></p>

I’ve edited your post 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.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

i have gotten it thanks a lot

1 Like

Let me explain the anchor tag to you.

An anchor tag has 2 parts similar to this:
<a href="http://www.google.com">Click Me!</a>

Notice that the first part is this one:
<a href="http://www.google.com">

and that is followed by some words Click Me!

then finally we have a closing tag:
</a>

So in this example the words “Click Me!” will become the link, correct?

What if I wanted to make only Click and not Me be the link? Then I would do it like this:

Click <a href="www.google.com">Me!</a>

Notice here how I moved the location of the start tag? (It used to be to the left of the word “Click” but now it is to the right?

Seeing this, how do you think you would make the words “cat photos” into a link, without making the whole line become one?

2 Likes

thanks i already got the step 63

1 Like