📝 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
© 2025 My First Website
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).
Top comments (1)
Visual Studio Code is not the editor, it's an IDE.