FreeCodeCamp CatPhotoApp: A Step-by-Step Guide to Building Your First HTML Project

FreeCodeCamp CatPhotoApp: A Step-by-Step Guide to Building Your First HTML Project

Dive into the world of web development with FreeCodeCamp’s CatPhotoApp! This tutorial takes you through each step of creating a fun and interactive Cat Photo App, helping you grasp the fundamentals of HTML and responsive web design. Whether you’re a beginner or looking to refresh your skills, follow along as we build this project together.

FreeCodeCamp CatPhotoApp

Welcome to the FreeCodeCamp CatPhotoApp tutorial! Here, we will take you step-by-step through the process of building a simple yet fun Cat Photo App. This project is designed to help you understand the fundamentals of HTML while creating something enjoyable. Let’s dive into the steps!

Signing Up and Choosing the Course

To get started, head over to freeCodeCamp and sign up for a free account if you haven’t already. Once you’re signed in, navigate to the Responsive Web Design Certification. You will find various projects, and our focus will be on the Cat Photo App.

Step 1

In this step, we will create the basic structure of our Cat Photo App. Open your index.html file and add the following code:

<h1>Cat Photo App</h1>

Replace the default text with “Cat Photo App” to ensure it reflects the purpose of our application. Don’t forget to check your code!

Step 2

Next, let’s add a second header. This time, we will use an H2 tag. Below your H1 tag, insert:

<h2>Cat Photos</h2>

This H2 tag will serve as a subheading under our main title. Remember, the H1 tag should only be used once per page!

Step 3

Now, let’s introduce a paragraph element. This will allow us to add descriptive text about the cat photos. Insert the following code below your H2:

<p>Everyone loves cats!</p>

Notice how the paragraph tag adds spacing above and below the text, making it look neat and organized.

Step 4

In this step, we will add a comment to our code. Comments are crucial for leaving notes in your code without affecting the output. Add the following comment above your paragraph tag:

<!-- To do: Add a link to cat photos here -->

This comment will help you remember to add links later.

Step 5

Let’s introduce the main element. This element represents the main content of your HTML document. Wrap your H1, H2, and paragraph tags with the main tag:

<main>
    <h1>Cat Photo App</h1>
    <h2>Cat Photos</h2>
    <p>Everyone loves cats!</p>
</main>

This helps to structure your document effectively.

Step 6

Indentation is essential for readability. Make sure your nested elements are properly indented. This makes it easier to identify which elements belong together.

Step 7

Now, let’s add an image element. The image tag does not require a closing tag. Below your paragraph, insert:

<img src="your-image-url-here" alt="A cute cat">

This tag will display a cat image. Make sure to replace your-image-url-here with the actual URL of the image you want to display.

Step 8

In this step, we will add the src attribute to our image tag. This attribute specifies the source of the image. Ensure that you include double quotes around the URL:

<img src="https://example.com/cat.jpg" alt="A cute cat">

Step 9

Each image should have an alt attribute for accessibility. This will describe the image if it fails to load. Update your image tag to include the alt attribute:

<img src="https://example.com/cat.jpg" alt="A cute cat sitting on a windowsill">

Step 10

Next, we will add a link using the anchor tag <a>. This will allow users to click through to another page. Below your paragraph, add:

<a href="https://www.freecodecamp.org">Cat Photos</a>

This creates a clickable link labeled “Cat Photos”.

Step 11

Now, let’s insert text between our anchor tags. Update it to say:

<a href="https://www.freecodecamp.org">See Cat Photos</a>

Step 12

We will add the phrase “See more” before our anchor element:

<p>See more <a href="https://www.freecodecamp.org">Cat Photos</a></p>

Step 13

Encapsulate your “See more” text within a paragraph:

<p>See more</p>

Step 14

Now, let’s turn the text “Cute Cats” into a link. Remove the text and create an anchor tag:

<a href="https://example.com">Cute Cats</a>

Step 15

We can add a target attribute to open links in a new tab:

<a href="https://example.com" target="_blank">Cute Cats</a>

Step 16

Remove the comment we added earlier as we have completed that task:

<!-- To do: Add a link to cat photos here -->

Step 17

Now, let’s wrap our image element in an anchor tag:

<a href="https://example.com"><img src="https://example.com/cat.jpg" alt="A cute cat"></a>

Step 18

Encapsulate your H2, paragraph, and anchor elements within a section:

<section>
    <h2>Cat Photos</h2>
    <p>Everyone loves cats!</p>
    <a href="https://example.com">See Cat Photos</a>
</section>

Step 19

Create another section below the first one:

<section></section>

Step 20

Inside the new section, add another H2 element:

<h2>Cat List</h2>

Step 21

Now, let’s create an H3 element:

<h3>Things Cats Love</h3>

Step 22

