Skip to content
LAM
Read Home Blog
Make Projects HTML Tools Games
Touch grass Notes Resume Links
Home Blog HTML Projects
Tools Games Notes Resume Links
Back Tech Learning Path - Complete Guide Programming
Download Open
Show description 2,391 chars · Programming

Tech Learning Path - Complete Guide

Tech Learning Path - Complete Guide





Tech Learning Path

A comprehensive guide from terminal basics to AI implementation




Expand/Collapse All




1
Terminal Commands


+




Navigate directories with cd, ls, pwd

Master the fundamental navigation commands. Learn how to move between folders (cd), list contents (ls with flags like -la), and check your current location (pwd). These are the foundation of all terminal work.




Create/delete files and folders (touch, mkdir, rm, rmdir)

Understand file system manipulation. Learn safe deletion practices with rm -i, recursive operations with -r, and the dangers of rm -rf. Practice creating nested directories with mkdir -p.




View and edit files (cat, nano, vim basics)

Start with cat for viewing, less for pagination, and nano for simple editing. Learn vim's basic modes (insert, normal, command) and essential commands (:w, :q, i, esc) for when it's the only editor available.




File permissions (chmod, chown)

Understand the rwx permission system, numeric notation (755, 644), and when to change permissions. Learn about ownership and why certain files need specific permissions for security.




Process management (ps, kill, top)

Monitor system resources with top/htop, find process IDs with ps aux | grep, and safely terminate processes. Understand signals (SIGTERM vs SIGKILL) and when to use each.




Package managers (apt, brew, npm, pip)

Learn your system's package manager (apt for Ubuntu, brew for Mac). Understand global vs local installation, dependency management, and how to resolve version conflicts.




Environment variables and PATH

Master export, echo $VAR, and editing .bashrc/.zshrc. Understand how PATH works, why command not found errors occur, and how to add custom scripts to your PATH.




Piping and redirection (>, >>, |)

Chain commands together with pipes, redirect output to files, and append vs overwrite. Learn powerful combinations like command 2>&1 for capturing errors.




grep, find, and searching

Master pattern matching with grep and regex basics, find files by name/size/date, and combine with other commands. Learn about recursive searching and excluding directories.




Aliases and basic scripting

Create shortcuts for common commands, write simple bash scripts with variables and loops, and make scripts executable.…

Tech Learning Path - Complete Guide

