How to Create Your First Web Page with HTML and CSS

If you’ve ever wanted to build your own website or just understand how the web works, learning HTML and CSS is the perfect starting point. Together, they form the foundation of every web page you’ve ever visited. In this guide, we’ll show you exactly how to create your first web page from scratch — no prior experience required.

Whether you’re just curious or planning to become a front-end developer, this tutorial will give you a clear, step-by-step walkthrough to get started.

What You’ll Need

Before we begin, make sure you have:

A computer running Windows 11 (or any OS).
A code editor — we recommend Visual Studio Code (VS Code).
A modern web browser such as Google Chrome or Microsoft Edge.

That’s it! No special tools or downloads required — just a little curiosity.

Step 1: Create Your Project Folder

First, let’s create a folder where your website files will live.

Open File Explorer.
Create a new folder — name it something like MyFirstWebsite.
Inside that folder, we’ll create two files:
- index.html — your main web page.
- style.css — your stylesheet.

Your project folder should look like this:

MyFirstWebsite/
│
├── index.html
└── style.css

Step 2: Build the HTML Structure

Open the folder in VS Code, then open your index.html file.
Add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My First Web Page!</h1>
        <p>This is where your web journey begins.</p>
    </header>

    <section>
        <h2>About Me</h2>
        <p>Hello! I’m learning web development, and this is my very first HTML and CSS project.</p>
    </section>

    <footer>
        <p>© 2025 My First Web Page</p>
    </footer>
</body>
</html>

This simple HTML file contains:

A header section with your page title.
A content section (About Me).
A footer at the bottom.

Step 3: Style Your Page with CSS

Now let’s make your page look more attractive using CSS.

Open your style.css file and add this:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f7fa;
    color: #333;
}

header {
    background-color: #0078d7;
    color: white;
    text-align: center;
    padding: 40px 0;
}

section {
    padding: 20px;
    text-align: center;
}

footer {
    background-color: #20232a;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Here’s what’s happening:

We changed the font and background color.
The header now has a blue background.
The footer sticks to the bottom of the screen for a clean layout.

Step 4: Preview Your Web Page

Now for the fun part — open your index.html file in your browser!

In File Explorer, right-click on index.html.
Select Open with → Chrome (or Edge).
You should now see your very first styled web page!

Congratulations — you’ve just built your first HTML and CSS project! 🎉

Step 5: Experiment and Customize

Now that your basic structure is ready, it’s time to make it yours:

Change the background color in CSS.
Add a new section with an image.
Modify fonts and text sizes.
Try adding buttons or links like this:

<a href="https://www.google.com" target="_blank">Visit Google</a>

Every time you tweak something and reload the browser, you’ll see your work instantly reflected on the page.

Bonus: Organize Like a Pro

As your project grows, organize your files neatly. Here’s a clean structure you can follow:

MyFirstWebsite/
│
├── index.html
├── style.css
└── images/
    └── profile.jpg

You can later expand this with a scripts/ folder if you start using JavaScript.

Wrapping Up

You’ve now learned how to create, style, and preview your first website using just HTML and CSS! This foundation will carry you through as you dive deeper into web development. From here, you can start learning responsive design, JavaScript, or even frameworks like React.

Remember: every great developer once started with a simple “Hello, world!” web page — just like this one. So keep experimenting and watch your creativity turn into real web pages!