3-Month Comprehensive

HTML, CSS, JavaScript, and real-world website projects in 12 weeks.

Month 1: HTML & CSS Mastery

Week 1: HTML Fundamentals

Topics: Document structure, elements, attributes, semantic tags, forms, tables

Week 2: CSS Fundamentals

Topics: Selectors, box model, typography, colors, backgrounds, borders

Week 3: Flexbox & Grid

Topics: Flex containers, grid layouts, responsive patterns, media queries

Week 4: CSS Advanced

Topics: Animations, transitions, transforms, pseudo-elements, custom properties

Sample: Interactive Todo List (Week 7)

<!-- Week 7: DOM Manipulation Example -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Interactive Todo List</title>
    <style>
        body { font-family: sans-serif; max-width: 500px; margin: 2rem auto; }
        .todo-item { display: flex; align-items: center; gap: 0.5rem; 
                     padding: 0.5rem; border-bottom: 1px solid #eee; }
        .todo-item.done span { text-decoration: line-through; color: #999; }
        .delete-btn { margin-left: auto; color: red; cursor: pointer; border: none; background: none; }
    </style>
</head>
<body>
    <h1>My Todo List</h1>
    <form id="todoForm">
        <input type="text" id="todoInput" placeholder="Add a task..." required>
        <button type="submit">Add</button>
    </form>
    <div id="todoList"></div>

    <script>
        const form = document.getElementById('todoForm');
        const input = document.getElementById('todoInput');
        const list = document.getElementById('todoList');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const text = input.value.trim();
            if (!text) return;

            const item = document.createElement('div');
            item.className = 'todo-item';
            item.innerHTML = `
                <input type="checkbox" onchange="this.parentElement.classList.toggle('done')">
                <span>${text}</span>
                <button class="delete-btn" onclick="this.parentElement.remove()">✕</button>
            `;
            list.appendChild(item);
            input.value = '';
        });
    </script>
</body>
</html>