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

#webdev #beginners #html #programming

📝 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).