Home
Knowledgebase
Techie

How to create a website using HTML, CSS and JavaScript?

September 20, 2025

 Creating a website using HTML, CSS, and JavaScript is the foundation of web development. Let me guide you step by step 👇



🔹 Step 1: Create Project Structure

Make a folder for your project, e.g. my-website/, with these files:

my-website/
│── index.html
│── style.css
│── script.js

🔹 Step 2: Write HTML (Structure)

Create index.html for the content and structure:

<!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"> <!-- CSS File -->
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section id="home">
        <h2>Home Section</h2>
        <p>This is the homepage of my first website.</p>
        <button id="clickBtn">Click Me</button>
    </section>

    <section id="about">
        <h2>About</h2>
        <p>This website is built using HTML, CSS, and JavaScript.</p>
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <form>
            <input type="text" placeholder="Your Name">
            <input type="email" placeholder="Your Email">
            <button type="submit">Send</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>

    <script src="script.js"></script> <!-- JS File -->
</body>
</html>

🔹 Step 3: Write CSS (Design)

Create style.css for styling and layout:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f9;
    color: #333;
}

header {
    background: #0077cc;
    color: white;
    padding: 15px;
    text-align: center;
}

nav a {
    margin: 0 15px;
    color: white;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

section {
    padding: 40px;
    text-align: center;
}

button {
    background: #0077cc;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #005fa3;
}

footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 15px;
}

🔹 Step 4: Write JavaScript (Interactivity)

Create script.js to make your website interactive:

// Get button by ID
const button = document.getElementById("clickBtn");

// Add event listener
button.addEventListener("click", () => {
    alert("Hello! You clicked the button 🚀");
});

🔹 Step 5: Open Website

  1. Save all files.

  2. Open index.html in a browser (Chrome, Firefox, Edge).

  3. You’ll see your website live.

✅ Bonus Tips

  • Use VS Code for easy coding.

  • Add more pages like about.html, services.html.

  • Deploy free on GitHub Pages, Netlify, or Vercel.

👉 Do you want me to make this into a ready-to-download zip file so you can just run it and see the website live?

#Yes

✅ Your website project is ready!
You can download the full source code as a ZIP file here:

📂 Download my-website.zip

Just extract it, open index.html in a browser, and your website will run. 🚀

Post a Comment