Learn HTML with a Real Project: A 10-Part Beginner’s Guide

Welcome Back! Let’s Get to Work

Hey there! Welcome back to our HTML series. In the last article, we dipped our toes into the world of HTML by setting up the basic structure of a webpage. Now, it’s time to roll up our sleeves and start building something real. Today, we’re going to create the homepage of our project. This is where the magic begins!

What’s the Plan?

In this article, we’ll be focusing on creating the backbone of your website—the homepage. This is the first thing visitors will see, so we want to make a great impression. Here’s what you’ll learn:

How to create headings and paragraphs
Structuring content with divs and sections
Adding a navigation menu with links
Laying out the homepage for easy navigation

By the end of this article, you’ll have a fully functional homepage ready to be expanded with more content in the upcoming articles. Let’s dive in!

1. Creating Headings and Paragraphs

Headings and paragraphs are the bread and butter of HTML content. They help organize information, making it easier for visitors (and search engines) to understand what your webpage is about.

Headings: HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Typically, you’ll use <h1> for your main page title and other heading levels for sub-sections.

htmlCopy code<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<h3>My Projects</h3>

Paragraphs: For regular text content, you’ll use the <p> tag.

htmlCopy code<p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>

Let’s add these to our homepage. Open up your index.html file and add some content:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
    <h2>About Me</h2>
    <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
</body>
</html>

2. Structuring Content with Divs and Sections

Now that we’ve got some basic content on the page, it’s time to organize it. This is where divs and sections come in handy.

<div>: A generic container used to group elements together.
<section>: A semantic element that groups related content, often used for different sections of a webpage.

Let’s wrap our content in a section and use divs to organize it:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <section>
        <div>
            <h1>Welcome to My Website</h1>
            <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
        </div>
        <div>
            <h2>About Me</h2>
            <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
        </div>
    </section>
</body>
</html>

By using sections and divs, you’re setting up your webpage for better organization and future styling with CSS (which we’ll get to in a later article).

A good homepage needs a navigation menu so visitors can easily find their way around your site. We’ll create a simple menu with links to other pages (which we’ll build later).

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Let’s add this to the top of our webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <section>
        <div>
            <h1>Welcome to My Website</h1>
            <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
        </div>
        <div>
            <h2>About Me</h2>
            <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
        </div>
    </section>
</body>
</html>

4. Laying Out the Homepage

Let’s put everything together to create a simple, clean homepage layout:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <section>
        <div>
            <h1>Welcome to My Website</h1>
            <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
        </div>
        <div>
            <h2>About Me</h2>
            <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
        </div>
    </section>
</body>
</html>

What’s Next?

Boom! 💥 You’ve just built the foundation of your homepage. It’s clean, organized, and ready to be expanded with more content as we move forward. In the next article, we’re going to make this homepage even more engaging by adding images and links. You’ll learn how to spruce up your site and make it visually appealing.

So, keep that excitement going, and I’ll see you in the next article!

Building the Homepage

1. Creating Headings and Paragraphs

2. Structuring Content with Divs and Sections

3. Adding a Navigation Menu

4. Laying Out the Homepage

What’s Next?