Building your first website can feel a bit confusing in the beginning. You open a file, write some code, refresh the browser and sometimes nothing changes. Other times something breaks and you are not even sure why. That is just part of the process when you are starting out.
What matters is not getting everything perfect right away, but starting to understand how things connect. A website is not one big piece, it is a combination of smaller parts working together. Once you start seeing that everything becomes easier to follow.
In this tutorial we are going to build a simple website from scratch. No frameworks, no extra tools, just basic HTML, CSS and JavaScript. You can follow everything directly on your computer without any setup.
Try not to rush through it. Make small changes, refresh the page and pay attention to what actually changes. That is where most of the learning happens.
Key Takeaway
You are not just writing code, you are connecting structure, design and behavior into something that actually works in the browser.
1. Create Your Project Folder
Start by creating a new folder anywhere on your computer. Name it something simple so you can find it easily later.
my-first-website
Inside this folder create three files:
index.html
style.css
script.js
That is all you need. No installs, no configuration, just these three files.
2. Build the HTML (index.html)
Open index.html and add this basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>My First Website</h1>
<p>This is my first simple website built from scratch.</p>
<button id="btn">Click Me</button>
<p id="message"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Save the file and open it in your browser. You should see a simple page. Nothing fancy yet but that is exactly how it should be at this stage.
It helps to keep the browser open while you work. Every time you save just refresh and you will instantly see what changed.
3. Add Styling (style.css)
Now let us make it look better. Open style.css and add:
body {
font-family: Arial, sans-serif;
background: #0f172a;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 80px auto;
background: #ffffff;
padding: 40px;
border-radius: 12px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
h1 {
color: #111827;
}
p {
color: #555;
}
button {
margin-top: 20px;
padding: 12px 24px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
border: none;
color: #fff;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
transform: translateY(-2px);
opacity: 0.9;
}
#message {
margin-top: 15px;
font-weight: 500;
}
Refresh the page and you will immediately notice the difference. Now it starts to feel like an actual interface not just plain text.
This is a good moment to experiment. Change colors, spacing or fonts and see what happens.
4. Add JavaScript (script.js)
Now open script.js and add this:
const button = document.getElementById("btn");
const message = document.getElementById("message");
button.addEventListener("click", function() {
message.textContent = "You clicked the button!";
});
Save and go back to your browser. Click the button and you should see a message appear.
This is your first interaction. It might seem small but this is how websites become dynamic.
5. Test and Adjust
As you work keep testing small changes. Do not write too much code at once. Add something, save, refresh and check it.
If something does not work check the basics first. File names, missing brackets or small typos are usually the reason.
6. Live Demo
Here is how your final result should look and behave. This is a live preview inside the page.
My First Website
This is my first simple website built from scratch.
Try clicking the button above. If your project behaves the same way then everything is working as expected.
“Most websites start simple like this, then grow step by step into something bigger.”
From here you can keep improving things. Add more sections, adjust the layout or try new interactions.
The important part is that now you start to see how everything connects and works together.
