Version Control for Beginners

Git concepts explained visually — see how version control saves snapshots of your project. Practise creating save points, comparing versions, and rolling back to previous states.

Visual Git Timeline Rollback Practice Lab

Visual Git Timeline

Create commits (save points) with messages, click any node to view what changed, and roll back to a previous state. This is how version control works — every save is a snapshot you can return to.

1commits

3files tracked

Key insight: Version control is not just for teams — it is your personal safety net. Every commit is a snapshot you can return to if something breaks. Think of it as an unlimited undo history for your entire project. Even solo vibe coders should commit after every working state.

Rollback Practice Lab

Something broke! In each scenario, read the problem description and select the correct commit to roll back to. Identify which save point would fix the issue without losing too much work.

0 / 4 solved

How Branches Work

Branches let you experiment without affecting your main project. Click each branch to learn what it does and see how changes flow between them.

Click a branch in the diagram above to learn what it represents.

Previous Lesson Next: Testing Like a Professional

Hello World

My App

${i + 1}

- ${r}

+ ${a}

Scenario ${si + 1} ${s.title} ${solved ? '' : ''}

${s.problem}

Commit History — which commit caused the bug?

${s.commits.map((c, ci) => { let cls = 'commit-option'; if (solved && ci === s.correctIdx) cls += ' correct'; else if (selection !== undefined && selection === ci && !solved) cls += ' selected'; else if (selection !== undefined && selection === ci && solved) cls += ' wrong'; return `

#${c.hash} ${c.msg}

`; }).join('')}

${!solved && selection !== undefined ? `` : ''} ${solved ? `

${s.explanation}

` : ''}

`; // Main nodes [100,200,300,400,500,600].forEach(x => { html += ``; }); // Feature branch html += ``; [260,340,460].forEach(x => { html += ``; }); // Bugfix branch html += ``; [360,440].forEach(x => { html += ``; }); // Labels html += `main`; html += `feature/login`; html += `bugfix/nav`; svg.innerHTML = html; // Click handlers svg.querySelectorAll('[data-branch]').forEach(el => { el.addEventListener('click', () => { const name = el.dataset.branch; const b = branches.find(x => x.name === name); if (b) { document.getElementById('branch-info').innerHTML = `

${b.name}

${b.desc}

`; } }); }); } // ══════════════════════════════════════════ // INIT // ══════════════════════════════════════════ renderTimeline(); renderScenarios(); updateScenarioProgress(); renderBranchDiagram(); // ── Nav scroll ── const nav = document.getElementById('main-nav'); window.addEventListener('scroll', () => { nav.classList.toggle('nav-scrolled', window.scrollY > 30); }); // ── Mobile menu ── document.getElementById('mobile-toggle').addEventListener('click', () => { document.getElementById('mobile-menu').classList.toggle('hidden'); });