Create an unordered list element:

<ul></ul>

Step 23

Add list items to your unordered list:

<li>Catnip</li>
<li>Laser Pointers</li>
<li>Lasagna</li>

Step 24

Now, let’s add an image of lasagna:

<img src="https://example.com/lasagna.jpg" alt="A slice of lasagna">

Step 25

Create a figure element:

<figure></figure>

Step 26

Inside the figure, add a figcaption:

<figcaption>Cats love lasagna.</figcaption>

Step 27

Wrap the word “love” in an emphasis tag:

<figcaption>Cats <em>love</em> lasagna.</figcaption>

Step 28

Add another H3 element below the figure:

<h3>Top 3 Things Cats Hate</h3>

Step 29

Create an ordered list:

<ol></ol>

Step 30

Inside the ordered list, add list items:

<li>Flea Treatment</li>
<li>Thunder</li>
<li>Other Cats</li>

Step 31

Create another figure element:

<figure></figure>

Step 32

Add an image inside the figure:

<img src="https://example.com/another-image.jpg" alt="Another cat">

Step 33

Add a figcaption for the new figure:

<figcaption>Cats hate other cats.</figcaption>

Step 34

Wrap the word “hate” in a strong tag:

<figcaption>Cats <strong>hate</strong> other cats.</figcaption>

Step 35

Finally, add a section element below the second section:

<section></section>

FreeCodeCamp CatPhotoApp Step 36

In this step, we’re going to add an H2 element with the text “Cat Form.” Open your HTML file and insert the following code:

<h2>Cat Form</h2>

This header will serve as the title for the form section of our Cat Photo App. Make sure to check your code!

FreeCodeCamp CatPhotoApp Step 37

Now, we need to create a form element. This is essential for collecting user information such as their name and email. Below the H2 tag, add the following:

<form></form>

This form element will not display anything visually yet, but it’s crucial for our app to function properly.

FreeCodeCamp CatPhotoApp Step 38

Next, we will add an action attribute to the form. This attribute specifies where the form data should be sent upon submission. Add the following action:

<form action="your-action-url-here"></form>

Make sure to replace your-action-url-here with the actual URL where the data will be sent. This step is important for form functionality.

FreeCodeCamp CatPhotoApp Step 39

Now, let’s add an input element inside our form. This will allow us to collect user data. Insert the following code:

<input>

This input element doesn’t require a closing tag. It will create a blank field on our form where users can enter information.

FreeCodeCamp CatPhotoApp Step 40

It’s time to specify the type of our input field. We want it to be a text field. Update your input element like this:

<input type="text">

By setting the type to text, users can see what they are typing into the field.

FreeCodeCamp CatPhotoApp Step 41

Next, we will add a name attribute to our input element. This is crucial for accessing the data later on. Add the following:

<input type="text" name="catphotoURL">

This allows us to retrieve the input value when the form is submitted.

FreeCodeCamp CatPhotoApp Step 42

Now we will add a placeholder to our input field. This provides users with a hint about what to enter. Update your input like this:

<input type="text" name="catphotoURL" placeholder="catphotourl">

The placeholder text “catphotourl” will guide users on what to input.

FreeCodeCamp CatPhotoApp Step 43

To ensure users fill out this field before submitting the form, we’ll make this input required. Update your input element:

<input type="text" name="catphotoURL" placeholder="catphotourl" required>

This will prompt users to fill in the input field before they can submit the form.

FreeCodeCamp CatPhotoApp Step 44

Next, let’s add a button element to allow users to submit the form. Below your input field, insert the following code:

<button type="submit">Submit</button>

This button will trigger the form submission when clicked.

FreeCodeCamp CatPhotoApp Step 45

Currently, the button and input field may appear side by side. To ensure they are displayed correctly, we need to define the button type:

<button type="submit">Submit</button>

This clarifies that the button is for submitting the form.

FreeCodeCamp CatPhotoApp Step 46

Now, we can add radio buttons for options that users can select. For this, we will create an input element of type radio. Add the following code:

<input type="radio" name="catType" value="indoor">Indoor

This creates a radio button labeled “Indoor.” Users will have the option to select this choice.

FreeCodeCamp CatPhotoApp Step 47

Next, we need to add labels to our radio buttons to improve accessibility. Wrap the radio input in a label element:

<label><input type="radio" name="catType" value="indoor">Indoor</label>

This links the label to the radio button, making it easier for users to select.

FreeCodeCamp CatPhotoApp Step 48

We will now assign an ID to our radio button for unique identification:

<input type="radio" name="catType" id="indoor" value="indoor">Indoor

This ensures that each input has a unique identifier.

FreeCodeCamp CatPhotoApp Step 49

Next, let’s add another radio button for an outdoor option. Duplicate the previous radio button and update its values:

