Install a package globally to use it as a CLI tool

✨ The Prompt Phrase

npm install -g typescript

💻 Code Preview

📦 All-in-One Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Install TypeScript globally to use it as a CLI tool - Interactive Tutorial</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-primary: #0a0e27;
            --bg-secondary: #151932;
            --bg-card: #1e2139;
            --accent-purple: #a855f7;
            --accent-blue: #3b82f6;
            --accent-green: #10b981;
            --accent-red: #ef4444;
            --accent-yellow: #f59e0b;
            --accent-pink: #ec4899;
            --ts-blue: #3178c6;
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --gradient-ts: linear-gradient(135deg, #3178c6 0%, #235a97 100%);
            --gradient-npm: linear-gradient(135deg, #cb3837 0%, #fb3640 100%);
            --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

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

        /* Progress Bar */
        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--bg-secondary);
            z-index: 1000;
        }

        .progress-bar {
            height: 100%;
            background: var(--gradient-ts);
            width: 0%;
            transition: width 0.3s ease;
        }

        /* Hero Section */
        .hero {
            text-align: center;
            padding: 100px 20px;
            background: var(--gradient-ts);
            position: relative;
            overflow: hidden;
            border-radius: 0 0 50px 50px;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
            animation: float 20s linear infinite;
        }

        @keyframes float {
            from { transform: translateY(0); }
            to { transform: translateY(-100px); }
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .ts-logo {
            font-size: 5rem;
            margin-bottom: 20px;
            animation: rotate3d 4s ease-in-out infinite;
        }

        @keyframes rotate3d {
            0%, 100% { transform: rotateY(0deg); }
            50% { transform: rotateY(180deg); }
        }

        .command-display {
            display: inline-block;
            background: rgba(0, 0, 0, 0.4);
            padding: 25px 40px;
            border-radius: 15px;
            font-family: 'Fira Code', monospace;
            font-size: 1.8rem;
            margin: 30px 0;
            border: 3px solid rgba(255, 255, 255, 0.3);
            animation: pulse 2s ease-in-out infinite;
            color: white;
            font-weight: 600;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
            50% { transform: scale(1.05); box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0); }
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 20px;
            animation: slideDown 0.8s ease-out;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .hero p {
            font-size: 1.4rem;
            opacity: 0.95;
            animation: slideUp 0.8s ease-out;
            color: white;
        }

        @keyframes slideDown {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* Section Styles */
        .section {
            margin: 60px 0;
            animation: fadeIn 0.8s ease-out;
            animation-fill-mode: both;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .section-title {
            font-size: 2.5rem;
            margin-bottom: 30px;
            background: var(--gradient-ts);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            font-weight: 700;
        }

        .card {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 40px;
            margin: 30px 0;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
        }

        /* Code Block */
        .code-block {
            background: #1e1e1e;
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
            font-family: 'Fira Code', monospace;
        }

        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .code-lang {
            color: var(--accent-green);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .terminal-dots {
            display: flex;
            gap: 6px;
        }

        .terminal-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .dot-red { background: #ff5f56; }
        .dot-yellow { background: #ffbd2e; }
        .dot-green { background: #27c93f; }

        .copy-btn {
            background: var(--accent-purple);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            font-family: 'Poppins', sans-serif;
        }

        .copy-btn:hover {
            background: var(--accent-blue);
            transform: scale(1.05);
        }

        .copy-btn.copied {
            background: var(--accent-green);
        }

        pre {
            margin: 0;
            overflow-x: auto;
        }

        code {
            color: #e0e0e0;
            font-size: 0.95rem;
            line-height: 1.8;
        }

        .code-comment {
            color: #6a9955;
        }

        .code-keyword {
            color: #569cd6;
        }

        .code-string {
            color: #ce9178;
        }

        .code-function {
            color: #dcdcaa;
        }

        .code-variable {
            color: #9cdcfe;
        }

        /* Steps */
        .steps {
            counter-reset: step-counter;
        }

        .step {
            background: var(--bg-secondary);
            border-radius: 15px;
            padding: 30px;
            margin: 20px 0;
            position: relative;
            padding-left: 100px;
            transition: all 0.3s ease;
        }

        .step:hover {
            background: var(--bg-card);
            transform: translateX(10px);
        }

        .step::before {
            counter-increment: step-counter;
            content: counter(step-counter);
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            background: var(--gradient-ts);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 900;
            color: white;
        }

        .step h3 {
            color: var(--accent-pink);
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

        /* Feature Cards */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin: 30px 0;
        }

        .feature-card {
            background: var(--bg-secondary);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .feature-card:hover {
            border-color: var(--ts-blue);
            transform: translateY(-10px);
        }

        .feature-icon {
            font-size: 3.5rem;
            margin-bottom: 15px;
        }

        .feature-title {
            font-weight: 600;
            color: var(--ts-blue);
            margin-bottom: 10px;
            font-size: 1.3rem;
        }

        /* Interactive Demo */
        .demo-container {
            background: var(--bg-secondary);
            border-radius: 20px;
            padding: 40px;
            margin: 30px 0;
        }

        .terminal {
            background: #1e1e1e;
            border-radius: 15px;
            padding: 20px;
            font-family: 'Fira Code', monospace;
            min-height: 250px;
            margin: 20px 0;
            max-height: 400px;
            overflow-y: auto;
        }

        .terminal-line {
            margin: 10px 0;
            display: flex;
            align-items: flex-start;
        }

        .terminal-prompt {
            color: var(--accent-green);
            margin-right: 10px;
        }

        .terminal-command {
            color: var(--accent-blue);
        }

        .terminal-output {
            color: var(--text-secondary);
            margin-left: 20px;
        }

        .demo-button {
            background: var(--gradient-ts);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: 10px;
            font-family: 'Poppins', sans-serif;
        }

        .demo-button:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(49, 120, 198, 0.4);
        }

        .demo-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Tabs */
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tab {
            padding: 12px 24px;
            background: var(--bg-secondary);
            border: none;
            border-radius: 10px;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            font-family: 'Poppins', sans-serif;
        }

        .tab:hover {
            background: var(--bg-card);
        }

        .tab.active {
            background: var(--gradient-ts);
            color: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease-out;
        }

        /* Accordion */
        .accordion-header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: var(--bg-secondary);
            border-radius: 12px;
            margin: 15px 0;
            transition: all 0.3s ease;
        }

        .accordion-header:hover {
            background: var(--bg-card);
        }

        .accordion-icon {
            transition: transform 0.3s ease;
            font-size: 1.2rem;
        }

        .accordion-icon.active {
            transform: rotate(180deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .accordion-content.active {
            max-height: 2000px;
        }

        .accordion-body {
            padding: 20px;
            background: var(--bg-secondary);
            border-radius: 12px;
            margin-top: 5px;
        }

        /* Info Boxes */
        .tip {
            background: rgba(59, 130, 246, 0.1);
            border-left: 4px solid var(--accent-blue);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .tip::before {
            content: '💡 ';
            font-size: 1.5rem;
        }

        .warning {
            background: rgba(239, 68, 68, 0.1);
            border-left: 4px solid var(--accent-red);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .warning::before {
            content: '⚠️ ';
            font-size: 1.5rem;
        }

        .success {
            background: rgba(16, 185, 129, 0.1);
            border-left: 4px solid var(--accent-green);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .success::before {
            content: '✅ ';
            font-size: 1.5rem;
        }

        .info {
            background: rgba(236, 72, 153, 0.1);
            border-left: 4px solid var(--accent-pink);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .info::before {
            content: '🔍 ';
            font-size: 1.5rem;
        }

        /* Quiz */
        .quiz-container {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 40px;
            margin: 30px 0;
        }

        .quiz-question {
            margin: 30px 0;
        }

        .quiz-question h3 {
            color: var(--accent-purple);
            margin-bottom: 20px;
            font-size: 1.3rem;
        }

        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .quiz-option {
            background: var(--bg-secondary);
            padding: 20px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .quiz-option:hover {
            border-color: var(--accent-blue);
            transform: translateX(10px);
        }

        .quiz-option.correct {
            border-color: var(--accent-green);
            background: rgba(16, 185, 129, 0.1);
        }

        .quiz-option.incorrect {
            border-color: var(--accent-red);
            background: rgba(239, 68, 68, 0.1);
        }

        .quiz-feedback {
            margin-top: 15px;
            padding: 15px;
            border-radius: 10px;
            display: none;
        }

        .quiz-feedback.show {
            display: block;
            animation: slideIn 0.5s ease-out;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .quiz-feedback.correct {
            background: rgba(16, 185, 129, 0.1);
            border-left: 4px solid var(--accent-green);
        }

        .quiz-feedback.incorrect {
            background: rgba(239, 68, 68, 0.1);
            border-left: 4px solid var(--accent-red);
        }

        /* Cheat Sheet */
        .cheat-sheet {
            background: var(--gradient-ts);
            border-radius: 20px;
            padding: 40px;
            margin: 30px 0;
            color: white;
        }

        .cheat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .cheat-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .cheat-item h4 {
            color: white;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .cheat-item code {
            background: rgba(0, 0, 0, 0.3);
            padding: 4px 8px;
            border-radius: 5px;
            font-size: 0.9rem;
            color: white;
        }

        .highlight {
            color: var(--accent-yellow);
            font-weight: 600;
        }

        /* Footer */
        .footer {
            text-align: center;
            padding: 40px 20px;
            background: var(--bg-secondary);
            margin-top: 80px;
            border-radius: 20px;
        }

        .footer p {
            color: var(--text-secondary);
            margin: 10px 0;
        }

        /* Badges */
        .badge {
            display: inline-block;
            padding: 6px 12px;
            background: var(--gradient-purple);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin: 5px;
        }

        /* Comparison Table */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .comparison-table th {
            background: var(--bg-secondary);
            color: var(--ts-blue);
            font-weight: 600;
        }

        .comparison-table tr:hover {
            background: var(--bg-secondary);
        }

        /* Tooltip */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 2px dotted var(--accent-blue);
            cursor: help;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 250px;
            background-color: var(--bg-card);
            color: var(--text-primary);
            text-align: center;
            border-radius: 10px;
            padding: 10px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -125px;
            opacity: 0;
            transition: opacity 0.3s;
            border: 1px solid var(--accent-blue);
            font-size: 0.9rem;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .command-display {
                font-size: 1.2rem;
                padding: 15px 20px;
            }

            .hero p {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .card {
                padding: 25px;
            }

            .step {
                padding-left: 80px;
            }

            .step::before {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
        }

        /* Confetti */
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: var(--ts-blue);
            position: fixed;
            animation: confetti-fall 3s linear forwards;
            z-index: 9999;
        }

        @keyframes confetti-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <div class="hero">
        <div class="hero-content">
            <div class="ts-logo">📘</div>
            <h1>Master TypeScript Global Install!</h1>
            <div class="command-display">npm install -g typescript</div>
            <p>Install TypeScript globally and use it anywhere on your system! 🚀</p>
        </div>
    </div>

    <div class="container">
        <!-- What Is It Section -->
        <section class="section" id="what-is-it">
            <h2 class="section-title">🤔 What Is npm install -g typescript?</h2>
            <div class="card">
                <p style="font-size: 1.2rem; margin-bottom: 20px;">
                    This command installs <span class="highlight">TypeScript</span> <strong>globally</strong> on your computer, making it available as a <span class="tooltip">CLI tool<span class="tooltiptext">Command Line Interface - a program you can run from your terminal!</span></span> anywhere! 🌍
                </p>
                <p style="margin-bottom: 20px;">
                    Imagine having a super-powered translator in your pocket that you can use anywhere, anytime! 🎒 That's what global installation does - it makes TypeScript available system-wide, not just in one project folder!
                </p>
                <div class="info">
                    <strong>Breaking It Down:</strong>
                    <ul style="margin-left: 30px; margin-top: 10px; line-height: 2;">
                        <li><code>npm install</code> - Install a package</li>
                        <li><code>-g</code> - Install <strong>globally</strong> (system-wide)</li>
                        <li><code>typescript</code> - The TypeScript compiler package</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3 style="color: var(--accent-pink); margin-bottom: 15px;">What is TypeScript? 🔍</h3>
                    <ul style="margin-left: 30px; line-height: 2; font-size: 1.1rem;">
                        <li>📘 <strong>Superset of JavaScript</strong> - JavaScript with types!</li>
                        <li>🛡️ <strong>Type Safety</strong> - Catch errors before runtime</li>
                        <li>🎯 <strong>Better IDE Support</strong> - Amazing autocomplete</li>
                        <li>🏢 Used by <strong>Microsoft, Google, Airbnb</strong>, and more!</li>
                        <li>⭐ Over <strong>30 million downloads per week</strong></li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Why Global Install -->
        <section class="section" id="why-use-it">
            <h2 class="section-title">✨ Why Install Globally?</h2>
            <div class="card">
                <div class="feature-grid">
                    <div class="feature-card">
                        <div class="feature-icon">🌍</div>
                        <div class="feature-title">Use Anywhere</div>
                        <p style="color: var(--text-secondary);">Run TypeScript commands from any directory!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">⚡</div>
                        <div class="feature-title">CLI Access</div>
                        <p style="color: var(--text-secondary);">Use <code>tsc</code> command directly in terminal!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎯</div>
                        <div class="feature-title">Quick Compile</div>
                        <p style="color: var(--text-secondary);">Compile TypeScript files instantly!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🔧</div>
                        <div class="feature-title">Project Init</div>
                        <p style="color: var(--text-secondary);">Create tsconfig.json easily!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">📚</div>
                        <div class="feature-title">Learning</div>
                        <p style="color: var(--text-secondary);">Perfect for learning and experimenting!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🚀</div>
                        <div class="feature-title">One-Time Setup</div>
                        <p style="color: var(--text-secondary);">Install once, use forever!</p>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3 style="color: var(--accent-pink); margin-bottom: 15px;">📊 Global vs Local Installation</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>Feature</th>
                                <th>Global (-g)</th>
                                <th>Local (default)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Installation</strong></td>
                                <td><code>npm install -g typescript</code></td>
                                <td><code>npm install typescript</code></td>
                            </tr>
                            <tr>
                                <td><strong>Location</strong></td>
                                <td>System-wide directory</td>
                                <td>Project's node_modules</td>
                            </tr>
                            <tr>
                                <td><strong>Usage</strong></td>
                                <td>Anywhere on your computer</td>
                                <td>Only in that project</td>
                            </tr>
                            <tr>
                                <td><strong>Command</strong></td>
                                <td><code>tsc file.ts</code></td>
                                <td><code>npx tsc file.ts</code></td>
                            </tr>
                            <tr>
                                <td><strong>Best For</strong></td>
                                <td>CLI tools, learning</td>
                                <td>Project dependencies</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- How It Works -->
        <section class="section" id="how-it-works">
            <h2 class="section-title">⚙️ How Does It Work?</h2>
            <div class="card">
                <p style="margin-bottom: 30px; font-size: 1.1rem;">Let's break down what happens step by step:</p>
                
                <div class="steps">
                    <div class="step">
                        <h3>Step 1: npm Connects to Registry</h3>
                        <p>npm reaches out to npmjs.com to find the TypeScript package.</p>
                    </div>
                    
                    <div class="step">
                        <h3>Step 2: Downloads TypeScript</h3>
                        <p>npm downloads the latest version of TypeScript compiler and all its files.</p>
                    </div>
                    
                    <div class="step">
                        <h3>Step 3: Installs to Global Directory</h3>
                        <p>Instead of node_modules, it installs to a special global directory on your system.</p>
                        <div class="code-block" style="margin-top: 15px;">
                            <pre><code><span class="code-comment"># Common global locations:</span>
<span class="code-comment"># Windows: C:\Users\YourName\AppData\Roaming\npm</span>
<span class="code-comment"># Mac/Linux: /usr/local/lib/node_modules</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="step">
                        <h3>Step 4: Creates Executable Link</h3>
                        <p>npm creates a <code>tsc</code> command that you can run from anywhere!</p>
                    </div>
                    
                    <div class="step">
                        <h3>Step 5: Adds to System PATH</h3>
                        <p>The executable is added to your system PATH, making it accessible globally.</p>
                    </div>
                    
                    <div class="step">
                        <h3>Step 6: Ready to Use!</h3>
                        <p>You can now run <code>tsc</code> commands from any directory on your computer!</p>
                    </div>
                </div>

                <div class="success" style="margin-top: 30px;">
                    <strong>🎉 Done!</strong> TypeScript is now installed globally and ready to compile your code anywhere!
                </div>
            </div>
        </section>

        <!-- Interactive Demo -->
        <section class="section" id="demo">
            <h2 class="section-title">🎮 Interactive Demo</h2>
            <div class="demo-container">
                <h3 style="margin-bottom: 20px; font-size: 1.5rem;">See TypeScript in Action! 🚀</h3>
                <p style="margin-bottom: 30px;">Click the buttons to simulate different scenarios:</p>
                
                <button class="demo-button" onclick="simulateInstall()">
                    <span>📦</span>
                    <span>Install TypeScript Globally</span>
                </button>
                
                <button class="demo-button" onclick="simulateCompile()">
                    <span>⚡</span>
                    <span>Compile TypeScript File</span>
                </button>
                
                <button class="demo-button" onclick="simulateVersion()">
                    <span>ℹ️</span>
                    <span>Check Version</span>
                </button>

                <div class="terminal" id="terminal">
                    <div class="terminal-line">
                        <span class="terminal-prompt">$</span>
                        <span style="color: var(--text-secondary);">Ready for commands...</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Code Examples -->
        <section class="section" id="examples">
            <h2 class="section-title">💻 Real-World Usage</h2>
            <div class="card">
                <div class="tabs">
                    <button class="tab active" onclick="switchTab('install')">Installation</button>
                    <button class="tab" onclick="switchTab('basic')">Basic Usage</button>
                    <button class="tab" onclick="switchTab('compile')">Compilation</button>
                    <button class="tab" onclick="switchTab('config')">Configuration</button>
                </div>

                <div id="install" class="tab-content active">
                    <h3 style="color: var(--accent-pink); margin-bottom: 15px;">Installation Commands</h3>
                    <div class="code-block">
                        <div class="code-header">
                            <span class="code-lang">
                                <div class="terminal-dots">
                                    <div class="terminal-dot dot-red"></div>
                                    <div class="terminal-dot dot-yellow"></div>
                                    <div class="terminal-dot dot-green"></div>
                                </div>
                                Terminal
                            </span>
                            <button class="copy-btn" onclick="copyCode(this, 'install-code')">📋 Copy</button>
                        </div>
                        <pre><code id="install-code"><span class="code-comment"># Install TypeScript globally</span>
npm install -g typescript

<span class="code-comment"># Shorthand version</span>
npm i -g typescript

<span class="code-comment"># Install specific version</span>
npm install -g typescript@5.3.3

<span class="code-comment"># Check if installed successfully</span>
tsc --version</code></pre>
                        </div>
                    <div class="tip" style="margin-top: 15px;">
                        <strong>Pro Tip:</strong> You might need administrator privileges (sudo on Mac/Linux) to install globally!
                    </div>
                </div>

                <div id="basic" class="tab-content">
                    <h3 style="color: var(--accent-pink); margin-bottom: 15px;">Basic TypeScript Commands</h3>
                    <div class="code-block">
                        <div class="code-header">
                            <span class="code-lang">Terminal</span>
                            <button class="copy-btn" onclick="copyCode(this, 'basic-code')">📋 Copy</button>
                        </div>
                        <pre><code id="basic-code"><span class="code-comment"># Check TypeScript version</span>
tsc --version

<span class="code-comment"># Get help</span>
tsc --help

<span class="code-comment"># Initialize a new TypeScript project</span>
tsc --init

<span class="code-comment"># Compile a single file</span>
tsc app.ts

<span class="code-comment"># Compile all TypeScript files</span>
tsc

<span class="code-comment"># Watch mode (auto-compile on changes)</span>
tsc --watch</code></pre>
                    </div>
                </div>

                <div id="compile" class="tab-content">
                    <h3 style="color: var(--accent-pink); margin-bottom: 15px;">Compiling TypeScript</h3>
                    <p style="margin-bottom: 15px;">Create a TypeScript file and compile it to JavaScript:</p>
                    <div class="code-block">
                        <div class="code-header">
                            <span class="code-lang">app.ts</span>
                            <button class="copy-btn" onclick="copyCode(this, 'compile-code')">📋 Copy</button>
                        </div>
                        <pre><code id="compile-code"><span class="code-comment">// TypeScript code with types</span>
<span class="code-keyword">function</span> <span class="code-function">greet</span>(<span class="code-variable">name</span>: <span class="code-keyword">string</span>): <span class="code-keyword">string</span> {
  <span class="code-keyword">return</span> <span class="code-string">`Hello, ${name}!`</span>;
}

<span class="code-keyword">const</span> <span class="code-variable">message</span>: <span class="code-keyword">string</span> = <span class="code-function">greet</span>(<span class="code-string">"TypeScript"</span>);
console.<span class="code-function">log</span>(<span class="code-variable">message</span>);</code></pre>
                    </div>
                    <div class="code-block" style="margin-top: 15px;">
                        <div class="code-header">
                            <span class="code-lang">Terminal - Compile It!</span>
                        </div>
                        <pre><code><span class="code-comment"># Compile app.ts → app.js</span>
tsc app.ts

<span class="code-comment"># Run the compiled JavaScript</span>
node app.js

<span class="code-comment"># Output: Hello, TypeScript!</span></code></pre>
                    </div>
                    <div class="success" style="margin-top: 15px;">
                        <strong>Magic! ✨</strong> TypeScript compiles to clean, readable JavaScript that runs anywhere!
                    </div>
                </div>

                <div id="config" class="tab-content">
                    <h3 style="color: var(--accent-pink); margin-bottom: 15px;">TypeScript Configuration</h3>
                    <p style="margin-bottom: 15px;">Create a <code>tsconfig.json</code> for advanced configuration:</p>
                    <div class="code-block">
                        <div class="code-header">
                            <span class="code-lang">Terminal</span>
                        </div>
                        <pre><code><span class="code-comment"># Create tsconfig.json</span>
tsc --init</code></pre>
                    </div>
                    <div class="code-block" style="margin-top: 15px;">
                        <div class="code-header">
                            <span class="code-lang">tsconfig.json</span>
                            <button class="copy-btn" onclick="copyCode(this, 'config-code')">📋 Copy</button>
                        </div>
                        <pre><code id="config-code">{
  <span class="code-string">"compilerOptions"</span>: {
    <span class="code-string">"target"</span>: <span class="code-string">"ES2020"</span>,
    <span class="code-string">"module"</span>: <span class="code-string">"commonjs"</span>,
    <span class="code-string">"outDir"</span>: <span class="code-string">"./dist"</span>,
    <span class="code-string">"rootDir"</span>: <span class="code-string">"./src"</span>,
    <span class="code-string">"strict"</span>: <span class="code-keyword">true</span>,
    <span class="code-string">"esModuleInterop"</span>: <span class="code-keyword">true</span>
  }
}</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Common Mistakes -->
        <section class="section" id="mistakes">
            <h2 class="section-title">❌ Common Mistakes</h2>
            <div class="card">
                <div class="accordion">
                    <div class="accordion-item">
                        <div class="accordion-header" onclick="toggleAccordion(this)">
                            <span><strong>1. Permission Errors on Mac/Linux</strong></span>
                            <span class="accordion-icon">▼</span>
                        </div>
                        <div class="accordion-content">
                            <div class="accordion-body">
                                <div class="warning">
                                    <strong>Error:</strong> "EACCES: permission denied"
                                </div>
                                <div class="code-block" style="margin-top: 15px;">
                                    <pre><code><span class="code-comment"># ❌ Wrong - might fail without permissions</span>
npm install -g typescript

<span class="code-comment"># ✅ Option 1: Use sudo (not recommended long-term)</span>
sudo npm install -g typescript

<span class="code-comment"># ✅ Option 2: Fix npm permissions (recommended)</span>
<span class="code-comment"># Follow: https://docs.npmjs.com/resolving-eacces-permissions-errors</span>

<span class="code-comment"># ✅ Option 3: Use nvm (best practice)</span>
<span class="code-comment"># Install nvm first, then install node through nvm</span></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <div class="accordion-header" onclick="toggleAccordion(this)">
                            <span><strong>2. Command Not Found After Install</strong></span>
                            <span class="accordion-icon">▼</span>
                        </div>
                        <div class="accordion-content">
                            <div class="accordion-body">
                                <div class="warning">
                                    <strong>Problem:</strong> "tsc: command not found"
                                </div>
                                <div class="tip" style="margin-top: 15px;">
                                    <strong>Solutions:</strong>
                                    <ul style="margin-left: 30px; margin-top: 10px; line-height: 2;">
                                        <li>Restart your terminal/command prompt</li>
                                        <li>Check PATH: <code>echo $PATH</code> (Mac/Linux) or <code>echo %PATH%</code> (Windows)</li>
                                        <li>Find global npm folder: <code>npm config get prefix</code></li>
                                        <li>Reinstall: <code>npm uninstall -g typescript && npm install -g typescript</code></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <div class="accordion-header" onclick="toggleAccordion(this)">
                            <span><strong>3. Version Conflicts</strong></span>
                            <span class="accordion-icon">▼</span>
                        </div>
                        <div class="accordion-content">
                            <div class="accordion-body">
                                <div class="warning">
                                    <strong>Problem:</strong> Global TypeScript version conflicts with project version!
                                </div>
                                <div class="code-block" style="margin-top: 15px;">
                                    <pre><code><span class="code-comment"># Check global version</span>
tsc --version

<span class="code-comment"># Check project version</span>
npx tsc --version

<span class="code-comment"># Use project version (recommended)</span>
npx tsc

<span class="code-comment"># Or use npm scripts in package.json</span>
npm run build</code></pre>
                                </div>
                                <div class="success" style="margin-top: 15px;">
                                    <strong>Best Practice:</strong> Use global TypeScript for learning/quick tests, but use local versions for projects!
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <div class="accordion-header" onclick="toggleAccordion(this)">
                            <span><strong>4. Forgetting to Compile</strong></span>
                            <span class="accordion-icon">▼</span>
                        </div>
                        <div class="accordion-content">
                            <div class="accordion-body">
                                <div class="warning">
                                    <strong>Problem:</strong> Trying to run .ts files directly with Node.js!
                                </div>
                                <div class="code-block" style="margin-top: 15px;">
                                    <pre><code><span class="code-comment"># ❌ Wrong - Node.js can't run TypeScript directly</span>
node app.ts

<span class="code-comment"># ✅ Correct - Compile first, then run</span>
tsc app.ts
node app.js

<span class="code-comment"># ✅ Or use ts-node for development</span>
npx ts-node app.ts</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <div class="accordion-header" onclick="toggleAccordion(this)">
                            <span><strong>5. Outdated TypeScript Version</strong></span>
                            <span class="accordion-icon">▼</span>
                        </div>
                        <div class="accordion-content">
                            <div class="accordion-body">
                                <div class="warning">
                                    <strong>Problem:</strong> Using an old version and missing new features!
                                </div>
                                <div class="code-block" style="margin-top: 15px;">
                                    <pre><code><span class="code-comment"># Check current version</span>
tsc --version

<span class="code-comment"># Update to latest version</span>
npm update -g typescript

<span class="code-comment"># Or reinstall</span>
npm uninstall -g typescript
npm install -g typescript</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Pro Tips -->
        <section class="section" id="pro-tips">
            <h2 class="section-title">🚀 Pro Tips</h2>
            <div class="card">
                <div class="feature-grid">
                    <div class="feature-card">
                        <div class="feature-icon">👀</div>
                        <div class="feature-title">Watch Mode</div>
                        <p style="color: var(--text-secondary);"><code>tsc --watch</code> auto-compiles on save!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎯</div>
                        <div class="feature-title">Strict Mode</div>
                        <p style="color: var(--text-secondary);">Enable <code>"strict": true</code> for better type safety!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">📦</div>
                        <div class="feature-title">Type Definitions</div>
                        <p style="color: var(--text-secondary);">Install types: <code>npm i -D @types/node</code></p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🔍</div>
                        <div class="feature-title">Source Maps</div>
                        <p style="color: var(--text-secondary);">Enable <code>"sourceMap": true</code> for debugging!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">⚡</div>
                        <div class="feature-title">Incremental Builds</div>
                        <p style="color: var(--text-secondary);"><code>"incremental": true</code> for faster compilation!</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎨</div>
                        <div class="feature-title">Pretty Output</div>
                        <p style="color: var(--text-secondary);"><code>tsc --pretty</code> for colored output!</p>
                    </div>
                </div>

                <div class="success" style="margin-top: 30px;">
                    <strong>🎓 Pro Workflow:</strong> Use global TypeScript for quick experiments, but always use local versions in real projects for consistency!
                </div>
            </div>
        </section>

        <!-- Quiz -->
        <section class="section" id="quiz">
            <h2 class="section-title">🎯 Knowledge Check Quiz</h2>
            <div class="quiz-container">
                <p style="margin-bottom: 30px; font-size: 1.1rem;">Test your understanding! Click on the correct answer. 🧠</p>

                <div class="quiz-question">
                    <h3>Question 1: What does the -g flag do?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="checkAnswer(this, false, 1)">
                            A) Installs the package for GitHub
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, true, 1)">
                            B) Installs the package globally (system-wide)
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, false, 1)">
                            C) Installs the package with graphics
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, false, 1)">
                            D) Creates a new Git repository
                        </div>
                    </div>
                    <div class="quiz-feedback" id="feedback1"></div>
                </div>

                <div class="quiz-question">
                    <h3>Question 2: What command compiles a TypeScript file?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="checkAnswer(this, false, 2)">
                            A) node app.ts
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, true, 2)">
                            B) tsc app.ts
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, false, 2)">
                            C) npm compile app.ts
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, false, 2)">
                            D) typescript app.ts
                        </div>
                    </div>
                    <div class="quiz-feedback" id="feedback2"></div>
                </div>

                <div class="quiz-question">
                    <h3>Question 3: Where is TypeScript installed with -g flag?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="checkAnswer(this, false, 3)">
                            A) In the project's node_modules folder
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, true, 3)">
                            B) In a system-wide global directory
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, false, 3)">
                            C) On GitHub servers
                        </div>
                        <div class="quiz-option" onclick="checkAnswer(this, false, 3)">
                            D) In the Downloads folder
                        </div>
                    </div>
                    <div class="quiz-feedback" id="feedback3"></div>
                </div>

                <div id="quizScore" style="margin-top: 30px; padding: 20px; background: var(--bg-secondary); border-radius: 12px; display: none;">
                    <h3 style="color: var(--accent-green); font-size: 1.5rem;">🎉 Quiz Complete!</h3>
                    <p id="scoreText" style="font-size: 1.2rem; margin-top: 10px;"></p>
                </div>
            </div>
        </section>

        <!-- Cheat Sheet -->
        <section class="section" id="cheat-sheet">
            <h2 class="section-title">📚 Quick Reference Cheat Sheet</h2>
            <div class="cheat-sheet">
                <h3 style="margin-bottom: 20px; font-size: 2rem;">TypeScript CLI Essentials! 🔖</h3>
                
                <div class="cheat-grid">
                    <div class="cheat-item">
                        <h4>📦 Install Globally</h4>
                        <p><code>npm install -g typescript</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Install TypeScript system-wide</p>
                    </div>

                    <div class="cheat-item">
                        <h4>ℹ️ Check Version</h4>
                        <p><code>tsc --version</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">View installed version</p>
                    </div>

                    <div class="cheat-item">
                        <h4>⚡ Compile File</h4>
                        <p><code>tsc app.ts</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Compile TypeScript to JavaScript</p>
                    </div>

                    <div class="cheat-item">
                        <h4>👀 Watch Mode</h4>
                        <p><code>tsc --watch</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Auto-compile on file changes</p>
                    </div>

                    <div class="cheat-item">
                        <h4>🎯 Initialize Project</h4>
                        <p><code>tsc --init</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Create tsconfig.json</p>
                    </div>

                    <div class="cheat-item">
                        <h4>📁 Compile All</h4>
                        <p><code>tsc</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Compile all .ts files</p>
                    </div>

                    <div class="cheat-item">
                        <h4>🎨 Pretty Output</h4>
                        <p><code>tsc --pretty</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Colored terminal output</p>
                    </div>

                    <div class="cheat-item">
                        <h4>❓ Get Help</h4>
                        <p><code>tsc --help</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Show all commands</p>
                    </div>

                    <div class="cheat-item">
                        <h4>🔄 Update TypeScript</h4>
                        <p><code>npm update -g typescript</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Update to latest version</p>
                    </div>

                    <div class="cheat-item">
                        <h4>🗑️ Uninstall</h4>
                        <p><code>npm uninstall -g typescript</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Remove global installation</p>
                    </div>

                    <div class="cheat-item">
                        <h4>🎯 Target ES Version</h4>
                        <p><code>tsc --target ES2020</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Compile to specific ES version</p>
                    </div>

                    <div class="cheat-item">
                        <h4>📍 Check Global Path</h4>
                        <p><code>npm config get prefix</code></p>
                        <p style="font-size: 0.85rem; margin-top: 5px;">Find global install location</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <div class="footer">
            <h2 style="font-size: 2rem; margin-bottom: 20px; color: var(--accent-pink);">
                🎉 Congratulations!
            </h2>
            <p style="font-size: 1.2rem; margin-bottom: 20px;">
                You now understand <strong>npm install -g typescript</strong> and how to use TypeScript globally! 🚀
            </p>
            <div style="margin: 30px 0;">
                <span class="badge">📘 TypeScript Master</span>
                <span class="badge">🌍 Global Install Pro</span>
                <span class="badge">⚡ CLI Expert</span>
            </div>
            <p style="color: var(--text-secondary); margin-top: 30px;">
                Generated by <strong>AI Prompt Dictionary</strong> 🤖
            </p>
            <p style="color: var(--text-secondary); font-size: 0.9rem;">
                Made with ❤️ for developers learning TypeScript
            </p>
        </div>
    </div>

    <script>
        // Progress Bar
        window.addEventListener('scroll', () => {

Live Preview