Creating a Simple Website with HTML, CSS, and JavaScript

Introduction

Building a website from scratch is a great way to understand the fundamentals of web development. In this tutorial, you will learn how to create a simple static website using HTML for structure, CSS for styling, and JavaScript for interactivity.

Prerequisites

A text editor (e.g., Visual Studio Code, Sublime Text, Notepad++).
Basic understanding of HTML, CSS, and JavaScript syntax.

Step 1: Setting Up the Project Structure

Create a new directory for your website project:

my_website/
├── index.html
├── styles.css
└── script.js

Step 2: Creating the HTML Structure

Open index.html in your text editor and set up the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Simple Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is a simple website created with HTML, CSS, and JavaScript.</p>
    <button id="myButton">Click Me</button>

    <script src="script.js"></script>
</body>
</html>

Step 3: Adding Styles with CSS

Open styles.css and add some styles to enhance the appearance of your website:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
}

Step 4: Adding Interactivity with JavaScript

Open script.js and add code to handle the button click event:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

Step 5: Testing the Website

Open index.html in a web browser to view your website. Click the “Click Me” button to ensure the JavaScript function works correctly.

Step 6: Enhancing the Website (Optional)

Add Images: Include images using the <img> tag.
Create Additional Pages: Add more HTML files and link them using <a> tags.
Responsive Design: Use media queries in CSS to make the website responsive.

Conclusion

You have created a simple static website using HTML, CSS, and JavaScript. This foundation allows you to build more complex websites and explore advanced web development concepts.