Build Your First Responsive Website with HTML, CSS, and JavaScript
Learn how to create your first responsive website from scratch using HTML, CSS, and JavaScript. This beginner-friendly tutorial covers structure, styling, interactivity, and best practices.
Build Your First Responsive Website with HTML, CSS, and JavaScript
Introduction
Creating a website may sound intimidating for beginners, but with HTML, CSS, and JavaScript, you can build a simple, responsive website from scratch. In this tutorial, you’ll learn how to structure your website, style it, and add interactivity.
By the end of this tutorial, you will have a fully functional webpage that works beautifully on both desktop and mobile devices.
Step 1: Set Up Your Project
-
Create a new folder for your project, e.g.,
my-first-website. -
Inside the folder, create three files:
index.html→ For the website structurestyle.css→ For styling the websitescript.js→ For adding interactivity
Your folder should look like this:
my-first-website/ ├─ index.html ├─ style.css └─ script.js
Step 2: Create the HTML Structure
Open index.html and add the following:
<!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>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Home Section</h2>
<p>This is the home section of your first website. Start customizing it!</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>Write a few lines about yourself or your project here.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Provide your contact info or a form here.</p>
<button id="contactButton">Click Me!</button>
</section>
<footer>
<p>© 2026 My First Website</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Step 3: Add Basic Styling with CSS
Open style.css and add:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #1e40af;
color: #fff;
padding: 20px 0;
text-align: center;
}
header nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
header nav ul li a:hover {
text-decoration: underline;
}
section {
padding: 40px 20px;
max-width: 800px;
margin: 0 auto 20px auto;
background-color: #fff;
border-radius: 8px;
}
footer {
text-align: center;
padding: 20px;
background-color: #1e40af;
color: #fff;
}
button {
background-color: #1e40af;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #3b82f6;
}
@media (max-width: 600px) {
header nav ul {
flex-direction: column;
gap: 10px;
}
}
Step 4: Add Interactivity with JavaScript
Open script.js and add:
document.getElementById('contactButton').addEventListener('click', function() {
alert('Thanks for visiting! This is your first interactive button.');
});
Step 5: Test Your Website
- Open
index.htmlin your web browser. - Check that the header, sections, and footer display correctly.
- Resize your browser window to see the responsive layout in action.
- Click the "Click Me!" button to test the JavaScript alert.
Step 6: Next Steps
Once you’re comfortable, you can enhance your website by:
- Adding images and icons
- Styling buttons and forms
- Creating smooth scroll effects with JavaScript
- Adding more pages and linking them
- Learning frameworks like React or Vue.js for dynamic websites
Conclusion
Congratulations! You’ve built your first responsive website using HTML, CSS, and JavaScript. This foundational knowledge is the first step to becoming a web developer. Keep experimenting, and don’t be afraid to break things — that’s how you learn.
Happy coding!