Project: Building a Cat using HTML

How I got started

I began my coding journey by immersing myself in the world of web development through freeCodeCamp’s Responsive Web Design curriculum. Following their step-by-step instructions, I embarked on a series of projects aimed at mastering the essentials of creating responsive and visually appealing web pages. While these projects were guided by freeCodeCamp’s curriculum, they provided me with hands-on experience and a solid foundation in HTML and CSS. I highly recommend freeCodeCamp to anyone starting out in coding, as it has been an incredibly rewarding experience for me. I look forward to continuing my learning journey with freeCodeCamp and exploring their diverse range of courses.

Objective

The objective of this project was to construct a simple web page showcasing various elements using HTML. Specifically, the task was to create a page centered around cats, incorporating images, lists, forms, and links.

What I Learned

Through the process of completing this project, I gained practical experience in structuring web pages, incorporating various HTML elements, and creating interactive forms. This project served as an excellent starting point in my web development journey, providing me with a solid understanding of HTML fundamentals.

HTML Structure: Through this project, I learned how to structure a web page using HTML elements such as <html>, <head>, <body>, <main>, <section>, <h1>, <h2>, <p>, <ul>, <ol>, <li>, <figure>, <figcaption>, <form>, <fieldset>, <legend>, <input>, <label>, and <button>.
Working with Links and Images: I gained experience in embedding hyperlinks (<a>) and images (<img>) into my HTML document. This allowed me to create clickable links to external websites and display images within the page content.
Lists and Figures: I learned how to create both unordered lists (<ul>) and ordered lists (<ol>) to organize information. Additionally, I utilized the <figure> and <figcaption> elements to associate images with captions, enhancing the visual presentation of content.
Forms and Inputs: This project introduced me to HTML forms (<form>), which are essential for collecting user input. I learned how to create text inputs (<input type="text">), radio buttons (<input type="radio">), and checkboxes (<input type="checkbox">), along with associated labels (<label>), to build interactive forms.

The Code

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CatPhotoApp</title>
  </head>
  <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>
      <p>
        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

HTML

The Output

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

Cat Lists

Things cats love:

cat nip
laser pointers
lasagna

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

Top 3 things cats hate:

flea treatment
thunder
other cats

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

Cat Form

Interactive link

Click on the Free Code Camp if you want to learn how to build this webpage yourself or click next to view another Free Code Camp Project

FreeCodeCamp