Have you always wanted to create your own website but didn’t know where to start? Good news — you can build your first website in just 1 hour, without any prior coding experience!
In this step-by-step guide, I’ll walk you through everything — from setting up your tools to writing real HTML and CSS code. It’s fast, friendly, and beginner-approved. Let’s get started! 
What You’ll Need
Before we begin, here’s what you need:
A laptop or computer with internet access
A code editor (we’ll use VS Code – free to download)
A browser (like Chrome)
1 hour of focused time!
Step 1: Create a Project Folder
On your desktop or any location, create a new folder called:
my-first-website
Inside it, create two files:
index.html– your main HTML filestyle.css– your CSS file for design
🧱 Step 2: Add Basic HTML Structure
Open index.html in VS Code and paste this 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 Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Welcome to My First Website</h1>
<p>Built with HTML & CSS in 1 hour!</p>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hi! I’m learning web development, and this is my very first website.</p>
</section>
<section>
<h2>My Hobbies</h2>
<ul>
<li>🌱 Coding</li>
<li>📚 Reading</li>
<li>🎮 Gaming</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 My First Website</p>
</footer>
</body>
</html>
✅ This gives your website structure and content.
🎨 Step 3: Style Your Website with CSS
Open the style.css file and add this:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
header, footer {
background: #007bff;
color: white;
text-align: center;
padding: 1rem 0;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
🎉 Your website now has colors, spacing, and basic design!
🧪 Step 4: Open in Your Browser
Right-click on
index.htmland choose “Open with” → your browser.You’ll see your first website — live and working!
📦 Optional: Add an Image
Want to add a photo? Place an image in your folder (e.g. me.jpg) and add this to your HTML:
<img decoding="async" src="me.jpg" alt="My photo" width="200" />
📈 Bonus SEO Tips
Even though it’s a simple site, here’s how you make it more search engine friendly:
Use meaningful
<title>and<meta description>Write headings using
<h1>to<h3>in orderAdd
alttext to images for accessibilityUse clean, readable URLs and filenames
🧠 What You Learned
By building this small project, you’ve learned:
How to write basic HTML structure
How to add CSS styling
How to open and view your site in a browser
The importance of semantic code and SEO basics
🚀 Next Steps
Ready to go further?
Add more pages (e.g.,
about.html,contact.html)Learn responsive design with media queries
Explore JavaScript to make your site interactive
Try using a code playground like CodePen or Replit
💡 Final Thoughts
Creating a website doesn’t have to be hard — you just built one in under an hour! With practice, you’ll be making full-featured, beautiful sites in no time.
👉 Need help or want more tutorials like this?
Join our newsletter or check out the [Web Development Blog] for more beginner-friendly content.