Knowledge Base

Welcome to Your First Project

This tutorial walks you through creating a simple web page from scratch, using modern HTML, CSS, and a dash of JavaScript. By the end, you'll have a functional, responsive page you can expand on.

1️⃣ Prerequisites

2️⃣ Project Structure

Create a new folder called first-project and add the following files:

first-project/
│
├─ index.html
├─ styles.css
└─ script.js

3️⃣ Write the HTML

Open index.html and add:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Project</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="hero">
        <h1>Hello, World!</h1>
        <p>This is my first web page.</p>
        <button class="btn" id="magicBtn">Click Me</button>
    </header>

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

4️⃣ Add Styles

Open styles.css and paste:

/* Reset & basic layout */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:system-ui,Arial,sans-serif;
    background:#F7F9FC;
    color:#333;
}
.hero{
    background:linear-gradient(135deg,var(--primary),#1c4ec9);
    color:#fff;
    text-align:center;
    padding:4rem 1rem;
}
.hero h1{
    font-size:2.5rem;
    margin-bottom:.5rem;
}
.hero p{
    font-size:1.2rem;
    margin-bottom:1.5rem;
}
.btn{
    background:#fff;
    color:var(--primary);
    border:none;
    padding:.8rem 1.5rem;
    font-size:1rem;
    border-radius:.4rem;
    cursor:pointer;
    transition:background .2s;
}
.btn:hover{
    background:#e6e6e6;
}

5️⃣ Make It Interactive

Open script.js and add:

document.getElementById('magicBtn').addEventListener('click',function(){
    const colors=['#ff6b6b','#feca57','#1dd1a1','#54a0ff','#5f27cd'];
    const random=colors[Math.floor(Math.random()*colors.length)];
    document.body.style.backgroundColor=random;
});

🚀 Run Your Project

Open index.html in your browser. Click the “Click Me” button to see the background color change.

Next Steps