Git Create Repository

✨ The Prompt Phrase

What sequence of terminal commands would you use to check for an existing Git repository, initialize one if needed, stage your files, create the first commit, authenticate with GitHub, and then create and push a new public repository to GitHub from the current folder?

# 1. Check if a git repo already exists
~git status~

# 2. Initialize a new git repository
~git init~

# 3. Stage all files for tracking
~git add .~

# 4. Commit staged files with a message
~git commit -m "Initial commit"~

# 5. Authenticate with GitHub (one-time)
~gh auth login~

# 6. Create the repo on GitHub & link it
~gh repo create <name> --public --source=.~

# 7. Push your code to GitHub
~git push -u origin master~

💻 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>Git Create Repository - Interactive Tutorial</title>
  <style>
    :root {
      --bg: #0b1020;
      --bg2: #121a33;
      --panel: rgba(255,255,255,0.08);
      --panel-2: rgba(255,255,255,0.05);
      --text: #eef4ff;
      --muted: #b8c4e0;
      --purple: #8b5cf6;
      --blue: #38bdf8;
      --green: #34d399;
      --pink: #f472b6;
      --yellow: #facc15;
      --red: #fb7185;
      --border: rgba(255,255,255,0.14);
      --shadow: 0 20px 50px rgba(0,0,0,0.35);
      --radius: 24px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Segoe UI", system-ui, sans-serif;
      color: var(--text);
      min-height: 100vh;
      line-height: 1.65;
      padding: 24px;
      background:
        radial-gradient(circle at top left, rgba(139,92,246,0.25), transparent 30%),
        radial-gradient(circle at top right, rgba(56,189,248,0.18), transparent 28%),
        linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      max-width: 1220px;
      margin: 0 auto;
    }

    .theme-toggle,
    .copy-toggle,
    .tab-radio,
    .quiz input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .theme-toggle:checked ~ .page {
      --bg: #edf4ff;
      --bg2: #dde8fb;
      --panel: rgba(255,255,255,0.85);
      --panel-2: rgba(255,255,255,0.75);
      --text: #12213e;
      --muted: #4f6689;
      --border: rgba(18,33,62,0.12);
      --shadow: 0 18px 40px rgba(62,81,124,0.16);
    }

    .theme-toggle:checked ~ .page .nav {
      background: rgba(255,255,255,0.82);
    }

    .theme-toggle:checked ~ .page .code-box,
    .theme-toggle:checked ~ .page .hero-code,
    .theme-toggle:checked ~ .page .tooltip::after {
      background: #eef4ff;
      color: #12213e;
    }

    .nav {
      position: sticky;
      top: 16px;
      z-index: 25;
      margin-bottom: 24px;
      padding: 12px 16px;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(11,16,32,0.72);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
    }

    .nav a {
      padding: 10px 14px;
      border-radius: 999px;
      color: var(--muted);
      transition: 0.22s ease;
      font-size: 0.95rem;
    }

    .nav a:hover,
    .nav a:focus {
      background: rgba(255,255,255,0.08);
      color: var(--text);
      outline: none;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 42px 28px;
      border-radius: 32px;
      background: linear-gradient(145deg, rgba(139,92,246,0.18), rgba(56,189,248,0.12));
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      margin-bottom: 24px;
      animation: fadeUp 0.8s ease;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      filter: blur(24px);
      opacity: 0.45;
      pointer-events: none;
    }

    .hero::before {
      width: 220px;
      height: 220px;
      background: rgba(139,92,246,0.3);
      top: -70px;
      right: -50px;
    }

    .hero::after {
      width: 180px;
      height: 180px;
      background: rgba(52,211,153,0.18);
      left: -40px;
      bottom: -50px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.09);
      color: var(--muted);
      font-size: 0.92rem;
    }

    h1 {
      font-size: clamp(2rem, 5vw, 4rem);
      line-height: 1.1;
      margin-bottom: 14px;
    }

    .gradient-text {
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      color: var(--muted);
      font-size: 1.04rem;
      max-width: 820px;
      margin-bottom: 20px;
    }

    .hero-code,
    .code-box {
      background: rgba(5,10,24,0.82);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      padding: 18px;
      font-family: Consolas, monospace;
      overflow-x: auto;
    }

    .hero-code {
      margin-bottom: 18px;
      color: #dbeafe;
      white-space: pre-wrap;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .btn,
    .copy-label,
    .theme-label,
    .tab-label,
    .option {
      transition: 0.22s ease;
    }

    .btn,
    .copy-label,
    .theme-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--border);
      font-weight: 700;
      cursor: pointer;
    }

    .btn {
      background: linear-gradient(135deg, var(--purple), var(--blue));
      color: white;
    }

    .btn:hover,
    .copy-label:hover,
    .theme-label:hover {
      transform: translateY(-2px);
    }

    .copy-label,
    .theme-label {
      background: rgba(255,255,255,0.08);
      color: var(--text);
    }

    .copy-text-done,
    .theme-text-alt {
      display: none;
    }

    .copy-toggle:checked + .copy-label .copy-text-default,
    .theme-toggle:checked + .page .theme-label .theme-text-default {
      display: none;
    }

    .copy-toggle:checked + .copy-label .copy-text-done,
    .theme-toggle:checked + .page .theme-label .theme-text-alt {
      display: inline;
    }

    .copy-toggle:checked + .copy-label {
      background: linear-gradient(135deg, var(--green), #10b981);
      color: #042115;
    }

    .progress-card {
      margin-top: 18px;
      display: grid;
      gap: 10px;
      max-width: 600px;
    }

    .progress-bar {
      width: 100%;
      height: 14px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border);
    }

    .progress-bar span {
      display: block;
      width: 84%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      animation: loadBar 1.5s ease;
    }

    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .badge {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.92rem;
    }

    .layout {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 24px;
    }

    .stack {
      display: grid;
      gap: 24px;
    }

    .card {
      padding: 24px;
      border-radius: var(--radius);
      background: var(--panel);
      border: 1px solid var(--border);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      animation: fadeUp 0.8s ease;
    }

    .card h2 {
      font-size: 1.4rem;
      margin-bottom: 10px;
    }

    .card h3 {
      font-size: 1.05rem;
      margin-bottom: 8px;
    }

    .muted {
      color: var(--muted);
    }

    .story,
    .list li,
    .step,
    .annotated div,
    .quiz-question,
    .mini-card {
      background: var(--panel-2);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .story {
      padding: 18px;
      border-radius: 18px;
      margin-top: 16px;
      background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(52,211,153,0.08));
    }

    .list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .list li {
      list-style: none;
      padding: 14px 16px;
      border-radius: 16px;
    }

    .tooltip {
      position: relative;
      color: #c4b5fd;
      border-bottom: 1px dashed rgba(255,255,255,0.45);
      cursor: help;
    }

    .tooltip::after {
      content: attr(data-tip);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 140%;
      width: 230px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #08101f;
      color: var(--text);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      font-size: 0.86rem;
      line-height: 1.45;
      opacity: 0;
      pointer-events: none;
    }

    .tooltip:hover::after,
    .tooltip:focus::after {
      opacity: 1;
    }

    details {
      background: var(--panel-2);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 14px 16px;
    }

    details + details {
      margin-top: 12px;
    }

    summary {
      cursor: pointer;
      list-style: none;
      font-weight: 700;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "＋";
      float: right;
      color: var(--blue);
    }

    details[open] summary::after {
      content: "－";
    }

    .step-grid,
    .annotated {
      display: grid;
      gap: 14px;
      margin-top: 16px;
    }

    .step {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .step-number {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--purple), var(--blue));
    }

    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
    }

    .tab-label {
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--muted);
      cursor: pointer;
      font-weight: 600;
    }

    .tab-label:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text);
    }

    .tab-panel {
      display: none;
      padding: 18px;
      border-radius: 18px;
      background: var(--panel-2);
      border: 1px solid rgba(255,255,255,0.08);
    }

    #tab1:checked ~ .tabs .label1,
    #tab2:checked ~ .tabs .label2,
    #tab3:checked ~ .tabs .label3 {
      background: linear-gradient(135deg, var(--purple), var(--blue));
      color: white;
    }

    #tab1:checked ~ .panels .panel1,
    #tab2:checked ~ .panels .panel2,
    #tab3:checked ~ .panels .panel3 {
      display: block;
    }

    .token-git { color: #93c5fd; }
    .token-gh { color: #c4b5fd; }
    .token-action { color: #86efac; }
    .token-flag { color: #f9a8d4; }
    .token-name { color: #fde68a; }

    .mistake {
      border-left: 4px solid var(--red);
    }

    .tip {
      border-left: 4px solid var(--green);
    }

    .quiz-question {
      padding: 18px;
      border-radius: 18px;
      margin-bottom: 16px;
    }

    .option {
      display: block;
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
    }

    .option:hover {
      background: rgba(255,255,255,0.08);
    }

    .feedback {
      display: none;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      font-weight: 700;
    }

    .correct {
      background: rgba(52,211,153,0.16);
      border: 1px solid rgba(52,211,153,0.35);
      color: #bbf7d0;
    }

    .wrong {
      background: rgba(251,113,133,0.14);
      border: 1px solid rgba(251,113,133,0.35);
      color: #fecdd3;
    }

    #q1b:checked ~ .f1b,
    #q2a:checked ~ .f2a,
    #q3c:checked ~ .f3c {
      display: block;
      position: relative;
    }

    #q1b:checked ~ .f1b::after,
    #q2a:checked ~ .f2a::after,
    #q3c:checked ~ .f3c::after {
      content: "🎉 ✨ 🎊";
      display: block;
      margin-top: 8px;
      animation: pop 0.45s ease;
    }

    #q1a:checked ~ .f1a,
    #q1c:checked ~ .f1c,
    #q2b:checked ~ .f2b,
    #q2c:checked ~ .f2c,
    #q3a:checked ~ .f3a,
    #q3b:checked ~ .f3b {
      display: block;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 16px;
    }

    .mini-card {
      padding: 16px;
      border-radius: 18px;
    }

    .footer {
      text-align: center;
      color: var(--muted);
      padding: 30px 10px 10px;
      font-size: 0.95rem;
    }

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

    @keyframes loadBar {
      from { width: 0; }
      to { width: 84%; }
    }

    @keyframes pop {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    @media (max-width: 920px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .summary-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 32px 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }
  </style>
</head>
<body>
  <input class="theme-toggle" id="themeToggle" type="checkbox">

  <div class="page">
    <nav class="nav" aria-label="Tutorial sections">
      <a href="#what">What Is It?</a>
      <a href="#why">Why Use It?</a>
      <a href="#how">How It Works</a>
      <a href="#demo">Live Demo</a>
      <a href="#breakdown">Code Breakdown</a>
      <a href="#mistakes">Mistakes</a>
      <a href="#tips">Pro Tips</a>
      <a href="#quiz">Quiz</a>
      <a href="#summary">Summary</a>
    </nav>

    <header class="hero">
      <div class="eyebrow">🎓 Beginner-Friendly • 🚀 GitHub Publishing Flow • 🧩 Step-by-Step Quest</div>
      <h1>Learn the <span class="gradient-text">Git-to-GitHub Repository Workflow</span></h1>
      <p>
        This command sequence is a beginner-friendly roadmap for taking a local project folder and turning it into a real GitHub repository.
        You check whether Git is already active, initialize the repository if needed, track files, make the first commit,
        authenticate with GitHub, create the remote repository, and finally push your code online. 🌍✨
      </p>

      <div class="hero-code" aria-label="Command sequence">git status
git init
git add .
git commit -m "Initial commit"
gh auth login
gh repo create your-repo-name --public --source=.
git push -u origin master</div>

      <div class="hero-actions">
        <a class="btn" href="#quiz">🚀 Start Learning</a>

        <div>
          <input class="copy-toggle" id="copyHero" type="checkbox">
          <label class="copy-label" for="copyHero" aria-label="Copy command style button">
            <span class="copy-text-default">📋 Copy Commands</span>
            <span class="copy-text-done">✅ Ready to Copy</span>
          </label>
        </div>

        <div>
          <label class="theme-label" for="themeToggle" aria-label="Theme toggle button">
            <span class="theme-text-default">🌙 Dark / ☀️ Light</span>
            <span class="theme-text-alt">☀️ Light Theme On</span>
          </label>
        </div>
      </div>

      <div class="progress-card">
        <div class="muted">Progress meter: you're close to mastering the first-time GitHub publishing flow.</div>
        <div class="progress-bar" aria-label="Learning progress">
          <span></span>
        </div>
        <div class="badges">
          <div class="badge">🧠 Skill: Git Basics</div>
          <div class="badge">⭐ Level: Beginner</div>
          <div class="badge">🏅 Goal: Publish a local project to GitHub</div>
        </div>
      </div>
    </header>

    <div class="layout">
      <main class="stack">
        <section class="card" id="what">
          <h2>🤔 What Is It?</h2>
          <p class="muted">
            This is a sequence of terminal commands that helps you turn a normal folder into a tracked Git project and then publish it as a new public repository on GitHub.
          </p>
          <div class="story">
            <strong>Story mode:</strong> Imagine your project is a spaceship being prepared for launch. 🚀
            First, you check the ship, then install the navigation system, pack the cargo, seal the mission log,
            show your pilot ID to mission control, create a launch pad on GitHub, and finally blast off with your first push.
          </div>
          <ul class="list">
            <li>📂 <strong>git status</strong> checks whether your folder is already a Git repository and shows the current file state.</li>
            <li>🏁 <strong>git init</strong> starts a new Git repository in the folder.</li>
            <li>📦 <strong>git add .</strong> stages all files for tracking.</li>
            <li>📝 <strong>git commit -m "Initial commit"</strong> creates the first saved snapshot.</li>
            <li>🔐 <strong>gh auth login</strong> connects GitHub CLI to your GitHub account.</li>
            <li>🌐 <strong>gh repo create ...</strong> creates the repository on GitHub and links it to your folder.</li>
            <li>🚀 <strong>git push -u origin master</strong> uploads your local commit to GitHub.</li>
          </ul>
        </section>

        <section class="card" id="why">
          <h2>🌟 Why Use It?</h2>
          <p class="muted">This workflow is useful when you have a local project and want to start version control and publish it to GitHub properly.</p>
          <ul class="list">
            <li>✅ Gives your project version history from the start.</li>
            <li>☁️ Moves your local work to GitHub so it can be backed up and shared.</li>
            <li>👥 Makes collaboration easier with teammates or future contributors.</li>
            <li>🧭 Provides a clean beginner-friendly path from local folder to online repository.</li>
          </ul>
        </section>

        <section class="card" id="how">
          <h2>🧩 How Does It Work?</h2>
          <p class="muted">Each command handles one stage of the journey from local files to a live GitHub repository.</p>
          <div class="step-grid">
            <div class="step">
              <div class="step-number">1</div>
              <div>
                <h3>Check the Folder</h3>
                <p class="muted">Use <strong>git status</strong> to see whether Git is already set up and what Git thinks about your files.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div>
                <h3>Initialize Git</h3>
                <p class="muted">If needed, <strong>git init</strong> creates a new Git repository in the current directory.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div>
                <h3>Stage Files</h3>
                <p class="muted">Use <strong>git add .</strong> to prepare all current files for the first commit.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div>
                <h3>Create the First Commit</h3>
                <p class="muted">The commit gives Git a saved snapshot with a meaningful message.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">5</div>
              <div>
                <h3>Authenticate with GitHub</h3>
                <p class="muted">GitHub CLI needs your permission before it can create a repository under your account.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">6</div>
              <div>
                <h3>Create and Link the Remote Repo</h3>
                <p class="muted">This creates a public repository on GitHub and connects it to your local folder.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">7</div>
              <div>
                <h3>Push to GitHub</h3>
                <p class="muted">The final push uploads your commit to the remote repository.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="card" id="demo">
          <h2>🎮 Live Demo / Example</h2>

          <input class="tab-radio" type="radio" name="tabs" id="tab1" checked>
          <input class="tab-radio" type="radio" name="tabs" id="tab2">
          <input class="tab-radio" type="radio" name="tabs" id="tab3">

          <div class="tabs" role="tablist" aria-label="Example tabs">
            <label class="tab-label label1" for="tab1">📁 New Project</label>
            <label class="tab-label label2" for="tab2">🔗 GitHub Connection</label>
            <label class="tab-label label3" for="tab3">🚀 Final Push</label>
          </div>

          <div class="panels">
            <div class="tab-panel panel1">
              <p><strong>Scenario:</strong> You built a local project folder and now want Git to start tracking it.</p>
              <div class="code-box">git status
git init
git add .
git commit -m "Initial commit"</div>
              <p class="muted">This prepares the project locally before GitHub gets involved.</p>
            </div>

            <div class="tab-panel panel2">
              <p><strong>Next step:</strong> Sign in with GitHub CLI and create the remote repository.</p>
              <div class="code-box">gh auth login
gh repo create your-repo-name --public --source=.</div>
              <p class="muted">That creates the repo online and links your current folder to it.</p>
            </div>

            <div class="tab-panel panel3">
              <p><strong>Launch moment:</strong> Send your code to GitHub.</p>
              <div class="code-box">git push -u origin master</div>
              <p class="muted">Now your local commit becomes visible in the remote repository.</p>
            </div>
          </div>
        </section>

        <section class="card" id="breakdown">
          <h2>🧪 Code Breakdown</h2>
          <div class="code-box" aria-label="Annotated command sequence">
            <span class="token-git">git</span> <span class="token-action">status</span><br>
            <span class="token-git">git</span> <span class="token-action">init</span><br>
            <span class="token-git">git</span> <span class="token-action">add</span> <span class="token-name">.</span><br>
            <span class="token-git">git</span> <span class="token-action">commit</span> <span class="token-flag">-m</span> <span class="token-name">"Initial commit"</span><br>
            <span class="token-gh">gh</span> <span class="token-action">auth</span> <span class="token-flag">login</span><br>
            <span class="token-gh">gh</span> <span class="token-action">repo</span> <span class="token-action">create</span> <span class="token-name">your-repo-name</span> <span class="token-flag">--public</span> <span class="token-flag">--source=.</span><br>
            <span class="token-git">git</span> <span class="token-action">push</span> <span class="token-flag">-u</span> <span class="token-name">origin</span> <span class="token-name">master</span>
          </div>

          <div class="annotated">
            <div><strong>git status</strong> → checks the current repository state.</div>
            <div><strong>git init</strong> → creates a Git repository if one does not already exist.</div>
            <div><strong>git add .</strong> → stages all files in the current folder.</div>
            <div><strong>git commit -m "Initial commit"</strong> → saves the staged snapshot with a message.</div>
            <div><strong>gh auth login</strong> → signs GitHub CLI into your GitHub account.</div>
            <div><strong>gh repo create ...</strong> → creates the new GitHub repository and links it.</div>
            <div><strong>git push -u origin master</strong> → pushes the local branch to GitHub and sets upstream tracking.</div>
          </div>
        </section>

        <section class="card" id="mistakes">
          <h2>🚫 Common Mistakes</h2>
          <details open>
            <summary>Running git init inside an existing repository</summary>
            <div class="annotated">
              <div class="mistake">Always check first. Re-initializing may confuse beginners about what repository they are working in.</div>
            </div>
          </details>
          <details>
            <summary>Forgetting to commit before pushing</summary>
            <div class="annotated">
              <div class="mistake">If you stage files but never create a commit, there may be nothing meaningful to push.</div>
            </div>
          </details>
          <details>
            <summary>Using a placeholder repository name</summary>
            <div class="annotated">
              <div class="mistake">Replace <strong>your-repo-name</strong> with the actual repository name you want on GitHub.</div>
            </div>
          </details>
          <details>
            <summary>Pushing to the wrong branch name</summary>
            <div class="annotated">
              <div class="mistake">Some setups use <strong>main</strong> instead of <strong>master</strong>. Check your current branch if push errors appear.</div>
            </div>
          </details>
        </section>

        <section class="card" id="tips">
          <h2>💡 Pro Tips</h2>
          <div class="annotated">
            <div class="tip">🕵️ Use <span class="tooltip" tabindex="0" data-tip="A commit is a saved snapshot of your tracked project files at a specific moment.">commit</span> messages that clearly explain what was added.</div>
            <div class="tip">🌱 Many modern repositories use <strong>main</strong> as the default branch instead of <strong>master</strong>.</div>
            <div class="tip">📘 If you already know the folder is brand new, you can often move quickly through the first four commands.</div>
            <div class="tip">🔐 GitHub authentication with <strong>gh auth login</strong> is usually a one-time setup per machine.</div>
          </div>
        </section>

        <section class="card quiz" id="quiz">
          <h2>🏆 Practice Quiz</h2>
          <p class="muted">Choose the best answer and enjoy a mini celebration when you get it right. 🎉</p>

          <div class="quiz-question">
            <h3>1) What command stages all files in the current folder?</h3>
            <input type="radio" name="q1" id="q1a">
            <label class="option" for="q1a">git status</label>

            <input type="radio" name="q1" id="q1b">
            <label class="option" for="q1b">git add .</label>

            <input type="radio" name="q1" id="q1c">
            <label class="option" for="q1c">gh auth login</label>

            <div class="feedback wrong f1a">Not quite. <strong>git status</strong> checks status but does not stage files.</div>
            <div class="feedback correct f1b">Correct! <strong>git add .</strong> stages files from the current directory.</div>
            <div class="feedback wrong f1c">Nope. That command is for GitHub authentication.</div>
          </div>

          <div class="quiz-question">
            <h3>2) Why do you run <strong>gh auth login</strong> in this workflow?</h3>
            <input type="radio" name="q2" id="q2a">
            <label class="option" for="q2a">To authenticate GitHub CLI with your GitHub account</label>

            <input type="radio" name="q2" id="q2b">
            <label class="option" for="q2b">To delete local files</label>

            <input type="radio" name="q2" id="q2c">
            <label class="option" for="q2c">To rename the branch automatically</label>

            <div class="feedback correct f2a">Exactly! GitHub CLI needs authentication before it can create repositories under your account.</div>
            <div class="feedback wrong f2b">Definitely not. Authentication should not delete your files.</div>
            <div class="feedback wrong f2c">Nice try, but branch naming is a separate topic.</div>
          </div>

          <div class="quiz-question">
            <h3>3) What is the final goal of <strong>git push -u origin master</strong> in this sequence?</h3>
            <input type="radio" name="q3" id="q3a">
            <label class="option" for="q3a">To create a new local folder</label>

            <input type="radio" name="q3" id="q3b">
            <label class="option" for="q3b">To initialize Git</label>

            <input type="radio" name="q3" id="q3c">
            <label class="option" for="q3c">To upload the local commit to GitHub and set upstream tracking</label>

            <div class="feedback wrong f3a">Nope. This is a network step, not a folder creation step.</div>
            <div class="feedback wrong f3b">That is the job of <strong>git init</strong>.</div>
            <div class="feedback correct f3c">Perfect! That push sends your work to GitHub and remembers the remote branch connection.</div>
          </div>
        </section>
      </main>

      <aside class="stack">
        <section class="card">
          <h2>🪄 Quick Story Quest</h2>
          <p class="muted">
            You have a local project and want to reveal it to the world. Your quest is to prepare it with Git,
            earn access to GitHub, build the remote repository, and send your code into orbit. 🌌
          </p>
        </section>

        <section class="card">
          <h2>🧭 Accordion Guide</h2>
          <details open>
            <summary>What is Git?</summary>
            <p class="muted" style="margin-top:12px;">Git is a version control system that tracks changes in your project files over time.</p>
          </details>
          <details>
            <summary>What is GitHub CLI?</summary>
            <p class="muted" style="margin-top:12px;">GitHub CLI is a command-line tool that lets you interact with GitHub from the terminal.</p>
          </details>
          <details>
            <summary>What is a remote repository?</summary>
            <p class="muted" style="margin-top:12px;">A remote repository is the online GitHub version of your local project.</p>
          </details>
        </section>

        <section class="card" id="summary">
          <h2>📌 Summary Card</h2>
          <p class="muted">A quick-reference cheat sheet for the full flow.</p>
          <div class="summary-grid">
            <div class="mini-card">
              <h3>Start</h3>
              <p class="muted">Check repo status and initialize Git if needed.</p>
            </div>
            <div class="mini-card">
              <h3>Prepare</h3>
              <p class="muted">Stage files and create the initial commit.</p>
            </div>
            <div class="mini-card">
              <h3>Connect</h3>
              <p class="muted">Authenticate with GitHub and create the remote repository.</p>
            </div>
            <div class="mini-card">
              <h3>Finish</h3>
              <p class="muted">Push your code to GitHub so the online repo contains your project.</p>
            </div>
          </div>
        </section>

        <section class="card">
          <h2>🎖️ Achievement Board</h2>
          <ul class="list">
            <li>🥉 <strong>Tracker:</strong> You understand how Git begins watching files.</li>
            <li>🥈 <strong>Publisher:</strong> You know how GitHub CLI helps create the remote repository.</li>
            <li>🥇 <strong>Launch Commander:</strong> You can explain the full local-to-GitHub workflow.</li>
          </ul>
        </section>
      </aside>
    </div>

    <footer class="footer">
      Made with curiosity, gradients, and beginner-friendly explanations 💜<br>
      generated by AI Prompt Dictionary
    </footer>
  </div>
</body>
</html>

Live Preview