git remote remove origin
📦 GitHub
✨ The Prompt Phrase
What Git command do you use to unlink your local repository from its remote connection named origin? ~git remote remove origin~
💻 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 remote remove origin – Interactive Tutorial</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #0d0d1a;
--surface: rgba(255,255,255,0.05);
--border: rgba(255,255,255,0.1);
--purple: #a855f7;
--blue: #3b82f6;
--green: #22c55e;
--pink: #ec4899;
--yellow: #facc15;
--text: #e2e8f0;
--muted: #94a3b8;
--radius: 16px;
--grad: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
overflow-x: hidden;
}
/* PROGRESS BAR */
#progress-bar {
position: fixed; top: 0; left: 0; height: 4px;
background: var(--grad); width: 0%;
transition: width 0.2s; z-index: 999;
}
/* NAV */
nav {
position: fixed; top: 4px; left: 50%; transform: translateX(-50%);
background: rgba(13,13,26,0.85);
backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: 50px;
padding: 10px 24px;
display: flex; gap: 20px; align-items: center;
z-index: 998; flex-wrap: wrap; justify-content: center;
}
nav a {
color: var(--muted); text-decoration: none; font-size: 0.78rem;
font-weight: 600; letter-spacing: .5px; transition: color .2s;
}
nav a:hover { color: var(--purple); }
/* HERO */
#hero {
min-height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 100px 24px 60px;
position: relative; overflow: hidden;
}
.hero-glow {
position: absolute; width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168,85,247,.25) 0%, transparent 70%);
top: 50%; left: 50%; transform: translate(-50%,-50%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);} }
.badge {
display: inline-block; background: rgba(168,85,247,.15);
border: 1px solid rgba(168,85,247,.4);
color: var(--purple); border-radius: 50px;
padding: 6px 18px; font-size: .8rem; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px;
animation: fadeDown .6s ease both;
}
h1 {
font-size: clamp(2rem, 6vw, 4rem); font-weight: 900;
line-height: 1.1; margin-bottom: 20px;
animation: fadeDown .8s ease both .1s;
}
.gradient-text {
background: var(--grad); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
font-size: 1.15rem; color: var(--muted); max-width: 540px;
margin-bottom: 36px; animation: fadeDown .8s ease both .2s;
}
.hero-cmd {
font-family: 'Fira Code', monospace;
background: rgba(255,255,255,0.07);
border: 1px solid var(--border);
border-radius: 12px; padding: 16px 32px;
font-size: clamp(1rem, 3vw, 1.5rem);
letter-spacing: 1px; color: #fff;
animation: fadeDown .8s ease both .3s;
position: relative; cursor: pointer;
transition: background .2s, transform .15s;
}
.hero-cmd:hover { background: rgba(168,85,247,.12); transform: scale(1.02); }
.hero-cmd .copy-hint {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-size: .7rem; color: var(--muted); font-family: 'Inter', sans-serif;
}
.scroll-cue {
margin-top: 56px; animation: bounce 2s infinite;
color: var(--muted); font-size: 1.5rem;
}
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(10px);} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* SECTIONS */
section {
max-width: 860px; margin: 0 auto; padding: 80px 24px;
}
.section-label {
font-size: .75rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--purple); margin-bottom: 8px;
}
h2 {
font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800;
margin-bottom: 24px; line-height: 1.2;
}
p { color: var(--muted); margin-bottom: 16px; }
p strong { color: var(--text); }
/* CARDS */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 28px; margin-bottom: 16px;
backdrop-filter: blur(8px);
transition: border-color .2s, transform .2s;
}
.card:hover { border-color: rgba(168,85,247,.4); transform: translateY(-2px); }
.card-icon { font-size: 2rem; margin-bottom: 10px; }
.card-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* STEPS */
.steps { counter-reset: step; }
.step {
display: flex; gap: 20px; align-items: flex-start;
padding: 20px 0; border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step-num {
counter-increment: step;
min-width: 40px; height: 40px; border-radius: 50%;
background: var(--grad); display: flex; align-items: center;
justify-content: center; font-weight: 900; font-size: .9rem;
flex-shrink: 0;
}
.step-body .step-title { font-weight: 700; color: var(--text); margin-bottom: 4px; }
/* CODE BLOCK */
.code-block {
background: #1a1a2e;
border: 1px solid var(--border);
border-radius: 12px; overflow: hidden; margin: 20px 0;
}
.code-header {
background: rgba(255,255,255,0.04);
border-bottom: 1px solid var(--border);
padding: 10px 18px;
display: flex; justify-content: space-between; align-items: center;
font-size: .8rem; color: var(--muted);
}
.copy-btn {
background: rgba(168,85,247,.15); border: 1px solid rgba(168,85,247,.3);
color: var(--purple); border-radius: 6px; padding: 4px 12px;
font-size: .75rem; cursor: pointer; font-family: 'Inter', sans-serif;
transition: background .2s;
}
.copy-btn:hover { background: rgba(168,85,247,.3); }
.copy-btn.copied { color: var(--green); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.1); }
pre {
padding: 20px 24px; overflow-x: auto; font-family: 'Fira Code', monospace;
font-size: .92rem; line-height: 1.8;
}
.tok-cmd { color: #a5f3fc; }
.tok-arg { color: #c4b5fd; }
.tok-val { color: #86efac; }
.tok-comment { color: #64748b; font-style: italic; }
/* ANNOTATION */
.annotation-wrap { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.ann {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 16px; flex: 1; min-width: 140px;
text-align: center;
}
.ann .ann-word {
font-family: 'Fira Code', monospace; font-size: 1rem;
font-weight: 700; margin-bottom: 6px;
}
.ann .ann-desc { font-size: .8rem; color: var(--muted); }
.w1 .ann-word { color: #a5f3fc; }
.w2 .ann-word { color: #c4b5fd; }
.w3 .ann-word { color: #fbbf24; }
.w4 .ann-word { color: #86efac; }
/* TABS */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
background: var(--surface); border: 1px solid var(--border);
color: var(--muted); border-radius: 8px; padding: 8px 18px;
cursor: pointer; font-size: .85rem; font-weight: 600;
font-family: 'Inter', sans-serif; transition: all .2s;
}
.tab-btn.active { background: rgba(168,85,247,.2); border-color: var(--purple); color: var(--purple); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* MISTAKES */
.mistake-card {
background: rgba(239,68,68,.07);
border: 1px solid rgba(239,68,68,.25);
border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px;
}
.mistake-card .mistake-title { color: #f87171; font-weight: 700; margin-bottom: 6px; }
.fix { color: var(--green); font-size: .88rem; margin-top: 8px; }
/* PRO TIPS */
.tip-card {
background: rgba(34,197,94,.06);
border: 1px solid rgba(34,197,94,.2);
border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px;
display: flex; gap: 16px; align-items: flex-start;
}
.tip-icon { font-size: 1.5rem; flex-shrink: 0; }
.tip-body .tip-title { color: var(--green); font-weight: 700; margin-bottom: 4px; }
/* ACCORDION */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.acc-header {
padding: 18px 24px; cursor: pointer; display: flex;
justify-content: space-between; align-items: center;
background: var(--surface); font-weight: 600; user-select: none;
transition: background .2s;
}
.acc-header:hover { background: rgba(255,255,255,.07); }
.acc-arrow { transition: transform .3s; font-size: 1.1rem; }
.acc-header.open .acc-arrow { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 24px; background: rgba(0,0,0,.2); }
.acc-body.open { max-height: 500px; padding: 20px 24px; }
/* QUIZ */
.quiz-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px; margin-bottom: 20px;
}
.quiz-q { font-weight: 700; font-size: 1.05rem; margin-bottom: 18px; color: var(--text); }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
background: rgba(255,255,255,.04); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 18px; cursor: pointer;
font-family: 'Inter', sans-serif; color: var(--text);
text-align: left; font-size: .95rem; transition: all .2s;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--purple); background: rgba(168,85,247,.1); }
.quiz-opt.correct { border-color: var(--green); background: rgba(34,197,94,.12); color: var(--green); }
.quiz-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.1); color: #f87171; }
.quiz-feedback { margin-top: 14px; font-weight: 600; font-size: .95rem; min-height: 24px; }
.quiz-score {
text-align: center; padding: 24px;
background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2);
border-radius: var(--radius); display: none;
}
.score-num { font-size: 3rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* SUMMARY */
.cheatsheet {
background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(59,130,246,.1));
border: 1px solid rgba(168,85,247,.3);
border-radius: 20px; padding: 32px;
}
.cs-row {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 0; border-bottom: 1px solid var(--border); gap: 12px;
flex-wrap: wrap;
}
.cs-row:last-child { border-bottom: none; }
.cs-label { color: var(--muted); font-size: .9rem; }
.cs-val { font-family: 'Fira Code', monospace; color: var(--text); font-size: .9rem; background: rgba(255,255,255,.05); padding: 4px 10px; border-radius: 6px; }
/* CONFETTI */
.confetti-piece {
position: fixed; width: 10px; height: 10px;
border-radius: 2px; pointer-events: none; z-index: 9999;
animation: confettiFall 1.5s ease forwards;
}
@keyframes confettiFall {
0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
100%{transform:translateY(100vh) rotate(720deg);opacity:0;}
}
/* FOOTER */
footer {
text-align: center; padding: 48px 24px;
border-top: 1px solid var(--border);
color: var(--muted); font-size: .85rem;
}
footer span { color: var(--purple); font-weight: 700; }
/* TOOLTIP */
[data-tooltip] { position: relative; cursor: help; border-bottom: 1px dashed var(--muted); }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
background: #1e1e3a; border: 1px solid var(--border);
color: var(--text); padding: 6px 12px; border-radius: 8px;
font-size: .78rem; white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .2s; z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }
/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(168,85,247,.4); border-radius: 3px; }
@media(max-width: 600px) {
nav { gap: 12px; padding: 8px 16px; font-size: .7rem; }
.annotation-wrap { flex-direction: column; }
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<nav>
<a href="#what">What</a>
<a href="#why">Why</a>
<a href="#how">How</a>
<a href="#demo">Demo</a>
<a href="#breakdown">Breakdown</a>
<a href="#mistakes">Mistakes</a>
<a href="#tips">Tips</a>
<a href="#quiz">Quiz</a>
<a href="#summary">Summary</a>
</nav>
<!-- HERO -->
<section id="hero">
<div class="hero-glow"></div>
<div class="badge">🎓 Interactive Tutorial</div>
<h1>Learn the command<br/><span class="gradient-text">git remote remove origin</span></h1>
<p class="hero-sub">Master Git remotes in minutes — beginner-friendly, hands-on, and actually fun. 🚀</p>
<div class="hero-cmd" id="hero-copy" title="Click to copy">
$ git remote remove origin
<span class="copy-hint">📋 click to copy</span>
</div>
<div class="scroll-cue">↓</div>
</section>
<!-- WHAT IS IT -->
<section id="what" class="fade-in">
<p class="section-label">Section 01</p>
<h2>🤔 What Is It?</h2>
<p>Imagine Git as your local diary 📓 and a remote server (like GitHub) as a shared cloud folder ☁️. <strong>A remote</strong> is just a saved nickname pointing to that cloud URL, so you don't have to type a long address every time.</p>
<p>The nickname <strong>"origin"</strong> is the default name Git gives to the very first remote you connect to. It's just a name — it could be anything, but convention says <em>origin</em>.</p>
<p><code style="color:var(--purple);background:rgba(168,85,247,.1);padding:2px 8px;border-radius:6px;">git remote remove origin</code> <strong>deletes that saved nickname</strong> from your local Git config. It does <em>not</em> delete any commits, branches, or the actual remote repository. Think of it like removing a contact from your phone — the person still exists, you just removed their number. 📵</p>
</section>
<!-- WHY USE IT -->
<section id="why" class="fade-in">
<p class="section-label">Section 02</p>
<h2>💡 Why Would You Use It?</h2>
<div class="cards-grid">
<div class="card">
<div class="card-icon">🔄</div>
<div class="card-title">Switch to a new remote</div>
<p>You forked a repo and now want to point to your own fork instead of the original.</p>
</div>
<div class="card">
<div class="card-icon">🧹</div>
<div class="card-title">Clean up a project</div>
<p>You cloned a template to start fresh and need to detach it from the original source.</p>
</div>
<div class="card">
<div class="card-icon">🔒</div>
<div class="card-title">Security / privacy</div>
<p>You accidentally cloned a private repo and want to sever the link before sharing.</p>
</div>
<div class="card">
<div class="card-icon">🏗️</div>
<div class="card-title">Restructure workflows</div>
<p>Migrating from GitHub to GitLab (or Bitbucket) — remove old, add new.</p>
</div>
</div>
</section>
<!-- HOW DOES IT WORK -->
<section id="how" class="fade-in">
<p class="section-label">Section 03</p>
<h2>⚙️ How Does It Work?</h2>
<p>Behind the scenes, Git stores remote info in a file called <strong>.git/config</strong> inside your project folder. When you run the command, Git finds and removes the <code data-tooltip="A named block in .git/config for one remote">[remote "origin"]</code> section from that file. That's it!</p>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-body">
<div class="step-title">Git reads your local config</div>
<p>It opens <code>.git/config</code> and looks for a section matching the name <em>origin</em>.</p>
</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-body">
<div class="step-title">Matching entry is found</div>
<p>It finds <code>[remote "origin"]</code> with the URL and fetch settings.</p>
</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-body">
<div class="step-title">Entry is deleted</div>
<p>Git removes those lines. Your commits, files, and history remain untouched.</p>
</div>
</div>
<div class="step">
<div class="step-num">4</div>
<div class="step-body">
<div class="step-title">Tracking branches are cleaned up</div>
<p>Any local branches that were tracking <code>origin/main</code> lose their upstream reference, but the branches themselves survive.</p>
</div>
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section id="demo" class="fade-in">
<p class="section-label">Section 04</p>
<h2>🎮 Live Demo — Try It Here!</h2>
<p>Simulate a real Git session in your browser. Click the buttons to run commands and watch the remote list update.</p>
<div class="card" style="padding:0;overflow:hidden;">
<div style="background:#111827;padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;">
<span style="width:12px;height:12px;border-radius:50%;background:#ef4444;display:inline-block;"></span>
<span style="width:12px;height:12px;border-radius:50%;background:#f59e0b;display:inline-block;"></span>
<span style="width:12px;height:12px;border-radius:50%;background:#22c55e;display:inline-block;"></span>
<span style="color:var(--muted);font-size:.8rem;margin-left:8px;">Terminal Simulator</span>
</div>
<div id="terminal-output" style="font-family:'Fira Code',monospace;font-size:.88rem;padding:20px 24px;min-height:160px;background:#0f0f1e;line-height:2;">
<div style="color:#64748b;"># Welcome! Click a command below to run it.</div>
<div style="color:#64748b;"># Current remotes: <span id="remote-status" style="color:var(--green);">origin → https://github.com/old/repo.git</span></div>
</div>
<div style="padding:16px 24px;display:flex;gap:10px;flex-wrap:wrap;background:rgba(0,0,0,.2);">
<button class="tab-btn" onclick="demoRun('list')">git remote -v</button>
<button class="tab-btn" onclick="demoRun('remove')">git remote remove origin</button>
<button class="tab-btn" onclick="demoRun('add')">git remote add origin <new-url></button>
<button class="tab-btn" onclick="demoRun('reset')" style="margin-left:auto;">🔄 Reset</button>
</div>
</div>
</section>
<!-- CODE BREAKDOWN -->
<section id="breakdown" class="fade-in">
<p class="section-label">Section 05</p>
<h2>🔍 Code Breakdown</h2>
<p>Let's dissect every word of the command:</p>
<div class="code-block">
<div class="code-header">
<span>bash</span>
<button class="copy-btn" onclick="copyCode(this, 'git remote remove origin')">Copy</button>
</div>
<pre><span class="tok-cmd">git</span> <span class="tok-arg">remote</span> <span class="tok-arg">remove</span> <span class="tok-val">origin</span> <span class="tok-comment"># removes the remote named "origin"</span></pre>
</div>
<div class="annotation-wrap">
<div class="ann w1"><div class="ann-word">git</div><div class="ann-desc">The Git CLI tool. Every Git command starts here.</div></div>
<div class="ann w2"><div class="ann-word">remote</div><div class="ann-desc">Sub-command to manage remote connections.</div></div>
<div class="ann w3"><div class="ann-word">remove</div><div class="ann-desc">The action — delete a remote entry.</div></div>
<div class="ann w4"><div class="ann-word">origin</div><div class="ann-desc">The name of the remote to remove (customizable).</div></div>
</div>
<p style="margin-top:20px;">Want to see related commands? Explore the tabs:</p>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(this,'t1')">List Remotes</button>
<button class="tab-btn" onclick="switchTab(this,'t2')">Add Remote</button>
<button class="tab-btn" onclick="switchTab(this,'t3')">Rename Remote</button>
<button class="tab-btn" onclick="switchTab(this,'t4')">Change URL</button>
</div>
<div id="t1" class="tab-panel active">
<div class="code-block">
<div class="code-header"><span>See all saved remotes</span><button class="copy-btn" onclick="copyCode(this,'git remote -v')">Copy</button></div>
<pre><span class="tok-cmd">git</span> <span class="tok-arg">remote</span> <span class="tok-val">-v</span></pre>
</div>
</div>
<div id="t2" class="tab-panel">
<div class="code-block">
<div class="code-header"><span>Add a new remote</span><button class="copy-btn" onclick="copyCode(this,'git remote add origin https://github.com/you/repo.git')">Copy</button></div>
<pre><span class="tok-cmd">git</span> <span class="tok-arg">remote</span> <span class="tok-arg">add</span> <span class="tok-val">origin</span> https://github.com/you/repo.git</pre>
</div>
</div>
<div id="t3" class="tab-panel">
<div class="code-block">
<div class="code-header"><span>Rename a remote</span><button class="copy-btn" onclick="copyCode(this,'git remote rename origin upstream')">Copy</button></div>
<pre><span class="tok-cmd">git</span> <span class="tok-arg">remote</span> <span class="tok-arg">rename</span> <span class="tok-val">origin</span> upstream</pre>
</div>
</div>
<div id="t4" class="tab-panel">
<div class="code-block">
<div class="code-header"><span>Update URL without removing</span><button class="copy-btn" onclick="copyCode(this,'git remote set-url origin https://github.com/you/new-repo.git')">Copy</button></div>
<pre><span class="tok-cmd">git</span> <span class="tok-arg">remote</span> <span class="tok-arg">set-url</span> <span class="tok-val">origin</span> https://github.com/you/new-repo.git</pre>
</div>
</div>
</section>
<!-- COMMON MISTAKES -->
<section id="mistakes" class="fade-in">
<p class="section-label">Section 06</p>
<h2>⚠️ Common Mistakes</h2>
<div class="accordion">
<div class="acc-header" onclick="toggleAcc(this)">
❌ Thinking it deletes the remote repo <span class="acc-arrow">▾</span>
</div>
<div class="acc-body">
<p>This command only removes the <strong>local reference</strong>. Your GitHub/GitLab repository is completely untouched. Nobody loses any code.</p>
</div>
</div>
<div class="mistake-card">
<div class="mistake-title">❌ Trying to remove a non-existent remote</div>
<p style="color:var(--muted);">If you type a name that doesn't exist, Git will error: <code style="color:#f87171;">error: No such remote 'origni'</code></p>
<div class="fix">✅ Fix: Run <code>git remote -v</code> first to check the exact name before removing.</div>
</div>
<div class="mistake-card">
<div class="mistake-title">❌ Using <code>git remote delete</code> instead of <code>remove</code></div>
<p style="color:var(--muted);">There is no <code>delete</code> sub-command. Git will throw an error.</p>
<div class="fix">✅ Fix: Always use <code>git remote remove <name></code>.</div>
</div>
<div class="mistake-card">
<div class="mistake-title">❌ Forgetting to add a new remote afterwards</div>
<p style="color:var(--muted);">After removing, <code>git push</code> will fail because there's nowhere to push to!</p>
<div class="fix">✅ Fix: Follow up with <code>git remote add origin <new-url></code>.</div>
</div>
</section>
<!-- PRO TIPS -->
<section id="tips" class="fade-in">
<p class="section-label">Section 07</p>
<h2>🌟 Pro Tips</h2>
<div class="tip-card">
<div class="tip-icon">🔄</div>
<div class="tip-body">
<div class="tip-title">Use set-url instead of remove+add</div>
<p>If you just want to change the URL (not the name), <code>git remote set-url origin <new-url></code> is faster and safer than removing and re-adding.</p>
</div>
</div>
<div class="tip-card">
<div class="tip-icon">🌿</div>
<div class="tip-body">
<div class="tip-title">Multiple remotes are valid and useful</div>
<p>You can have <code>origin</code> pointing to GitHub and <code>upstream</code> pointing to the original project you forked. Use <code>git remote add upstream <url></code> to add a second remote.</p>
</div>
</div>
<div class="tip-card">
<div class="tip-icon">🩹</div>
<div class="tip-body">
<div class="tip-title">Fix broken tracking after removal</div>
<p>After re-adding origin, set your branch's upstream with: <code>git branch --set-upstream-to=origin/main main</code>.</p>
</div>
</div>
<div class="tip-card">
<div class="tip-icon">🔎</div>
<div class="tip-body">
<div class="tip-title">Inspect .git/config directly</div>
<p>Open <code>.git/config</code> in any text editor to see (and manually edit) all remotes. Handy for power users!</p>
</div>
</div>
</section>
<!-- QUIZ -->
<section id="quiz" class="fade-in">
<p class="section-label">Section 08</p>
<h2>🧠 Practice Quiz</h2>
<p>Test your knowledge! 3 questions. You've got this! 💪</p>
<!-- Q1 -->
<div class="quiz-card" id="q1">
<div class="quiz-q">Q1. What does <code>git remote remove origin</code> actually delete?</div>
<div class="quiz-opts">
<button class="quiz-opt" onclick="answer(this,'q1',false)">A) All commits on the main branch</button>
<button class="quiz-opt" onclick="answer(this,'q1',false)">B) The entire GitHub repository</button>
<button class="quiz-opt" onclick="answer(this,'q1',true)">C) The local saved reference to the remote URL</button>
<button class="quiz-opt" onclick="answer(this,'q1',false)">D) Your SSH key configuration</button>
</div>
<div class="quiz-feedback" id="fb1"></div>
</div>
<!-- Q2 -->
<div class="quiz-card" id="q2">
<div class="quiz-q">Q2. Which command would you run to verify what remotes exist <em>before</em> removing one?</div>
<div class="quiz-opts">
<button class="quiz-opt" onclick="answer(this,'q2',false)">A) git status</button>
<button class="quiz-opt" onclick="answer(this,'q2',true)">B) git remote -v</button>
<button class="quiz-opt" onclick="answer(this,'q2',false)">C) git log --remotes</button>
<button class="quiz-opt" onclick="answer(this,'q2',false)">D) git branch -a</button>
</div>
<div class="quiz-feedback" id="fb2"></div>
</div>
<!-- Q3 -->
<div class="quiz-card" id="q3">
<div class="quiz-q">Q3. After removing origin, what must you do to be able to <code>git push</code> again?</div>
<div class="quiz-opts">
<button class="quiz-opt" onclick="answer(this,'q3',false)">A) Reinstall Git</button>
<button class="quiz-opt" onclick="answer(this,'q3',false)">B) Run git init again</button>
<button class="quiz-opt" onclick="answer(this,'q3',true)">C) Add a new remote with git remote add origin <url></button>
<button class="quiz-opt" onclick="answer(this,'q3',false)">D) Nothing, git push still works</button>
</div>
<div class="quiz-feedback" id="fb3"></div>
</div>
<div class="quiz-score" id="quiz-score">
<div style="font-size:2rem;margin-bottom:8px;">🎉</div>
<div class="score-num" id="score-num">0/3</div>
<p id="score-msg" style="margin-top:10px;"></p>
<button class="copy-btn" style="margin-top:16px;padding:10px 24px;font-size:.9rem;" onclick="resetQuiz()">Try Again 🔄</button>
</div>
</section>
<!-- SUMMARY -->
<section id="summary" class="fade-in">
<p class="section-label">Section 09</p>
<h2>📋 Quick Reference Cheat Sheet</h2>
<div class="cheatsheet">
<div class="cs-row">
<span class="cs-label">Command</span>
<span class="cs-val">git remote remove origin</span>
</div>
<div class="cs-row">
<span class="cs-label">What it does</span>
<span class="cs-val">Removes local remote reference "origin"</span>
</div>
<div class="cs-row">
<span class="cs-label">Affects remote repo?</span>
<span class="cs-val" style="color:var(--green);">❌ No — safe</span>
</div>
<div class="cs-row">
<span class="cs-label">Affects commits?</span>
<span class="cs-val" style="color:var(--green);">❌ No — safe</span>
</div>
<div class="cs-row">
<span class="cs-label">Config file changed</span>
<span class="cs-val">.git/config</span>
</div>
<div class="cs-row">
<span class="cs-label">List remotes first</span>
<span class="cs-val">git remote -v</span>
</div>
<div class="cs-row">
<span class="cs-label">Re-add remote</span>
<span class="cs-val">git remote add origin <url></span>
</div>
<div class="cs-row">
<span class="cs-label">Alias (old syntax)</span>
<span class="cs-val">git remote rm origin</span>
</div>
</div>
</section>
<footer>
<p>Made with ❤️ by <span>AI Prompt Dictionary</span> · git remote remove origin · Interactive Tutorial</p>
<p style="margin-top:8px;font-size:.75rem;">Remember: removing a remote is reversible — you can always add it back! 🌱</p>
</footer>
<script>
// PROGRESS BAR
window.addEventListener('scroll', () => {
const pct = (scrollY / (document.body.scrollHeight - innerHeight)) * 100;
document.getElementById('progress-bar').style.width = pct + '%';
});
// FADE-IN ON SCROLL
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.12 });
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
// HERO COPY
document.getElementById('hero-copy').addEventListener('click', () => {
navigator.clipboard.writeText('git remote remove origin');
const el = document.getElementById('hero-copy');
el.style.background = 'rgba(34,197,94,.15)';
el.querySelector('.copy-hint').textContent = '✅ copied!';
setTimeout(() => {
el.style.background = '';
el.querySelector('.copy-hint').textContent = '📋 click to copy';
}, 1800);
});
// COPY BUTTONS
function copyCode(btn, text) {
navigator.clipboard.writeText(text);
btn.textContent = '✅ Copied!';
btn.classList.add('copied');
setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 1800);
}
// TABS
function switchTab(btn, id) {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
document.getElementById(id).classList.add('active');
}
// ACCORDION
function toggleAcc(header) {
const body = header.nextElementSibling;
header.classList.toggle('open');
body.classList.toggle('open');
}
// TERMINAL DEMO
let remotes = { origin: 'https://github.com/old/repo.git' };
function demoRun(cmd) {
const out = document.getElementById('terminal-output');
const line = (txt, color='#e2e8f0') => `<div style="color:${color};">${txt}</div>`;
let html = out.innerHTML;
if (cmd === 'list') {
html += line('$ git remote -v', '#a5f3fc');
if (Object.keys(remotes).length === 0) {
html += line('(no remotes configured)', '#64748b');
} else {
for (const [name, url] of Object.entries(remotes)) {
html += line(`${name}\t${url} (fetch)`, '#86efac');
html += line(`${name}\t${url} (push)`, '#86efac');
}
}
} else if (cmd === 'remove') {
html += line('$ git remote remove origin', '#a5f3fc');
if (remotes.origin) {
delete remotes.origin;
html += line('✅ Remote "origin" removed.', '#22c55e');
} else {
html += line('error: No such remote \'origin\'', '#f87171');
}
} else if (cmd === 'add') {
html += line('$ git remote add origin https://github.com/you/new-repo.git', '#a5f3fc');
remotes.origin = 'https://github.com/you/new-repo.git';
html += line('✅ Remote "origin" added → https://github.com/you/new-repo.git', '#22c55e');
} else if (cmd === 'reset') {
remotes = { origin: 'https://github.com/old/repo.git' };
out.innerHTML = line('# Reset! Current remotes:', '#64748b') + line('origin → https://github.com/old/repo.git', '#22c55e');
return;
}
out.innerHTML = html;
out.scrollTop = out.scrollHeight;
}
// QUIZ
let answers = { q1: null, q2: null, q3: null };
let quizDone = false;
function answer(btn, qid, correct) {
if (answers[qid] !== null || quizDone) return;
answers[qid] = correct;
const opts = btn.parentElement.querySelectorAll('.quiz-opt');
opts.forEach(o => o.disabled = true);
const fb = document.getElementById('fb' + qid.slice(1));
if (correct) {
btn.classList.add('correct');
fb.textContent = '🎉 Correct! Great job!';
fb.style.color = 'var(--green)';
confetti();
} else {
btn.classList.add('wrong');
const rightBtn = Array.from(opts).find((_, i) => [true,true,true][0]);
opts.forEach(o => { if (o.onclick.toString().includes('true')) o.classList.add('correct'); });
fb.textContent = '❌ Not quite — the highlighted answer is correct.';
fb.style.color = '#f87171';
}
if (Object.values(answers).every(v => v !== null)) showScore();
}
function showScore() {
quizDone = true;
const score = Object.values(answers).filter(Boolean).length;
const el = document.getElementById('quiz-score');
el.style.display = 'block';
document.getElementById('score-num').textContent = score + '/3';
const msgs = ['Keep practicing! 💪', 'Good effort! Almost there! 🌱', 'Solid! One more try for perfection? ⭐', '🏆 Perfect score! You\'re a Git master!'];
document.getElementById('score-msg').textContent = msgs[score];
if (score === 3) { confetti(); setTimeout(confetti, 400); setTimeout(confetti, 800); }
}
function resetQuiz() {
answers = { q1: null, q2: null, q3: null };
quizDone = false;
document.getElementById('quiz-score').style.display = 'none';
document.querySelectorAll('.quiz-opt').forEach(o => {
o.disabled = false;
o.classList.remove('correct','wrong');
});
document.querySelectorAll('.quiz-feedback').forEach(f => f.textContent = '');
}
// CONFETTI
function confetti() {
const colors = ['#a855f7','#3b82f6','#22c55e','#facc15','#ec4899','#f97316'];
for (let i = 0; i < 30; i++) {
const el = document.createElement('div');
el.className = 'confetti-piece';
el.style.left = Math.random() * 100 + 'vw';
el.style.top = '-20px';
el.style.background = colors[Math.floor(Math.random() * colors.length)];
el.style.width = el.style.height = (8 + Math.random() * 10) + 'px';
el.style.animationDuration = (1 + Math.random() * 1.5) + 's';
el.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(el);
el.addEventListener('animationend', () => el.remove());
}
}
</script>
</body>
</html>
Live Preview