Building a Cat Photo App: An HTML Beginner's Guide

In this tutorial, we will walk you through the process of building a simple Cat Photo App using HTML. We will cover the basic HTML structure, tags, and elements necessary to create a webpage that displays cat photos and information. Let's get started!

HTML Structure and Basic Tags

First, let's set up the basic structure of our HTML document. We start with the <!DOCTYPE html> declaration, which tells the browser that we're using HTML5. Then, we have the <html> element, which contains the entire HTML content of the page. The <head> section contains meta information and the title of the webpage, which is displayed in the browser's title bar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CatPhotoApp</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Creating the Cat Photo App

Inside the <body> tag, we'll build our Cat Photo App step by step.

1. Adding a Main Heading and Cat Photos Section

Let's start by adding a main heading and a section for displaying cat photos. We use the <h1> tag for the main heading and the <section> tag to group related content.

<main>
  <h1>CatPhotoApp</h1>
  <section>
    <h2>Cat Photos</h2>
    <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>
</main>

In this section, we have a subheading <h2> for the Cat Photos section, a paragraph <p> with a link to view more cat photos, and an image <img> wrapped in an anchor <a> tag. The image is displayed as a clickable link to the cat photo.

2. Displaying Cat Lists

Next, let's add a section for displaying lists of things that cats love and hate. We use the <ul> tag for an unordered list and the <ol> tag for an ordered list. Each list item is represented by the <li> tag.

code<section>
  <h2>Cat Lists</h2>
  <h3>Things cats love:</h3>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <!-- Rest of the code -->
</section>

In this section, we have a subheading <h3> for the Things cats love, followed by an unordered list <ul> with three list items <li>.

3. Adding Images with Captions

Let's enhance our Cat Lists section by adding images with captions using the <figure> and <figcaption> tags.

<section>
  <!-- Previous code -->
  <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>
  <!-- Rest of the code -->
</section>

In this code, we've wrapped the image <img> and its caption <figcaption> inside the <figure> tag. The <em> tag is used to emphasize the word "love" in the caption.

4. Creating a Cat Form

Now, let's add a section with a form where users can submit cat photos. We use the <form> tag to create the form and various form elements like <input>, <fieldset>, <legend>, and <button> to gather and submit information.

code<section>
  <!-- Previous code -->
  <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>
  <!-- Rest of the code -->
</section>

In this section, we've added a form with radio buttons, checkboxes, a text input field, and a submit button. The form will be submitted to the URL specified in the action attribute of the <form> tag.

Finally, let's add a footer section with a copyright notice.

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

In the footer, we have a paragraph <p> element containing a link <a> to the freeCodeCamp.org website.

That's it! You have now built a basic Cat Photo App using HTML. This tutorial covered the fundamental HTML tags, including headings, paragraphs, lists, images, forms, and the basic structure of an HTML document.

Remember, practice is key to mastering HTML. Feel free to explore and modify the code to further enhance your Cat Photo App. Happy coding!

Tutorial taught by FreeCodeCamp

Mriganshu Bora's Blog