91,687 bytes · HTML source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Learning Path - Complete Guide</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: white;
            color: black;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            border: 4px solid black;
            padding: 40px;
            margin-bottom: 40px;
            background: white;
            box-shadow: 8px 8px 0 black;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.1rem;
            color: #333;
        }

        .topic-card {
            border: 3px solid black;
            margin-bottom: 20px;
            background: white;
            box-shadow: 6px 6px 0 black;
            transition: all 0.2s ease;
        }

        .topic-card:hover {
            transform: translate(-2px, -2px);
            box-shadow: 8px 8px 0 black;
        }

        .topic-header {
            padding: 20px;
            border-bottom: 3px solid black;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            user-select: none;
        }

        .topic-header:hover {
            background: #f5f5f5;
        }

        .topic-number {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 3px solid black;
            text-align: center;
            line-height: 34px;
            font-weight: 900;
            margin-right: 15px;
            background: white;
        }

        .topic-title {
            font-size: 1.3rem;
            font-weight: 700;
            flex-grow: 1;
        }

        .toggle-icon {
            font-size: 1.5rem;
            font-weight: 900;
            transition: transform 0.3s ease;
        }

        .topic-content {
            padding: 30px;
            display: none;
            background: white;
        }

        .topic-card.active .topic-content {
            display: block;
        }

        .topic-card.active .toggle-icon {
            transform: rotate(45deg);
        }

        .bullet-point {
            margin-bottom: 25px;
            padding-left: 20px;
            position: relative;
        }

        .bullet-point::before {
            content: "▪";
            position: absolute;
            left: 0;
            font-weight: 900;
        }

        .bullet-title {
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .bullet-note {
            color: #333;
            padding-left: 20px;
            border-left: 3px solid black;
            margin-top: 8px;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .expand-all-btn {
            border: 3px solid black;
            background: white;
            padding: 15px 30px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            margin-bottom: 30px;
            box-shadow: 4px 4px 0 black;
            transition: all 0.2s ease;
        }

        .expand-all-btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 black;
            background: #f5f5f5;
        }

        .expand-all-btn:active {
            transform: translate(0, 0);
            box-shadow: 2px 2px 0 black;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .topic-title {
                font-size: 1.1rem;
            }
            
            header {
                padding: 20px;
            }
            
            .topic-content {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Tech Learning Path</h1>
            <p class="subtitle">A comprehensive guide from terminal basics to AI implementation</p>
        </header>

        <button class="expand-all-btn" onclick="toggleAll()">Expand/Collapse All</button>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">1</span>
                    <span class="topic-title">Terminal Commands</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Navigate directories with cd, ls, pwd</div>
                    <div class="bullet-note">Master the fundamental navigation commands. Learn how to move between folders (cd), list contents (ls with flags like -la), and check your current location (pwd). These are the foundation of all terminal work.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Create/delete files and folders (touch, mkdir, rm, rmdir)</div>
                    <div class="bullet-note">Understand file system manipulation. Learn safe deletion practices with rm -i, recursive operations with -r, and the dangers of rm -rf. Practice creating nested directories with mkdir -p.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">View and edit files (cat, nano, vim basics)</div>
                    <div class="bullet-note">Start with cat for viewing, less for pagination, and nano for simple editing. Learn vim's basic modes (insert, normal, command) and essential commands (:w, :q, i, esc) for when it's the only editor available.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">File permissions (chmod, chown)</div>
                    <div class="bullet-note">Understand the rwx permission system, numeric notation (755, 644), and when to change permissions. Learn about ownership and why certain files need specific permissions for security.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Process management (ps, kill, top)</div>
                    <div class="bullet-note">Monitor system resources with top/htop, find process IDs with ps aux | grep, and safely terminate processes. Understand signals (SIGTERM vs SIGKILL) and when to use each.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Package managers (apt, brew, npm, pip)</div>
                    <div class="bullet-note">Learn your system's package manager (apt for Ubuntu, brew for Mac). Understand global vs local installation, dependency management, and how to resolve version conflicts.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Environment variables and PATH</div>
                    <div class="bullet-note">Master export, echo $VAR, and editing .bashrc/.zshrc. Understand how PATH works, why command not found errors occur, and how to add custom scripts to your PATH.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Piping and redirection (>, >>, |)</div>
                    <div class="bullet-note">Chain commands together with pipes, redirect output to files, and append vs overwrite. Learn powerful combinations like command 2>&1 for capturing errors.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">grep, find, and searching</div>
                    <div class="bullet-note">Master pattern matching with grep and regex basics, find files by name/size/date, and combine with other commands. Learn about recursive searching and excluding directories.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Aliases and basic scripting</div>
                    <div class="bullet-note">Create shortcuts for common commands, write simple bash scripts with variables and loops, and make scripts executable. Learn shebang notation and basic error handling.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">2</span>
                    <span class="topic-title">Git and GitHub</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Initialize repos and basic workflow (init, add, commit, push)</div>
                    <div class="bullet-note">Understand the staging area concept, write meaningful commit messages, and establish a consistent workflow. Learn the difference between local and remote repositories.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Branching and merging strategies</div>
                    <div class="bullet-note">Master git flow, feature branches, and hotfixes. Understand when to merge vs rebase, and learn strategies like squashing commits for cleaner history.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Resolving merge conflicts</div>
                    <div class="bullet-note">Understand why conflicts occur, use visual merge tools, and learn to read conflict markers. Practice resolving conflicts without losing work.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Pull requests and code reviews</div>
                    <div class="bullet-note">Write descriptive PR descriptions, understand review etiquette, and learn to give constructive feedback. Master the art of small, reviewable commits.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">.gitignore and what to exclude</div>
                    <div class="bullet-note">Never commit secrets, API keys, or large files. Understand patterns for different languages/frameworks and use gitignore.io for templates.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">SSH keys vs HTTPS authentication</div>
                    <div class="bullet-note">Set up SSH keys for passwordless authentication, understand security implications, and manage multiple GitHub accounts with different keys.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Forking and contributing to open source</div>
                    <div class="bullet-note">Learn the fork-PR workflow, keep forks synchronized with upstream, and understand contributor guidelines and licensing.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Git reset, revert, and fixing mistakes</div>
                    <div class="bullet-note">Understand the difference between soft/mixed/hard reset, when to use revert vs reset, and recover lost commits with reflog.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">GitHub Actions basics</div>
                    <div class="bullet-note">Automate testing and deployment, understand YAML syntax for workflows, and use marketplace actions. Learn about secrets management in CI/CD.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">README and documentation best practices</div>
                    <div class="bullet-note">Write clear installation instructions, include examples and screenshots, add badges for build status, and use markdown effectively for formatting.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">3</span>
                    <span class="topic-title">SSH</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Generate and manage SSH keys</div>
                    <div class="bullet-note">Use ssh-keygen with proper encryption (ed25519), understand public vs private keys, and learn proper key storage and backup practices.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Connect to remote servers</div>
                    <div class="bullet-note">Master the ssh user@host syntax, understand default ports, and learn to specify custom ports with -p. Know when to use -v for debugging connections.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">SSH config file for easy connections</div>
                    <div class="bullet-note">Create aliases for frequently accessed servers, set default usernames and ports, and configure keep-alive settings to prevent disconnections.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Port forwarding and tunneling</div>
                    <div class="bullet-note">Access remote services locally with -L, expose local services remotely with -R, and create SOCKS proxies for secure browsing through remote servers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">SCP and transferring files</div>
                    <div class="bullet-note">Copy files to/from remote servers, understand recursive copying for directories, and learn about rsync for more efficient transfers with progress indicators.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Managing multiple SSH identities</div>
                    <div class="bullet-note">Use different keys for different services (GitHub, work servers, personal servers), configure ssh-agent for key management, and understand identity file selection.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Security best practices</div>
                    <div class="bullet-note">Disable password authentication, use fail2ban for brute force protection, change default ports, and implement key rotation policies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Debugging connection issues</div>
                    <div class="bullet-note">Use verbose mode (-vvv) to diagnose problems, understand common error messages, check firewall rules, and verify key permissions (600 for private keys).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Using SSH with Git</div>
                    <div class="bullet-note">Configure Git to use SSH for GitHub/GitLab, test connections with ssh -T, and troubleshoot permission denied errors.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Setting up passwordless authentication</div>
                    <div class="bullet-note">Copy public keys with ssh-copy-id, understand authorized_keys file, and configure sudo access without passwords for automation.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">4</span>
                    <span class="topic-title">Frontend (HTML, CSS, JS)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">HTML semantic structure and accessibility</div>
                    <div class="bullet-note">Use proper tags (header, nav, main, article, section), understand ARIA labels, and ensure keyboard navigation. Learn why divs aren't always the answer.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">CSS Grid and Flexbox layouts</div>
                    <div class="bullet-note">Master both layout systems and when to use each. Understand fr units, gap property, align/justify properties, and how to create responsive layouts without media queries.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Responsive design and media queries</div>
                    <div class="bullet-note">Mobile-first approach, breakpoint strategies, and fluid typography with clamp(). Understand viewport units and when to use rem vs em vs px.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">JavaScript DOM manipulation</div>
                    <div class="bullet-note">querySelector vs getElementById, creating and removing elements, modifying attributes and classes. Understand the performance implications of DOM operations.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Event handling and listeners</div>
                    <div class="bullet-note">Event bubbling and delegation, preventDefault and stopPropagation, removing listeners to prevent memory leaks. Understand the event loop and how JavaScript handles asynchronous events.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Async/await and promises</div>
                    <div class="bullet-note">Convert callback hell to clean async code, handle errors with try/catch, and understand Promise.all vs Promise.race. Learn when promises are better than async/await.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Fetch API and working with data</div>
                    <div class="bullet-note">Make HTTP requests, handle different response types (JSON, text, blob), and implement proper error handling. Understand CORS and how to work around it.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Modern ES6+ features</div>
                    <div class="bullet-note">Destructuring, spread operator, template literals, arrow functions, and modules. Understand when to use const vs let, and why var is discouraged.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Browser dev tools mastery</div>
                    <div class="bullet-note">Debug with breakpoints, analyze network requests, profile performance, and modify CSS in real-time. Learn to use the console beyond console.log.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Performance optimization basics</div>
                    <div class="bullet-note">Lazy loading, code splitting, minimizing reflows/repaints, and optimizing images. Understand the Critical Rendering Path and how to measure performance with Lighthouse.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">5</span>
                    <span class="topic-title">Backend (Python, Node)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Setting up development environments</div>
                    <div class="bullet-note">Virtual environments in Python (venv, conda), Node version management (nvm), and understanding package.json vs requirements.txt. Learn to isolate project dependencies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Creating REST APIs</div>
                    <div class="bullet-note">Design RESTful endpoints, implement CRUD operations, and understand HTTP methods semantics. Learn about API versioning and documentation with Swagger/OpenAPI.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Request/response cycle</div>
                    <div class="bullet-note">Understand headers, body parsing, status codes, and response formats. Learn about request validation and sanitization to prevent security issues.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Middleware and authentication</div>
                    <div class="bullet-note">Implement auth middleware, understand JWT vs sessions, and secure routes properly. Learn about refresh tokens and implementing role-based access control.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Error handling patterns</div>
                    <div class="bullet-note">Centralized error handling, custom error classes, and proper status codes. Understand the difference between operational and programmer errors.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">File system operations</div>
                    <div class="bullet-note">Read/write files safely, handle uploads with size limits, and implement file streaming for large files. Understand path traversal vulnerabilities and how to prevent them.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Working with JSON</div>
                    <div class="bullet-note">Parse and stringify safely, handle malformed JSON, and validate schemas. Understand the limitations of JSON and when to use alternatives like MessagePack.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Package management (pip, npm)</div>
                    <div class="bullet-note">Understand semantic versioning, lock files importance, and handling security vulnerabilities. Learn to audit dependencies and keep them updated.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Environment variables and config</div>
                    <div class="bullet-note">Use .env files with dotenv, never commit secrets, and understand different config strategies for dev/staging/production environments.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Testing basics</div>
                    <div class="bullet-note">Write unit tests, understand mocking and stubbing, and implement integration tests. Learn about test coverage and why 100% isn't always the goal.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">6</span>
                    <span class="topic-title">Databases (SQLite, MySQL, PostgreSQL)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">SQL fundamentals (SELECT, INSERT, UPDATE, DELETE)</div>
                    <div class="bullet-note">Master WHERE clauses, JOIN types, GROUP BY with aggregations, and subqueries. Understand the order of SQL operations and how it affects query writing.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Database design and normalization</div>
                    <div class="bullet-note">Understand 1NF, 2NF, 3NF and when to denormalize. Design schemas that balance performance with data integrity. Learn about common anti-patterns to avoid.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Primary keys, foreign keys, indexes</div>
                    <div class="bullet-note">Choose appropriate primary keys (natural vs surrogate), implement referential integrity with foreign keys, and create indexes for query optimization without over-indexing.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Joins and relationships</div>
                    <div class="bullet-note">Master INNER, LEFT, RIGHT, and FULL OUTER joins. Understand one-to-many, many-to-many relationships, and when to use junction tables.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Transactions and ACID properties</div>
                    <div class="bullet-note">Implement atomic operations, understand isolation levels, and handle deadlocks. Learn when to use transactions and their performance implications.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Connection pooling</div>
                    <div class="bullet-note">Understand why connection pooling is crucial, configure pool sizes appropriately, and handle connection timeouts. Learn about connection leaks and how to prevent them.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Migrations and schema changes</div>
                    <div class="bullet-note">Use migration tools (Alembic, Knex), write reversible migrations, and handle data migrations safely. Understand the importance of migration version control.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Backup and restore strategies</div>
                    <div class="bullet-note">Implement automated backups, test restore procedures, and understand point-in-time recovery. Learn about logical vs physical backups and when to use each.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Query optimization</div>
                    <div class="bullet-note">Read execution plans, identify slow queries with profiling, and optimize with proper indexing. Understand when to use views, stored procedures, and query caching.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">ORMs vs raw SQL</div>
                    <div class="bullet-note">Understand the tradeoffs, avoid N+1 queries with eager loading, and know when to drop down to raw SQL. Learn about the ORM impedance mismatch problem.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">7</span>
                    <span class="topic-title">APIs</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">REST principles and HTTP methods</div>
                    <div class="bullet-note">Understand idempotency, proper use of GET/POST/PUT/PATCH/DELETE, and stateless design. Learn about HATEOAS and why most APIs don't fully implement REST.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Authentication (API keys, OAuth, JWT)</div>
                    <div class="bullet-note">Implement API key authentication, understand OAuth 2.0 flow, and properly handle JWT tokens. Learn about token expiration, refresh strategies, and secure storage.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Rate limiting and best practices</div>
                    <div class="bullet-note">Implement rate limiting with token buckets or sliding windows, return proper headers, and handle burst traffic. Understand different strategies for different endpoints.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Error handling and status codes</div>
                    <div class="bullet-note">Use appropriate HTTP status codes, provide meaningful error messages, and implement consistent error response formats. Learn about problem details (RFC 7807).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Working with JSON and data formats</div>
                    <div class="bullet-note">Handle different content types, implement content negotiation, and validate request/response schemas. Understand when to use alternatives like Protocol Buffers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Postman/Insomnia for testing</div>
                    <div class="bullet-note">Create collections, use environments for different stages, and write automated tests. Learn to generate documentation and mock servers from collections.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">API documentation reading</div>
                    <div class="bullet-note">Navigate complex API docs, understand authentication requirements, and identify rate limits. Learn to test endpoints and understand error responses.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Webhooks and callbacks</div>
                    <div class="bullet-note">Implement webhook endpoints, handle retries and failures, and verify webhook signatures. Understand the difference between polling and webhooks.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">GraphQL basics</div>
                    <div class="bullet-note">Understand queries, mutations, and subscriptions. Learn about the N+1 problem in GraphQL, schema design, and when GraphQL is better than REST.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">API versioning strategies</div>
                    <div class="bullet-note">URL versioning vs header versioning, deprecation strategies, and backward compatibility. Learn how to migrate users between API versions gracefully.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">8</span>
                    <span class="topic-title">Docker</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Containers vs virtual machines</div>
                    <div class="bullet-note">Understand the fundamental differences, resource usage implications, and when to use each. Learn about the Linux kernel features that make containers possible.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Writing Dockerfiles</div>
                    <div class="bullet-note">Multi-stage builds for smaller images, layer caching optimization, and security best practices. Understand the importance of using specific base image tags.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Building and running images</div>
                    <div class="bullet-note">Build context optimization, tagging strategies, and running containers with proper flags. Learn about detached mode, interactive mode, and when to use each.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Volume mounting and data persistence</div>
                    <div class="bullet-note">Understand bind mounts vs volumes, implement proper backup strategies, and share data between containers. Learn about volume drivers and when to use them.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Networking between containers</div>
                    <div class="bullet-note">Create custom networks, understand bridge vs host networking, and implement service discovery. Learn about exposing ports and internal container communication.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Docker Compose for multi-container apps</div>
                    <div class="bullet-note">Write docker-compose.yml files, manage environment variables, and implement health checks. Understand service dependencies and startup order.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Registry and pushing images</div>
                    <div class="bullet-note">Push to Docker Hub or private registries, implement image scanning for vulnerabilities, and manage image tags. Learn about image signing and verification.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Container debugging and logs</div>
                    <div class="bullet-note">Use docker exec for debugging, aggregate logs properly, and implement log rotation. Learn to debug crashed containers and analyze exit codes.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Resource limits and optimization</div>
                    <div class="bullet-note">Set memory and CPU limits, understand the consequences of limits, and optimize container size. Learn about Docker stats and monitoring resource usage.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Security best practices</div>
                    <div class="bullet-note">Run as non-root user, scan for vulnerabilities, and use secrets management. Understand container escape risks and how to minimize attack surface.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">9</span>
                    <span class="topic-title">Deploying</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Choosing hosting providers</div>
                    <div class="bullet-note">Compare VPS, PaaS, and serverless options. Understand pricing models, vendor lock-in risks, and evaluate based on your needs (Heroku, AWS, DigitalOcean, Vercel).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Domain names and DNS</div>
                    <div class="bullet-note">Register domains, configure A, CNAME, MX records, and understand TTL values. Learn about DNS propagation and using Cloudflare for CDN and protection.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">SSL certificates and HTTPS</div>
                    <div class="bullet-note">Get free certificates with Let's Encrypt, automate renewal with certbot, and configure HTTPS properly. Understand HSTS and why mixed content is problematic.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Environment variables in production</div>
                    <div class="bullet-note">Manage secrets securely, use tools like HashiCorp Vault or AWS Secrets Manager, and never commit production configs. Understand the principle of least privilege.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">CI/CD pipeline basics</div>
                    <div class="bullet-note">Set up GitHub Actions or GitLab CI, implement automated testing before deployment, and use blue-green or rolling deployments. Learn about rollback strategies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Monitoring and logging</div>
                    <div class="bullet-note">Implement application monitoring (New Relic, DataDog), set up alerts for critical issues, and centralize logs. Understand metrics that matter for your application.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Scaling strategies</div>
                    <div class="bullet-note">Understand vertical vs horizontal scaling, implement load balancing, and use caching effectively. Learn about auto-scaling and when it's needed.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Database hosting options</div>
                    <div class="bullet-note">Choose between managed databases vs self-hosting, understand backup strategies, and implement read replicas for scaling. Learn about connection pooling in production.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Static site deployment</div>
                    <div class="bullet-note">Use Netlify, Vercel, or GitHub Pages for static sites, implement CDN caching, and optimize build times. Understand JAMstack architecture benefits.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Troubleshooting production issues</div>
                    <div class="bullet-note">Implement proper error tracking (Sentry), use feature flags for gradual rollouts, and maintain runbooks for common issues. Learn to debug without affecting users.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">10</span>
                    <span class="topic-title">FTP</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">FTP vs SFTP vs FTPS</div>
                    <div class="bullet-note">Understand why plain FTP is insecure, when to use SFTP (SSH-based) vs FTPS (SSL/TLS), and migration strategies from legacy FTP systems.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Command line FTP clients</div>
                    <div class="bullet-note">Master basic FTP commands (get, put, mget, mput), navigate remote directories, and script automated transfers. Learn about .netrc for credential storage.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">GUI clients (FileZilla, Cyberduck)</div>
                    <div class="bullet-note">Configure site managers, set up synchronized browsing, and use queue management for batch transfers. Understand transfer type settings (binary vs ASCII).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Batch transfers and automation</div>
                    <div class="bullet-note">Write scripts for automated uploads/downloads, implement error handling and retries, and schedule transfers with cron. Learn about watch folders for automatic uploads.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Permission issues and troubleshooting</div>
                    <div class="bullet-note">Understand Unix permissions in FTP context, debug connection issues, and handle character encoding problems. Learn about umask and default permissions.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Active vs passive mode</div>
                    <div class="bullet-note">Understand when to use each mode, configure firewalls for FTP, and troubleshoot connection issues related to mode settings. Learn about NAT traversal issues.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Resume interrupted transfers</div>
                    <div class="bullet-note">Implement resume support in scripts, understand REST command, and handle partial file cleanup. Learn about integrity checking after transfers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">FTP in modern deployment (why it's legacy)</div>
                    <div class="bullet-note">Understand security vulnerabilities of FTP, learn why modern CI/CD replaced it, and when FTP is still unavoidable (legacy systems, certain hosts).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Secure alternatives</div>
                    <div class="bullet-note">Migrate to rsync over SSH, use SCP for simple transfers, or implement modern deployment pipelines. Understand the benefits of version control-based deployment.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">When FTP is still used</div>
                    <div class="bullet-note">Legacy system integration, certain shared hosting providers, and bulk data transfers to partners. Learn to secure FTP when it's unavoidable with VPNs or IP restrictions.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">11</span>
                    <span class="topic-title">Proxy & WebSockets</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">What proxies do and why they matter</div>
                    <div class="bullet-note">Understand proxy as intermediary, use cases for caching, security, and load balancing. Learn about transparent vs explicit proxies and when to use each.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Forward vs reverse proxy</div>
                    <div class="bullet-note">Forward proxy hides clients from servers, reverse proxy hides servers from clients. Understand use cases: corporate networks vs web applications.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Setting up nginx as reverse proxy</div>
                    <div class="bullet-note">Configure proxy_pass, handle headers properly (X-Forwarded-For, Host), and implement SSL termination. Learn about buffering and timeout settings.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">WebSocket protocol basics</div>
                    <div class="bullet-note">Understand the upgrade handshake, persistent connections vs HTTP polling, and binary vs text frames. Learn about the WebSocket API in browsers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Real-time communication patterns</div>
                    <div class="bullet-note">Implement pub/sub patterns, broadcast vs targeted messages, and room-based communication. Understand when to use WebSockets vs Server-Sent Events.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Socket.io implementation</div>
                    <div class="bullet-note">Set up Socket.io server and client, use namespaces and rooms, and implement acknowledgments. Learn about automatic reconnection and fallback to polling.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Handling disconnections and reconnections</div>
                    <div class="bullet-note">Implement heartbeat/ping-pong, queue messages during disconnection, and restore state on reconnection. Understand different disconnection scenarios.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Scaling WebSocket servers</div>
                    <div class="bullet-note">Use Redis adapter for multiple servers, implement sticky sessions, and handle state synchronization. Learn about horizontal scaling challenges.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Load balancing considerations</div>
                    <div class="bullet-note">Configure nginx for WebSocket load balancing, understand session affinity requirements, and implement health checks for WebSocket endpoints.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Security and authentication</div>
                    <div class="bullet-note">Implement token-based auth for WebSockets, validate origin headers, and prevent WebSocket hijacking. Learn about rate limiting for WebSocket connections.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">12</span>
                    <span class="topic-title">Cron Jobs & Automation</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Cron syntax and scheduling</div>
                    <div class="bullet-note">Master the five fields (minute, hour, day, month, weekday), use special characters (*, /, -, ,), and test with crontab.guru. Understand how cron interprets time.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Common scheduling patterns</div>
                    <div class="bullet-note">Daily backups at 2 AM, hourly health checks, weekly reports, and monthly cleanup tasks. Learn to avoid problematic times (DST changes, midnight).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Logging and error handling</div>
                    <div class="bullet-note">Redirect output to log files, implement log rotation, and set up email notifications for failures. Understand why cron has limited environment variables.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Environment differences in cron</div>
                    <div class="bullet-note">PATH is minimal in cron, must use absolute paths, and source profile if needed. Learn to debug "works manually but not in cron" issues.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Alternatives (systemd timers, task schedulers)</div>
                    <div class="bullet-note">Understand systemd timers advantages, use node-cron or APScheduler for application-level scheduling, and evaluate cloud-based schedulers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Monitoring cron job health</div>
                    <div class="bullet-note">Implement dead man's switch monitoring, use services like Healthchecks.io, and track execution time trends. Learn to alert on missed executions.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Preventing overlapping runs</div>
                    <div class="bullet-note">Use flock for file locking, implement PID file checks, and handle long-running jobs gracefully. Understand risks of concurrent execution.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Time zones and scheduling</div>
                    <div class="bullet-note">Understand how cron handles time zones, account for DST changes, and use UTC for consistency. Learn about timezone-aware scheduling tools.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Automation best practices</div>
                    <div class="bullet-note">Make scripts idempotent, implement proper error handling, and use configuration files. Document dependencies and test automation thoroughly.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cloud-based schedulers</div>
                    <div class="bullet-note">Use AWS Lambda with CloudWatch Events, Google Cloud Scheduler, or GitHub Actions scheduled workflows. Understand serverless scheduling benefits.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">13</span>
                    <span class="topic-title">Kubernetes</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Pods, services, deployments concepts</div>
                    <div class="bullet-note">Understand pods as smallest deployable units, services for networking, and deployments for declarative updates. Learn about ReplicaSets and their role.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">kubectl essential commands</div>
                    <div class="bullet-note">Master get, describe, logs, exec, and port-forward. Learn to use labels and selectors effectively. Understand kubectl config for multiple clusters.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Writing YAML manifests</div>
                    <div class="bullet-note">Structure deployment and service YAML files, understand required vs optional fields, and use kubectl explain for documentation. Learn about YAML anchors for DRY configs.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">ConfigMaps and Secrets</div>
                    <div class="bullet-note">Separate config from code, mount as volumes or environment variables, and understand base64 encoding for secrets. Learn about secret rotation strategies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Persistent volumes</div>
                    <div class="bullet-note">Understand PV and PVC relationship, storage classes, and access modes. Learn about StatefulSets for stateful applications and volume backup strategies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Ingress and load balancing</div>
                    <div class="bullet-note">Configure ingress controllers (nginx, traefik), implement path and host-based routing, and manage SSL certificates. Understand service types: ClusterIP, NodePort, LoadBalancer.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Scaling and autoscaling</div>
                    <div class="bullet-note">Horizontal Pod Autoscaler setup, understand metrics server requirement, and configure scaling policies. Learn about Vertical Pod Autoscaler and cluster autoscaling.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Health checks and probes</div>
                    <div class="bullet-note">Implement liveness and readiness probes, understand probe types (HTTP, TCP, exec), and configure appropriate thresholds. Learn when to use startup probes.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Debugging crashed pods</div>
                    <div class="bullet-note">Use kubectl describe for events, check logs of previous container, and understand CrashLoopBackOff. Learn to use ephemeral debug containers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">When to use k8s vs simpler solutions</div>
                    <div class="bullet-note">Evaluate complexity vs benefits, understand when Docker Compose suffices, and consider managed Kubernetes services. Learn about the operational overhead of Kubernetes.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">14</span>
                    <span class="topic-title">AI Studio</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Google AI Studio interface</div>
                    <div class="bullet-note">Navigate the playground, understand different model options, and use the prompt gallery. Learn about project organization and sharing capabilities.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Prompt engineering basics</div>
                    <div class="bullet-note">Write clear, specific prompts, use examples for few-shot learning, and implement chain-of-thought reasoning. Understand prompt templates and variables.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Model selection and parameters</div>
                    <div class="bullet-note">Choose between Gemini models based on use case, adjust temperature and top-p for creativity vs consistency, and set appropriate token limits.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">System prompts and context</div>
                    <div class="bullet-note">Design effective system prompts for consistent behavior, manage context windows efficiently, and implement role-playing for specific outputs.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Testing and iteration</div>
                    <div class="bullet-note">Use the test suite feature, compare outputs across prompts, and implement version control for prompts. Learn A/B testing strategies for prompts.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">API integration from studio</div>
                    <div class="bullet-note">Export code snippets in various languages, implement proper error handling, and manage API keys securely. Understand rate limits and quotas.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cost management</div>
                    <div class="bullet-note">Monitor token usage, implement caching strategies, and optimize prompts for efficiency. Understand pricing tiers and when to upgrade.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Fine-tuning basics</div>
                    <div class="bullet-note">Prepare training data in correct format, understand when fine-tuning is necessary, and evaluate model performance. Learn about overfitting risks.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Prompt templates</div>
                    <div class="bullet-note">Create reusable templates with variables, implement conditional logic, and organize templates by use case. Learn to maintain prompt libraries.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Exporting and deployment</div>
                    <div class="bullet-note">Convert studio experiments to production code, implement proper logging and monitoring, and handle edge cases. Understand scaling considerations.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">15</span>
                    <span class="topic-title">GPTs, Gems</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Custom GPT creation</div>
                    <div class="bullet-note">Design conversation flow, write detailed instructions, and configure capabilities. Understand the difference between instructions and conversation starters.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Instructions and behavior design</div>
                    <div class="bullet-note">Write clear system prompts, implement guardrails for unwanted behavior, and design personality traits. Learn to handle edge cases and ambiguous inputs.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Knowledge base integration</div>
                    <div class="bullet-note">Upload relevant documents, understand retrieval limitations, and organize knowledge effectively. Learn about citation and source attribution.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Actions and API connections</div>
                    <div class="bullet-note">Configure OAuth or API key authentication, write OpenAPI schemas, and handle API errors gracefully. Understand action chaining and data flow.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Testing and refinement</div>
                    <div class="bullet-note">Test with diverse inputs, identify failure modes, and iterate on instructions. Learn to gather user feedback and implement improvements.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Sharing and monetization</div>
                    <div class="bullet-note">Understand GPT Store requirements, implement usage tracking, and explore monetization options. Learn about promotion and user acquisition.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Google Gems setup</div>
                    <div class="bullet-note">Create specialized Gemini assistants, configure capabilities and limitations, and integrate with Google Workspace. Understand Gems vs standard Gemini.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Use case identification</div>
                    <div class="bullet-note">Identify repetitive tasks suitable for automation, evaluate ROI of custom assistants, and design for specific workflows. Learn to scope features appropriately.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Limitations and workarounds</div>
                    <div class="bullet-note">Understand context window limits, work around capability restrictions, and implement fallback behaviors. Learn when to use multiple specialized assistants.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Maintenance and updates</div>
                    <div class="bullet-note">Monitor performance degradation, update knowledge bases regularly, and adapt to API changes. Implement version control for GPT configurations.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">16</span>
                    <span class="topic-title">Image Gen (Sora, Grok, Gemini)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Prompt engineering for images</div>
                    <div class="bullet-note">Structure prompts with subject, style, composition, and lighting. Learn weighted keywords, negative prompts, and how different models interpret prompts.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Style modifiers and techniques</div>
                    <div class="bullet-note">Master artistic styles, photography terms, and rendering techniques. Understand how to combine multiple style references effectively.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Resolution and aspect ratios</div>
                    <div class="bullet-note">Choose appropriate dimensions for use cases, understand model limitations, and implement upscaling strategies. Learn about tile generation for large images.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Iterating and refining outputs</div>
                    <div class="bullet-note">Use seed values for consistency, implement variation techniques, and refine through inpainting/outpainting. Learn prompt evolution strategies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">API integration</div>
                    <div class="bullet-note">Implement async generation, handle callbacks for completion, and manage rate limits. Learn to cache and store generated images efficiently.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cost per generation</div>
                    <div class="bullet-note">Calculate costs across platforms, implement budgeting, and optimize for quality vs quantity. Understand pricing tiers and bulk discounts.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Copyright and usage rights</div>
                    <div class="bullet-note">Understand platform-specific licenses, commercial use restrictions, and attribution requirements. Learn about AI art copyright debates and best practices.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Combining with other tools</div>
                    <div class="bullet-note">Use Photoshop for post-processing, implement img2img workflows, and combine multiple AI tools. Learn about ControlNet and guided generation.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Batch generation</div>
                    <div class="bullet-note">Automate multiple variations, implement queue systems, and handle failures gracefully. Learn to optimize for GPU utilization.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Commercial use cases</div>
                    <div class="bullet-note">Design assets for marketing, create product mockups, and generate content at scale. Understand client expectations and delivery formats.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">17</span>
                    <span class="topic-title">Video Gen (Runway, Grok, Veo3)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Text-to-video prompting</div>
                    <div class="bullet-note">Describe motion, camera movements, and scene transitions. Understand temporal consistency challenges and how to maintain coherent narratives.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Image-to-video workflows</div>
                    <div class="bullet-note">Animate still images, control motion intensity, and maintain subject consistency. Learn about keyframe selection and interpolation techniques.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Duration and resolution limits</div>
                    <div class="bullet-note">Work within platform constraints, implement scene stitching for longer videos, and optimize for different platforms (TikTok, YouTube, etc.).</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Style consistency</div>
                    <div class="bullet-note">Maintain visual coherence across clips, use style references effectively, and implement color grading. Learn about temporal style transfer.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Motion control basics</div>
                    <div class="bullet-note">Control camera movements, object trajectories, and animation speed. Understand motion vectors and how to guide generation.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Audio synchronization</div>
                    <div class="bullet-note">Match video to music beats, implement lip-sync for talking heads, and handle audio-visual alignment. Learn about sound design integration.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Editing generated content</div>
                    <div class="bullet-note">Use traditional video editors for post-processing, implement transitions, and color correction. Learn to hide AI artifacts and improve realism.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">API access and automation</div>
                    <div class="bullet-note">Build video generation pipelines, handle async processing, and implement webhook callbacks. Learn about queue management for long generations.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cost optimization</div>
                    <div class="bullet-note">Balance quality settings with cost, implement preview systems, and cache intermediate results. Understand when to use different quality tiers.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Quality vs speed tradeoffs</div>
                    <div class="bullet-note">Choose appropriate models for use cases, implement draft-and-refine workflows, and optimize rendering settings. Learn about real-time vs offline generation.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">18</span>
                    <span class="topic-title">Music Gen (Udio, Producer, Suno)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Prompt structure for music</div>
                    <div class="bullet-note">Describe genre, mood, instruments, and tempo effectively. Learn musical terminology and how AI interprets stylistic descriptions.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Genre and style descriptions</div>
                    <div class="bullet-note">Master genre-specific terminology, combine influences effectively, and understand era-specific production styles. Learn about micro-genres and fusion styles.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Lyrics generation and editing</div>
                    <div class="bullet-note">Write AI-friendly lyrics, control syllable count and rhyme schemes, and edit for better flow. Understand prosody and meter in AI generation.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Song structure control</div>
                    <div class="bullet-note">Define verses, choruses, bridges, and outros. Implement dynamic arrangements and understand how to control energy progression throughout songs.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Extending and variations</div>
                    <div class="bullet-note">Create longer compositions from segments, maintain thematic consistency, and generate variations. Learn about stem continuation techniques.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Stem separation</div>
                    <div class="bullet-note">Extract individual instruments, create remixes and mashups, and clean up artifacts. Understand the limitations of AI stem separation.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Copyright and commercial use</div>
                    <div class="bullet-note">Navigate platform licenses, understand royalty-free vs rights-managed, and implement proper attribution. Learn about AI music in commercial projects.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">API integration</div>
                    <div class="bullet-note">Implement generation queues, handle long processing times, and store results efficiently. Learn about webhook notifications for completion.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Batch generation strategies</div>
                    <div class="bullet-note">Generate multiple variations efficiently, implement A/B testing for styles, and manage generation credits. Learn parallel generation techniques.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Mixing with traditional DAWs</div>
                    <div class="bullet-note">Import AI stems into Logic/Ableton, apply professional mixing, and combine with recorded elements. Learn about tempo/key matching for integration.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">19</span>
                    <span class="topic-title">Software Gen (Bolt, Lovable, Replit)</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Effective prompting for code generation</div>
                    <div class="bullet-note">Describe requirements clearly, provide examples and edge cases, and specify tech stack preferences. Learn to break complex features into smaller prompts.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Iterative development workflow</div>
                    <div class="bullet-note">Start with MVP, add features incrementally, and maintain coherent architecture. Understand how to guide AI through refactoring.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Debugging generated code</div>
                    <div class="bullet-note">Identify common AI code patterns that cause issues, use debugging tools effectively, and understand when to manually intervene.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Deployment from these platforms</div>
                    <div class="bullet-note">Export to GitHub, deploy to Vercel/Netlify, and handle environment variables. Learn about platform-specific deployment limitations.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cost management strategies</div>
                    <div class="bullet-note">Monitor token usage, optimize prompts for efficiency, and know when to switch to local development. Understand pricing models across platforms.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Version control integration</div>
                    <div class="bullet-note">Connect to GitHub, implement branching strategies, and maintain commit history. Learn about merge conflict resolution with AI-generated code.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Customization and extending</div>
                    <div class="bullet-note">Modify generated code safely, add custom libraries, and integrate external APIs. Understand the boundaries of AI assistance.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Limitations and when to code manually</div>
                    <div class="bullet-note">Recognize complex logic AI struggles with, performance-critical sections, and security-sensitive code. Learn when human expertise is essential.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Team collaboration features</div>
                    <div class="bullet-note">Share projects, implement code reviews, and manage permissions. Understand real-time collaboration capabilities and limitations.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Moving projects to production</div>
                    <div class="bullet-note">Export clean codebases, implement proper testing, and add monitoring. Learn to transition from prototype to production-ready applications.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">20</span>
                    <span class="topic-title">Agents</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Agent vs traditional automation</div>
                    <div class="bullet-note">Understand autonomous decision-making, goal-oriented behavior, and adaptive responses. Learn when agents provide value over scripted automation.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">LangChain and frameworks</div>
                    <div class="bullet-note">Build chains and agents, implement tools and memory, and understand different agent types. Learn about alternatives like AutoGen and CrewAI.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Memory and context management</div>
                    <div class="bullet-note">Implement conversation memory, use vector databases for long-term memory, and manage context windows. Understand memory retrieval strategies.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Tool use and function calling</div>
                    <div class="bullet-note">Define tool schemas, implement error handling, and chain multiple tools. Learn about tool selection strategies and when to use each tool.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Multi-agent systems</div>
                    <div class="bullet-note">Design agent communication protocols, implement delegation patterns, and coordinate multiple agents. Understand emergent behaviors and control mechanisms.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Debugging agent behavior</div>
                    <div class="bullet-note">Implement logging for decision processes, trace execution paths, and identify loops or failures. Learn to use LangSmith for observability.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cost and token management</div>
                    <div class="bullet-note">Optimize prompt chains, implement caching strategies, and set token limits. Understand cost implications of recursive agent calls.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Production deployment</div>
                    <div class="bullet-note">Handle scalability, implement rate limiting, and ensure reliability. Learn about async processing and queue management for agents.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Monitoring and logging</div>
                    <div class="bullet-note">Track agent performance, monitor decision quality, and implement alerting. Understand metrics that matter for agent systems.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Common pitfalls and solutions</div>
                    <div class="bullet-note">Avoid infinite loops, handle hallucinations, and prevent agent confusion. Learn about guardrails and safety mechanisms for production agents.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">21</span>
                    <span class="topic-title">Projects</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Project planning and scope</div>
                    <div class="bullet-note">Define clear objectives, create realistic timelines, and identify dependencies. Learn to break down projects into manageable milestones.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">MVP identification</div>
                    <div class="bullet-note">Determine core features, cut non-essential functionality, and focus on user value. Understand the balance between completeness and shipping.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Tech stack selection</div>
                    <div class="bullet-note">Evaluate frameworks and libraries, consider team expertise, and think about long-term maintenance. Learn to avoid over-engineering and hype-driven development.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Architecture decisions</div>
                    <div class="bullet-note">Choose between monolithic and microservices, design database schemas, and plan API structures. Document decisions and trade-offs.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Documentation strategies</div>
                    <div class="bullet-note">Write clear READMEs, maintain API documentation, and create user guides. Learn about documentation-as-code and automated documentation.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Testing approaches</div>
                    <div class="bullet-note">Implement unit, integration, and E2E tests. Understand test pyramids, TDD vs BDD, and when each testing type provides value.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Deployment planning</div>
                    <div class="bullet-note">Choose hosting platforms, implement CI/CD pipelines, and plan rollback strategies. Consider scalability from the start.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Maintenance considerations</div>
                    <div class="bullet-note">Plan for updates, security patches, and feature additions. Implement monitoring and establish on-call procedures.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Portfolio presentation</div>
                    <div class="bullet-note">Showcase projects effectively, write case studies, and demonstrate problem-solving. Learn to tell the story behind your projects.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Open source best practices</div>
                    <div class="bullet-note">Choose appropriate licenses, manage contributors, and build community. Understand governance models and sustainability strategies.</div>
                </div>
            </div>
        </div>

        <div class="topic-card">
            <div class="topic-header" onclick="toggleTopic(this)">
                <div>
                    <span class="topic-number">22</span>
                    <span class="topic-title">YouTube Shorts</span>
                </div>
                <span class="toggle-icon">+</span>
            </div>
            <div class="topic-content">
                <div class="bullet-point">
                    <div class="bullet-title">Vertical video best practices</div>
                    <div class="bullet-note">Frame for 9:16 aspect ratio, keep important elements centered, and optimize for mobile viewing. Understand safe zones for different platforms.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Hook in first 3 seconds</div>
                    <div class="bullet-note">Start with the payoff, ask compelling questions, or show surprising visuals. Learn pattern interrupts and why scroll-stopping content works.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Retention optimization</div>
                    <div class="bullet-note">Maintain fast pacing, use visual changes every 3-4 seconds, and implement cliffhangers. Understand retention graphs and drop-off points.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Text overlays and captions</div>
                    <div class="bullet-note">Use large, readable fonts, implement auto-captions, and highlight key points. Learn about accessibility and why 85% watch without sound.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Trending audio usage</div>
                    <div class="bullet-note">Find trending sounds early, match content to audio mood, and understand copyright implications. Learn when original audio performs better.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Thumbnail strategies</div>
                    <div class="bullet-note">Design eye-catching covers, use consistent branding, and A/B test different styles. Understand how thumbnails affect click-through rates.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Publishing schedule</div>
                    <div class="bullet-note">Find optimal posting times, maintain consistency, and understand platform algorithms. Learn about time zones and global audiences.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Analytics that matter</div>
                    <div class="bullet-note">Track average view duration, analyze traffic sources, and understand audience retention. Learn which metrics actually drive growth.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Cross-platform posting</div>
                    <div class="bullet-note">Adapt content for TikTok, Instagram Reels, and YouTube Shorts. Understand platform-specific features and audience expectations.</div>
                </div>
                <div class="bullet-point">
                    <div class="bullet-title">Building a content calendar</div>
                    <div class="bullet-note">Plan content themes, batch production days, and maintain variety. Learn to balance educational, entertaining, and promotional content.</div>
                </div>
            </div>
        </div>

    </div>

    <script>
        function toggleTopic(header) {
            const card = header.parentElement;
            card.classList.toggle('active');
        }

        function toggleAll() {
            const cards = document.querySelectorAll('.topic-card');
            const allActive = Array.from(cards).every(card => card.classList.contains('active'));
            
            cards.forEach(card => {
                if (allActive) {
                    card.classList.remove('active');
                } else {
                    card.classList.add('active');
                }
            });
        }
    </script>
</body>
</html>