HTML practice


<!DOCTYPE html>

<html lang="en">

  <head>
    <title>CatPhotoApp</title>
  </head>

  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <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>catnip</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">freeCodeCamp.org</a>
      </p>
    </footer>

  </body>

</html>

    CatPhotoApp 

    

     

CatPhotoApp

     
       

Cat Photos

       

Everyone loves cute cats online!

       

See more cat photos in our gallery.

        A cute orange cat lying on its back.      

     

       

Cat Lists

       

Things cats love:

       
             
  • catnip
  •          
  • laser pointers
  •          
  • lasagna
  •        

       

          A slice of lasagna on a plate.          
Cats love lasagna.
         

       

Top 3 things cats hate:

               
             
  1. flea treatment
  2.          
  3. thunder
  4.          
  5. other cats
  6.        

       

          Five cats looking around a field.          
Cats hate other cats.
         

     

     

       

Cat Form

       

         
            Is your cat an indoor or outdoor cat?                                  

         

            What’s your cat’s personality?                                              

                                               

     

   

   

 

Last modified on 2025-12-04 • Suggest an edit of this page
← Prev: UTF-8 and HTML5
Next: Understanding Stack, Tech Stack, Programming Languages, and Frameworks →