Getting Started with Web Development

<!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>
</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>I'm learning web development!</p>
        </section>
    </main>
</body>
</html>

/* Modern CSS with custom properties */
:root {
    --primary-color: #1c1917;
    --accent-color: #57534e;
    --background: #fafaf9;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--primary-color);
    line-height: 1.6;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
}

/* Responsive design */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

// Modern JavaScript ES6+
class TaskManager {
    constructor() {
        this.tasks = [];
    }

    addTask(title, priority = 'medium') {
        const task = {
            id: Date.now(),
            title,
            priority,
            completed: false,
            createdAt: new Date()
        };
        this.tasks.push(task);
        return task;
    }

    completeTask(id) {
        const task = this.tasks.find(t => t.id === id);
        if (task) {
            task.completed = true;
            task.completedAt = new Date();
        }
        return task;
    }

    getIncompleteTasks() {
        return this.tasks.filter(t => !t.completed);
    }
}

// Usage
const manager = new TaskManager();
manager.addTask('Learn HTML', 'high');
manager.addTask('Practice CSS');
manager.addTask('Master JavaScript', 'high');

console.log(manager.getIncompleteTasks());

# Install Node.js (includes npm)
# Download from nodejs.org

# Verify installation
node --version
npm --version

# Create a new project
mkdir my-project
cd my-project
npm init -y

# Install a framework (example: SvelteKit)
npm create svelte@latest my-app
cd my-app
npm install
npm run dev