Published on

Learn HTML by Building a Cat Photo App: A Step-by-Step Guide for Beginners

Authors

'Learn HTML by Building a Cat Photo App: A Step-by-Step Guide for Beginners'

Start your web development journey with our beginner-friendly guide. Learn the fundamentals of HTML step-by-step by building a fun and simple cat photo app from scratch.

Table of Contents

Introduction: Your First Step into Web Development

Welcome to the wonderful world of coding! If you've ever wondered how websites are made, you're in the right place. The journey of a thousand websites begins with a single line of HTML, and today, you're going to write yours.

Why a cat photo app? Because learning should be fun, and let's be honest, the internet is practically built on cat photos. It's a simple, engaging project that will teach you the fundamental building blocks of the web without overwhelming you. By the end of this guide, you won't just understand what HTML is—you'll have a tangible project to show for it.

This guide is designed for absolute beginners. No prior coding experience is needed. All you need is a computer, a web browser, and a curiosity to learn. Let's get started!

Section 1: Getting Set Up - Your Digital Workshop

Before we can build our app, we need to set up our workspace. Don't worry, it's incredibly simple.

What is HTML, Anyway?

HTML stands for HyperText Markup Language. Think of it as the skeleton of a webpage. It provides the basic structure and content. Every heading, paragraph, image, and link you see on a website is defined by an HTML element. CSS (Cascading Style Sheets) and JavaScript are then used to style it and make it interactive, but HTML is always the starting point.

Tools of the Trade

You only need two things:

  1. A Text Editor: This is where you'll write your code. While you can use simple programs like Notepad (Windows) or TextEdit (Mac), I highly recommend downloading a dedicated code editor like Visual Studio Code (VS Code). It's free and has features like syntax highlighting that make reading and writing code much easier.
  2. A Web Browser: Any modern browser like Chrome, Firefox, Safari, or Edge will do. This is what you'll use to view your creation.

Creating Your First HTML File

  1. Create a new folder on your computer. Let's call it cat-photo-app.
  2. Inside this folder, create a new file and name it index.html. The .html extension is crucial—it tells the browser to interpret this file as an HTML document.

The Basic HTML Boilerplate

Every HTML page has a standard structure. Open your index.html file in your text editor and type (or copy and paste) the following code. This is often called "boilerplate" code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Photo App</title>
</head>
<body>

</body>
</html>

Let's break this down:

  • <!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 page. It's always the first line.
  • <html>: This is the root element of the page. Everything else goes inside it.
  • <head>: This section contains meta-information about the page that isn't displayed directly on the page itself. Things like the page title, character set, and links to stylesheets go here.
  • <title>: The text inside this tag is what appears on the browser tab. We've set ours to "Cat Photo App".
  • <body>: This is where the magic happens! All visible content—headings, paragraphs, images, etc.—goes inside the body tags.

To see your work: Save the index.html file, navigate to it in your file explorer, and double-click it. It should open in your default web browser. It will be a blank white page, but look at the browser tab—it says "Cat Photo App"! You've made a webpage!

Section 2: Adding Content - Headings and Paragraphs

A blank page isn't very exciting. Let's add a title and some text. In HTML, we do this using elements, which are usually made up of an opening tag (e.g., <p>) and a closing tag (e.g., </p>).

The Main Title

For the main title of your page, you should use the <h1> element, which stands for "Heading 1". It's the most important heading on the page.

Inside your <body> tags, add the following:

<body>
    <h1>Cat Photo App</h1>
</body>

Save your file and refresh the browser. You'll now see your title in large, bold text.

Subheadings and Paragraphs

Web pages are structured hierarchically. After your main <h1> title, you can use <h2>, <h3>, and so on (down to <h6>) for subheadings. Let's add a section for cat photos with an <h2>.

For regular text, we use the paragraph element, <p>.

Let's add a subheading and a paragraph to our <body>:

<body>
    <h1>Cat Photo App</h1>
    
    <h2>Cat Photos</h2>
    <p>Click here to view more cat photos.</p>
</body>

Best Practice: Use headings in a logical, sequential order. Don't jump from an <h1> to an <h4> just for styling purposes. This is important for both SEO (Search Engine Optimization) and accessibility for screen reader users.

Section 3: The Star of the Show - Adding Images

What's a cat photo app without cat photos? Let's add our first image using the <img> element.

The <img> element is a bit different; it's a self-closing tag, meaning it doesn't need a separate closing tag like </img>.

It requires at least two attributes:

  1. src: The "source" attribute. This is the URL or file path of the image you want to display.
  2. alt: The "alternative text" attribute. This text is displayed if the image fails to load. More importantly, it's read aloud by screen readers for visually impaired users. Never skip the alt attribute!

To keep things simple, we'll use a placeholder image from the internet. The website https://placekitten.com is perfect for this.

Add this <img> tag below your <p> tag:

<p>Click here to view more cat photos.</p>

<img src="https://placekitten.com/500/350" alt="A cute, fluffy kitten looking at the camera.">

Save and refresh. Voilà! You should now have a picture of a kitten on your webpage. The numbers 500/350 in the URL represent the width and height of the image in pixels.

Websites are connected through hyperlinks. We create them using the anchor tag, <a>.

The most important attribute for an anchor tag is href, which stands for "hypertext reference". This is the destination URL you want the link to go to.

Remember our paragraph that says "Click here to view more cat photos"? Let's turn that into a real link. We'll wrap the text with an <a> tag and point it to a great source of cat pictures: Wikipedia.

<p>
    Click here to view more 
    <a href="https://en.wikipedia.org/wiki/Cat">cat photos</a>.
</p>

Notice how we only wrapped the words "cat photos"? This is better practice than linking the entire sentence.

