Knowledge Base

Welcome to the Getting Started Tutorial

This guide will walk you through the essential steps to set up a basic web project from scratch. By the end, you'll have a functional static site ready for further development.

Prerequisites

Step 1 – Create the Project Folder

Open your terminal and run:

mkdir my-website
cd my-website
mkdir assets
touch index.html assets/style.css assets/script.js

Step 2 – Build the HTML Structure

Open index.html and add the following markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Site</title>
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    <header>
        <h1>Hello, World!</h1>
    </header>
    <main>
        <p>Welcome to my brand‑new website.</p>
    </main>
    <script src="assets/script.js"></script>
</body>
</html>

Step 3 – Add Styling

Edit assets/style.css:

body{font-family:Arial,sans-serif;margin:0;padding:0;background:#fafafa;color:#333}
header{background:#3498db;color:#fff;padding:2rem;text-align:center}
main{padding:2rem;max-width:800px;margin:auto}

Step 4 – Add Interactivity

In assets/script.js add a simple alert:

document.addEventListener('DOMContentLoaded',()=>{console.log('Site loaded!');});

Step 5 – Test Your Site

Open index.html in your browser. You should see a styled header and a welcome message.

Next Steps

Explore our other tutorials: