Learn HTML by Building a Cat Photo App - Step 64

HTML-CSS
1

i cant figure out how to make a link
Your code so far

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

<!-- User Editable Region -->

      <p>No Copyright - <a href="https://www.freeCodeCamp.org"></p>

<!-- User Editable Region -->

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

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

Link to the challenge:

2

A link has both an opening and closing a tag. You only have the opening tag. The text for the link goes between those tags. So if you want to turn freeCodeCamp.org into a link then it should be between the opening and closing a tags.

3

putting a closing a tag doesnt work

4

Well, you also need to add the text freeCodeCamp.org in the link too. If you are still having problems then you’ll need to paste your updated HTML in here so we can see what you did.

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.

5

No Copyright - <a href = "https://www.freecodecamp.org" https://www.freecodecamp.org"

6

sorry wrong one let me post the real one

7

<a href = “https://www.freecodecamp.org” https://www.freecodecamp.org"

8

huh. its not letting me post

9

You need to follow the directions I gave above for pasting code in here.

Please paste all of your HTML, not just the part you think is relevant.

10

im not posting what is relevant im posting the entire thing and the site wont allow me

11

If you click the </> button in this editor menu you don’t get two sets of triple back ticks with the words “type or paste code here” between them?

12 
   <p>No Copyright - <a href="https://www.freeCodeCamp.org" </a></p>
13

Perfect.

A tag always starts with < and ends with >. Does your opening a tag have both?

The text for the link is freeCodeCamp.org. Link text goes between the opening and closing a tags.

14 
 <p>No Copyright - <a href ="https://www.freeCodeCamp.org"></a></p> still doesnt work
15

You don’t want to ignore this advice.

16 
<p>No Copyright - <a href ="https://www.freeCodeCamp.org">< "https://www.freeCodeCamp.org"></a></p>
17

The text freeCodeCamp.org goes between the a tags. You have attempted to add an HTML tag between the a tags.

Remember, you started out with the following text in the p element:

No Copyright - freeCodeCamp.org

That should stay the same. You are only turning the freeCodeCamp.org into a link by wrapping it in an anchor element.

18 
   <p>No Copyright - <a href>freeCodeCamp.org</a></p>       



shows the link but doesnt pass
19

Doesn’t the href attribute need a value? You had it in there before but took it out for some reason?

2 Likes
20

GOT IT THANK YOU! I got it i got it thank you

1 Like