If you click that link now, it will navigate away from your app. To open the link in a new browser tab, we can add the target attribute.

<a href="https://en.wikipedia.org/wiki/Cat" target="_blank">cat photos</a>

target="_blank" is a standard way to ensure users don't lose their place on your site.

You can also make images clickable by wrapping the <img> tag inside an <a> tag.

<a href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
    <img src="https://placekitten.com/500/350" alt="A cute, fluffy kitten looking at the camera.">
</a>

Now, clicking your cat picture will open the Wikipedia page for kittens in a new tab!

Section 5: Organizing Information with Lists

Lists are perfect for organizing related items. HTML gives us two main types: unordered lists (for bullet points) and ordered lists (for numbered items).

Unordered Lists <ul>

Let's list some things that cats love. We'll use an unordered list (<ul>) with several list items (<li>).

Add this new section to your page:

<h3>Things cats love:</h3>
<ul>
    <li>Catnip</li>
    <li>Laser pointers</li>
    <li>Naps</li>
</ul>

Ordered Lists <ol>

Now, let's list a cat's top priorities in order. For this, we'll use an ordered list (<ol>).

<h3>Top 3 things cats hate:</h3>
<ol>
    <li>Water</li>
    <li>Loud noises</li>
    <li>The vet</li>
</ol>

Save and refresh your browser. You'll see a neat bulleted list and a numbered list, helping to structure your content clearly.

Section 6: Getting User Feedback with Forms

Forms are essential for any interactive website. Let's build a simple form to survey our users about their cats. We'll use the <form> element as a container.

The <form> Element

The <form> tag wraps all our input fields. The action attribute tells the browser where to send the form data when it's submitted. For now, we'll just point it to a placeholder.

Structuring with <fieldset> and <legend>

To group related form controls, we can use a <fieldset>. The <legend> element provides a caption for the group. This is great for accessibility.

Getting User Input with <input> and <label>

This is the core of the form. We'll use different types of <input> elements:

  • Radio Buttons (type="radio"): For when you want the user to select only one option from a group.
  • Checkboxes (type="checkbox"): For when the user can select multiple options.
  • Text Input (type="text"): For short text entries.

Crucially, every input should have a corresponding <label>. The for attribute on the label should match the id attribute on the input. This links them, meaning a user can click the label to focus on the input field—a huge accessibility win.

Let's build the form:

<h2>Cat Form</h2>
<form action="/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"> 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>
        <label>
            <input id="loving" type="checkbox" name="personality" value="loving"> Loving
        </label>
        <label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy
        </label>
        <label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic
        </label>
    </fieldset>
    
    <input type="text" name="catphotourl" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
</form>

Notice a few things:

  • Radio buttons with the same name attribute are grouped, so you can only select one.
  • We added a placeholder attribute to the text input to give users a hint about what to type.
  • The required attribute means the form can't be submitted unless that field is filled out.
  • We finish with a <button type="submit"> which, when clicked, will try to send the form data to the location in the action attribute.

Section 7: Putting It All Together - The Final Code

Congratulations! You've learned about headings, paragraphs, images, links, lists, and forms. You've touched on all the most common HTML elements.

Here is the complete code for your index.html file. You can compare it with yours or use it as a reference.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Photo App</title>
</head>
<body>
    <h1>Cat Photo App</h1>
    
    <h2>Cat Photos</h2>
    <p>
        Click here to view more 
        <a href="https://en.wikipedia.org/wiki/Cat" target="_blank">cat photos</a>.
    </p>
    <a href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
        <img src="https://placekitten.com/500/350" alt="A cute, fluffy kitten looking at the camera.">
    </a>

    <hr> <!-- A horizontal rule to divide sections -->

    <h2>Cat Lists</h2>
    <h3>Things cats love:</h3>
    <ul>
        <li>Catnip</li>
        <li>Laser pointers</li>
        <li>Naps</li>
    </ul>

    <h3>Top 3 things cats hate:</h3>
    <ol>
        <li>Water</li>
        <li>Loud noises</li>
        <li>The vet</li>
    </ol>

    <hr>

    <h2>Cat Form</h2>
    <form action="/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"> 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>
            <label>
                <input id="loving" type="checkbox" name="personality" value="loving"> Loving
            </label>
            <label>
                <input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy
            </label>
            <label>
                <input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic
            </label>
        </fieldset>
        
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
    </form>

</body>
</html>

Your final page is a beautiful, if simple, collection of structured content. It's semantic, accessible, and the perfect foundation to build upon.

Conclusion and Next Steps

You did it! You've successfully built a webpage from scratch using HTML. You've gone from an empty file to a structured document with text, images, links, and even an interactive form.

Here's a quick recap of what you learned:

  • The basic structure of an HTML document (<!DOCTYPE>, <html>, <head>, <body>).
  • How to create headings (<h1>, <h2>, etc.) and paragraphs (<p>).
  • How to embed images (<img>) and the importance of the src and alt attributes.
  • How to create links (<a>) and make them open in a new tab.
  • How to organize content with unordered (<ul>) and ordered (<ol>) lists.
  • The fundamentals of building a form (<form>, <fieldset>, <input>, <label>, <button>).

You've built the skeleton of your app. The next logical step? Giving it some style! Your app is functional, but it might not win any design awards just yet. That's where CSS (Cascading Style Sheets) comes in.

Stay tuned for our next guide, where we'll take this exact HTML file and bring it to life with colors, fonts, and layouts using CSS.

For now, give yourself a pat on the back. You're officially a web developer. Share your creation, experiment by changing the code, and ask any questions in the comments below!

Discuss on Twitter • View on GitHub