Introduction:
Creating a website from scratch is one of the most empowering experiences for a developer. In this guide, we’ll explore the building blocks of the web: HTML, CSS, and JavaScript. You’ll learn how to structure a webpage, style it, and make it interactive.
Step 1: Setting Up Your Project
- Create a new folder for your project and inside that folder, create three files:
index.htmlstyles.cssscript.js
- Open the
index.htmlfile in a text editor and add the following 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="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<button id="myButton">Click Me</button>
<script src="script.js"></script>
</body>
</html>Step 2: Styling with CSS
CSS allows you to style your HTML elements. Open styles.css and add the following styles:
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}Step 3: Adding Interactivity with JavaScript
JavaScript enables interactivity on your webpage. Open script.js and add the following code:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});Step 4: Running Your Website
Open your index.html file in a web browser. You should see a simple webpage with a button. When you click the button, an alert box will pop up.
Conclusion:
This guide showed you how to build a simple website using HTML, CSS, and JavaScript. You learned how to structure your content, style it, and add interactivity. With this foundation, you can start building more complex websites.