A step by step guide on how to create a simple web page using HTML and CSS

Medjiatou Ezechiel — Mon, 03 Nov 2025 14:39:39 +0000

📝 How to Create a Simple Web Page Using HTML and CSS

Introduction

Have you ever wanted to create your own website but didn’t know where to start?
In this tutorial, we’ll build a simple web page using only HTML and CSS.
By the end of this guide, you’ll understand how to structure a web page, style it, and view it in your browser — all using beginner-friendly code.

⚙️ Requirements

Before we start, make sure you have:

A computer or laptop

A text editor like Visual Studio Code

Any web browser (Chrome, Firefox, or Edge)

🪜 Step 1: Create Your Project Folder

Create a new folder on your desktop named “MyFirstWebsite”.
Inside it, create two files:

index.html

style.css

💻 Step 2: Write the HTML Code

Open the index.html file and add the following code:

<!DOCTYPE html>

My First Web Page

Welcome to My First Website

Hello! I’m learning web development using HTML and CSS.

Click Me

This code creates the structure of your web page — with a header, a main content section, and a footer.

🎨 Step 3: Add CSS Styles

Now open your style.css file and add this code:

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: white;
padding: 20px;
}

main {
margin: 40px;
}

button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

footer {
background-color: #333;
color: white;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

This code styles your page to make it look clean and professional.

🌐 Step 4: Open It in a Browser

Now go to your folder and double-click on index.html.
Your first website should open — congratulations! 🎉

You can change colors, text, or buttons to make it your own.

✅ Conclusion

You just created your first website using HTML and CSS.
This is the foundation of all web development — and the best way to begin your tech journey.
Next, you can try adding JavaScript to make your page interactive (like showing an alert when the button is clicked).

DEV Community: Medjiatou Ezechiel

A step by step guide on how to create a simple web page using HTML and CSS

Welcome to My First Website