Learn HTML by Building a Cat Photo App - Step 46

HTML-CSS
1

I don’t know what a id is they didnt explain it that well:
Describe your issue in detail here.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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">
          <label><input id="Indoor" type="radio"></label>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

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

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

Link to the challenge:

2

Hey!
If you’re studying in a school or a college, or even if you’re an employee in company, Its possible that there are a lot of people with your same exact name and even in some cases, same age and birth date.

In that case, chances are that the institution that you’re working with has given you an ID so they can identify you individually. So they don’t accidentally send your paycheck to some other employee :joy:

In the same way, when we are building websites, we use a lot of elements with the same name. for example, In your code here, you’re using elements tags with the same tag name li.

So how do we target a specific element?
That’s exactly where ID’s shine. Just like other HTML attributes, you can add an id attribute directly onto your HTML element and do some really interesting stuff with it. (you’ll find that out in the later freeCodeCamp challenges).

Here’s how you would add an id of taran to a button element:

<button id="taran"> </button>

Hope this helps! :smile:

1 Like
3

wait nvm i got it :slight_smile:

4

uhhh I just finished writing it :joy:

5

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