Learn HTML by Building a Cat Photo App - Step 64

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
Please help me with this Step 64

<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>
   No Copyright - <a href="https://www.freeCodeCamp.org"></a>freeCodeCamp.org
      </p>
    </footer>
  </body>
</html>

Your browser information:

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

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

Link to the challenge:

2

Place the word at the end of the line inside your anchor to make it a link

3

ok let me try it :slight_smile: i will tell you if it works!

4

Solution needed
Solution needed1360×768 290 KB

Please tell me now what did I do wrong!

5

Please put the word in between the anchor tags as mentioned. It is still outside.

6

It is best to post actual code instead of a picture.

7

i did post my actual code above , please check :slight_smile:

8

Hi dear, please try my suggestion…

9

Can you explain it to me practically - I am yet confused :sweat_smile:

10

You only posted a picture of your updated code.

11

Where is the text ‘cat photos’ in this anchor element?

12

yeah , a moment please!

13

Recall this code you wrote back in step 12?

Notice that the anchor tag has some words “cat photos” and they are now clickable?

In your code in this new step, you need to have something in the middle of the anchor tag so it becomes a link.
So what you have now is just an empty tag.

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

So please move the last word above :point_up:t4: Inside the anchor tag (between the opening and closing of it)

1 Like
14

Tell us what’s happening:
Describe your issue in detail here.

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>
    No Copyright - freeCodeCamp.org <a href="https://www.freeCodeCamp.org"></a>
      </p>
    </footer>
  </body>
</html>

Your browser information:

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

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

Link to the challenge:

15

ok i will try your suggestion , Thanks in advance!

16

This is still not inside of the anchor element. The text you want to make clickable goes between the anchor element tags.

17

ok i will try it and will inform you guys :slight_smile:

18

It’s giving me this error :slight_smile:

Test

Sorry, your code does not pass. Don’t give up.

Hint

Your anchor (a) element should have an href attribute with the value https://www.freecodecamp.org. You may have omitted the attribute/value, or have a typo.

I applied this code :

Solution needed
Solution needed1360×768 259 KB

19

Looks like you deleted something you need? There used to be some text on that line “No Copyright -“

Click restart step to put it back and try again to make the link without deleting the given text.

Also make sure your href is the one given to you exactly.

20

ok i will do it for sure :slight_smile: