Contents
- 1 How to Create a Website Using HTML, CSS, and JavaScript (Step-by-Step Guide)
- 2 Step 1: Understand the Basics
- 3 Step 2: Set Up Your Coding Environment
- 4 Step 3: Create Your HTML Structure
- 5 Step 4: Add Styles Using CSS
- 6 Step 5: Add Interactivity with JavaScript
- 7 Step 6: View Your Website
- 8 Step 7: Make It Responsive
- 9 Step 8: Publish Your Website Online
- 10 Learn Web Development with Coder Tech Kenya
- 11 Conclusion
How to Create a Website Using HTML, CSS, and JavaScript (Step-by-Step Guide)
If you have ever wondered how websites like Google, YouTube, or Coder Tech Kenya are built, the answer lies in three powerful languages — HTML, CSS, and JavaScript.
Whether you’re an aspiring web developer, a student, or a small business owner who wants to build your own site, understanding these three technologies is the perfect place to start.
In this tutorial, we will take you step-by-step through how to create a simple website using HTML, CSS, and JavaScript — no prior experience required.
Step 1: Understand the Basics
Before we dive into the code, let’s understand what each technology does:
- HTML (HyperText Markup Language):
It structures your website — headings, text, images, and links. - CSS (Cascading Style Sheets):
It styles your website — colors, layouts, fonts, and spacing. - JavaScript (JS):
It makes your website interactive — animations, buttons, and user actions.
Think of HTML as the bones, CSS as the skin, and JavaScript as the brain of your website.
Step 2: Set Up Your Coding Environment
You don’t need special software. Here’s what you will need:
Tools:
- A text editor like Visual Studio Code or Sublime Text
- A web browser like Google Chrome or Firefox
Create a new folder named my-website. Inside, create three files:
index.htmlstyle.cssscript.js
Step 3: Create Your HTML Structure
Open your index.html file and add this basic HTML 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 Website</h1>
<button id="btn">Click Me</button>
</header>
<section>
<h2>About This Website</h2>
<p>This is a simple website created using HTML, CSS, and JavaScript.</p>
</section>
<footer>
<p>© 2025 My Website | Designed by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
What this does:- Creates a web page with a header, content section, and footer.
- Links your CSS and JavaScript files.
- Adds a button we’ll make interactive using JavaScript later.
Step 4: Add Styles Using CSS
Now open style.css and add this styling code:
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
}
header {
background-color: #0078d7;
color: white;
text-align: center;
padding: 40px 0;
}
button {
background-color: white;
color: #0078d7;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #005ea6;
color: white;
}
section {
background: white;
margin: 20px;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
footer {
background-color: #0078d7;
color: white;
text-align: center;
padding: 15px;
}
What this does:
- Makes your website clean, modern, and professional.
- Adds hover effects for your button.
- Styles the background, text, and spacing.
Step 5: Add Interactivity with JavaScript
Now it’s time to make your website interactive.
Open your script.js file and write:
document.getElementById("btn").addEventListener("click", function() {
alert("Hello there! Welcome to my website 🎉");
});
What this does:
When you click the button, a pop-up message appears — your first interactive feature!
You can expand this to:
- Change colors dynamically
- Toggle light/dark mode
- Validate forms
- Create image sliders or animations
Step 6: View Your Website
Now open your index.html file in your browser.
You’ll see your styled website with a working JavaScript button.
If your CSS or JavaScript doesn’t load, make sure the filenames are spelled exactly the same and in the same folder.
Step 7: Make It Responsive
Modern websites must look great on mobile phones too.
Add this code in your CSS to make it responsive:
@media (max-width: 600px) {
header, section, footer {
padding: 15px;
}
h1 {
font-size: 24px;
}
button {
width: 100%;
}
}
This ensures your website adjusts to smaller screens.
Step 8: Publish Your Website Online
Once your website is ready, you can publish it for free using:
- GitHub Pages
- Netlify
- Vercel
For a professional touch, buy a .co.ke domain name from:
You can also host your site through Coder Tech Kenya’s student hosting support if you’re taking their web development course.
Learn Web Development with Coder Tech Kenya
At Coder Tech Kenya, we train beginners to become professional web developers with practical, hands-on lessons.
Our Full Web Development Course covers:
- HTML, CSS, and JavaScript from scratch
- Building real-world projects
- Hosting and deploying websites
- Git & GitHub collaboration
- Certificate upon completion
Start your web development journey today!
Visit CoderTech.co.ke and enroll now to start building your own interactive websites.
Conclusion
Creating a website using HTML, CSS, and JavaScript is the foundation of web development.
You’ve now learned how to:
- Structure content with HTML
- Style pages with CSS
- Add interactivity with JavaScript
With practice, you can create full websites, portfolios, and even web apps.
Start small, stay consistent, and keep experimenting — your next project could be the next big thing on the internet.