<input type="radio" name="catType" id="outdoor" value="outdoor">Outdoor

This allows users to select either “Indoor” or “Outdoor.”

FreeCodeCamp CatPhotoApp Step 50

To ensure that only one of the radio buttons can be selected at a time, we need to ensure both buttons share the same name attribute:

<input type="radio" name="catType" id="indoor" value="indoor">Indoor

<input type="radio" name="catType" id="outdoor" value="outdoor">Outdoor

This groups them together, allowing for mutual exclusivity in selection.

FreeCodeCamp CatPhotoApp Step 51

Now, we will add a value attribute to each radio button. This is important for form data submission:

<input type="radio" name="indoor-outdoor" id="indoor" value="indoor">Indoor

<input type="radio" name="indoor-outdoor" id="outdoor" value="outdoor">Outdoor

These values will be sent along with the form submission.

FreeCodeCamp CatPhotoApp Step 52

Next, we will group the radio buttons into a fieldset for better organization:

<fieldset></fieldset>

This helps visually group related inputs together.

FreeCodeCamp CatPhotoApp Step 53

Inside the fieldset, we will add a legend element to provide context:

<legend>Is your cat indoor or outdoor?</legend>

This gives users clear instructions on what to select.

FreeCodeCamp CatPhotoApp Step 54

Now, let’s add another fieldset for additional input:

<fieldset></fieldset>

This will be used for the next set of questions.

FreeCodeCamp CatPhotoApp Step 55

Inside the second fieldset, we will add another legend element asking about the cat’s personality:

<legend>What's your cat's personality?</legend>

This provides context for the inputs that will follow.

FreeCodeCamp CatPhotoApp Step 56

Now, we’ll add checkboxes for the personality traits. Start by adding a checkbox for “Loving”:

<input type="checkbox" id="loving">Loving

This allows users to select multiple traits.

FreeCodeCamp CatPhotoApp Step 57

Add an ID attribute to the loving checkbox:

<input type="checkbox" id="loving" name="personality">Loving

This ID is essential for linking labels and improving accessibility.

FreeCodeCamp CatPhotoApp Step 58

Next, let’s associate the checkbox with a label using the for attribute:

<label for="loving">Loving</label><input type="checkbox" id="loving" name="personality">

This allows users to click the label to toggle the checkbox.

FreeCodeCamp CatPhotoApp Step 59

We will now add another checkbox for “Lazy” with the same name attribute:

<input type="checkbox" id="lazy" name="personality">Lazy

This allows users to select multiple personality traits.

FreeCodeCamp CatPhotoApp Step 60

Next, we will add a checkbox for “Energetic”:

<input type="checkbox" id="energetic" name="personality">Energetic

This adds another trait option for users to select.

FreeCodeCamp CatPhotoApp Step 61

Now, let’s add value attributes to each checkbox for better data handling:

<input type="checkbox" id="loving" name="personality" value="loving">Loving

<input type="checkbox" id="lazy" name="personality" value="lazy">Lazy

<input type="checkbox" id="energetic" name="personality" value="energetic">Energetic

These values will be sent when the form is submitted.

FreeCodeCamp CatPhotoApp Step 62

Next, we will add a default checked attribute to the first checkbox:

<input type="checkbox" id="loving" name="personality" value="loving" checked>Loving

This will pre-select the loving checkbox when the form loads.

FreeCodeCamp CatPhotoApp Step 63

Now, let’s add a footer element to our page:

<footer></footer>

This footer will contain additional information about the app.

FreeCodeCamp CatPhotoApp Step 65

Inside the footer, we will add a paragraph with copyright information:

<p>No copyright, freeCodeCamp.org</p>

This provides essential information about the app’s ownership.

FreeCodeCamp CatPhotoApp Step 66

Now, let’s turn the copyright text into a clickable link:

<a href="https://www.freecodecamp.org">No copyright, freeCodeCamp.org</a>

This allows users to navigate to the FreeCodeCamp website.

FreeCodeCamp CatPhotoApp Step 66

Finally, we will complete our HTML document by adding the head section:

<head></head>

This section will contain metadata about our webpage.

FreeCodeCamp CatPhotoApp Step 68

Inside the head, we will add a title element:

<title>Cat Photo App</title>

This defines the title that appears in the browser tab.

FreeCodeCamp CatPhotoApp Step 69

Next, we will set the lang attribute for our HTML document:

<html lang="en"></html>

This specifies that the language of our document is English.

FreeCodeCamp CatPhotoApp Step 70

Finally, we will add the doctype declaration at the top of our HTML document:

<!DOCTYPE html>

This ensures the browser renders the page correctly.

FreeCodeCamp CatPhotoApp Step 71

Congratulations! You’ve completed the Cat Photo App project! If you have any questions, feel free to leave them below.