LearnGit
The visual way to master version control

Learn Git Visually, Not Memorization

Master Git with 30 visualizers and playgrounds including branch workflows, file exploration, and merge simulation. Learn through 6 interactive modules, practice challenges, real-world scenarios, and hands-on playgrounds. Track your progress, unlock achievements, and master Git through visual learning—no memorization required.

Start Learning Interactive Playground Git Cheat Sheet
30
Visualizers & Playgrounds
3
Advanced Playgrounds
40
Learning Sections
100+
Git Commands
git log --graph
initreadmesetupfeat: uifeat: apihotfixmergereleasemain
01 — What is Git?

A version control system for your code

Git is a distributed version control system that records every change to your project. Think of it as an unlimited, branching undo history that an entire team can share.

Snapshots, not diffs

Every commit is a full snapshot of your project at a moment in time, stamped with a unique ID.

A complete time machine

Move backward and forward through your history, compare versions, and recover anything.

Built for many hands

Hundreds of developers can work on the same codebase without overwriting each other.

Distributed & safe

Every clone is a full backup. Your history lives on every machine, not one fragile server.

02 — Why Developers Use Git

The skill that defines modern engineering

Git is not optional for professional developers. It is the connective tissue of every team, every release, and every open-source project on the planet.

01

Never lose work again

Commit early and often. Every saved state is recoverable, so experimenting feels safe instead of scary.

02

Collaborate without chaos

Branches let teammates build features in parallel, then merge them together cleanly.

03

Understand the why

Commit messages and blame turn your history into documentation of every decision.

04

Ship with confidence

Review changes, run checks, and roll back instantly if something breaks in production.

05

The industry standard

From solo projects to billion-line monorepos, Git is the tool nearly every developer uses.

06

Open source ready

Forks and pull requests are how the world contributes to projects together.

03 — Git Architecture

Where your code actually lives

A change travels through four places. Tap any stage to see how it moves and which command pushes it forward.

Staging Area

A draft of your next commit. You hand-pick exactly which changes will be recorded together.

Command

$ git add <file>

Move a change from working directory to staging.

04 — Commit Lifecycle Animation

Watch a change become a commit

Follow a single file as it travels from your editor all the way to the remote. Press play, or step through it yourself.

app.tsx
01

Edit

Working Directory

02

Stage

Staging Area

03

Commit

Local Repository

04

Push

Remote Repository

Edit

You change a file. Git sees it as "modified" but is not tracking it for the next commit yet.

Run

$ vim app.tsx

05 — Branch & Merge Visualizer

Build your own commit graph

Branches are cheap, movable pointers. Click the buttons to commit, branch off, and merge — and watch the graph grow in real time.

commit graph main feature
c0c1main

Command history

$ git init$ git commit (x2)

Live Branch Switcher

Create, switch, and manage branches in real-time. See exactly how Git tracks your work.

Branches

* mainmain
2 commits: def5678
feature/auth
3 commits: ghi9012
feature/dashboard
2 commits: jkl3456

Create New Branch

$ git branch
* main
feature/auth
feature/dashboard

Current HEAD

main @ def5678

Staging Area Visualizer

Understand how git add moves files through the working directory → staging area → repository

Working Directory

index.js
styles.css
README.md
→

git add

Staging Area (Index)

Nothing staged yet

→

git commit

Create Commit

Commit History

● Initial commit
● Add styling

File Status Visualizer

Understand how Git tracks file changes through different states in the repository lifecycle.

main.ts
modified
utils.ts
untracked
config.json
modified
package.json
unmodified
Staged Files: 1
Untracked Files: 1
Modified Files: 1
$ git status
Changes to be committed: 1 file(s)
Changes not staged: 2 file(s)

Git Diff Visualizer

See exactly what changed between versions with visual diff highlighting.

--- a/greet.js
+++ b/greet.js
@@ -1,5 +1,5 @@
function greet(name) {
- console.log("Hello, " + name)
+ console.log(`Hello, ${name}!`)
- return true
+ return "Success"
}
$ git diff greet.js
2 insertions(+), 2 deletions(-)
06 — Rebase Simulator

Merge vs Rebase, side by side

Same starting point, two different outcomes. Flip between them to see exactly how each command reshapes your history.

ABCDXY

Branches have diverged

main moved on to C and D while you built X and Y on feature. Both branches share commit B as their common ancestor.

Advanced Rebase Simulator

Watch commits replay in real-time. See how rebase replays feature commits on top of main's latest.

Main Branch

m1
Initial setup
↓
m2
Add styles

Feature Branch

f1
Add button
f2
Update button

Activity Log

Ready to rebase feature onto main

Key Points:

  • Rebase replays commits one by one
  • Each commit gets a new hash
  • Clean, linear history
  • Never rebase shared commits!
07 — Merge Conflict Resolution

Conflicts aren't scary

A conflict just means two branches changed the same line. Git asks you to decide. Pick a resolution below and watch the markers disappear.

config.ts — conflict

// theme configuration

<<<<<<< HEAD (ours)

const theme = "dark"

=======

const theme = "light"

>>>>>>> feature (theirs)

export default theme

Choose a resolution

Merge Conflict Resolution

Learn how to identify and resolve merge conflicts step by step

Status: ⚠ 2 Conflicts

Conflict #1

<<<<<<< HEAD (current branch)
function greet() { return "Hello"; }
=======
function greet() { return "Hi there"; }
>>>>>>> incoming (feature/new)

Conflict #2

<<<<<<< HEAD (current branch)
const color = "blue";
=======
const color = "red";
>>>>>>> incoming (feature/new)

How to resolve manually:

  1. 1. Open the conflicted file in your editor
  2. 2. Look for conflict markers: <<<<<<<, =======, >>>>>>>
  3. 3. Decide which version to keep (or combine both)
  4. 4. Delete the conflict markers and unwanted code
  5. 5. Save the file
  6. 6. Run: git add . && git commit -m "message"

Live Merge Conflict Resolution

Real-time conflict resolution. Choose how to combine conflicting changes and watch the result.

CONFLICT: calculateTotal()
1function calculateTotal(items) {
2 let sum = 0;
!<<<<<<< HEAD (main branch)
4 items.forEach(item => sum += item.price * 1.1);
!=======
6 items.forEach(item => sum += item.amount);
!>>>>>>> feature/discount
8 return sum;
9}

Choose Resolution

Terminal Output

Attempting to merge feature/discount into main
CONFLICT in app.js: Merge conflict in calculateTotal function
08 — Branching Strategies

Git Flow vs GitHub Flow vs Trunk

There is no single right way to branch. Compare the three most common strategies and find the one that fits your team.

Branches

  • main
  • feature/*

Best for

Web apps that deploy continuously.

Pros

  • + Easy to learn
  • + Fast feedback via PRs
  • + main is always deployable

Trade-offs

  • − Less release structure
  • − Needs strong CI/CD
  • − Not ideal for versioned libs
09 — Git Internals Explained

It's just four kinds of objects

Under the hood Git is a tiny content-addressable database. Everything you do is built from blobs, trees, commits, and refs.

7d4e1f0

Commit — the snapshot

A commit points to one tree, its parent commit(s), and stores the author, message, and timestamp.

git cat-file -p 7d4e1f0

tree a1b2c3d
parent 3c5a9b1
author you <you@dev>

Add feature
10 — GitHub Collaboration

How the world ships code together

Pull requests turn solo commits into a team conversation. This is the exact loop used by open-source projects and engineering teams everywhere.

  1. 01

    Fork & clone

    Copy the project to your account, then clone it locally.

  2. 02

    Branch & push

    Create a feature branch, commit your work, and push it up.

  3. 03

    Open a PR

    Propose your changes with a clear title and description.

  4. 04

    Code review

    Maintainers comment, request changes, and approve.

  5. 05

    Merge & ship

    Once approved and green, your work merges into main.

Pull Request #142

Add dark mode toggle

+128 −123 commits2 reviewers
M

maintainer

Looks great! Can you add a test for the toggle?

Y

you

Done — added a test and updated the docs.

Approved — ready to merge

Code review etiquette

  • Keep PRs small and focused — easy to review, easy to merge.
  • Write a description that explains the why, not just the what.
  • Respond to feedback with commits, not arguments.

Your first contribution

Look for issues labeled good first issue. Fork, fix, and open a PR — maintainers love new contributors.

Remote Sync Playground

Visualize push, pull, and fetch operations between local and remote repositories

Local: main

A
B
C

Remote: origin/main

A
B

Event Log

Initialized repository

HEAD Pointer Tracker

Understand how HEAD pointer moves and detached HEAD state

Commit History

HEAD: main

HEAD points to main branch

History

→ Initialized with main branch

HEAD Pointer:

  • • Always points to the current commit you're on
  • • Usually points to a branch name (attached)
  • • Can point directly to a commit (detached)
  • • Moving to a branch moves HEAD to that branch's latest commit

Cherry-Pick Simulator

Copy specific commits from one branch to another

feature/button

main

a1b2c3d
Initial setup
e5f6g7h
Add header

History

→ Ready to cherry-pick commits

When to use cherry-pick:

  • • Copying bug fixes from one branch to another
  • • Selectively including features
  • • Avoiding merging unrelated changes
  • ⚠️ Use sparingly on shared branches (rewrites history)

Stash Manager

Temporarily save changes without committing them

Current Changes

app.js
Added console.log
styles.css
Updated colors

Stashed Changes (2)

Key Differences:

  • • Pop: Applies stash and removes it
  • • Apply: Applies stash but keeps it in the list
  • • Stashed changes are not part of any commit

Git Reset Visualizer

Understand the three modes of git reset: soft, mixed, and hard.

Reset Mode: --mixed
Moves HEAD and unstages. Changes remain in working directory.
git reset --mixed HEAD~1
Commit History:
abc123
Add feature
← Reset target
def456
Fix bug
ghi789
Initial commit
After Reset:
Staging Area
Empty
Working Directory
Changes preserved

Git Clone Visualizer

See what happens when you clone a remote repository to your local machine.

Remote Repository
github.com/user/repo
main
├── commit abc123
├── commit def456
└── commit ghi789
Local Machine
Clone not executed yet...
What Clone Does:
1. DownloadsComplete commit history from remote
2. Creates.git directory with all Git data
3. Checks outLatest version of default branch
4. Sets upRemote tracking branches (origin/main, etc)
$ git clone https://github.com/user/repo.git
Cloning into 'repo'...
remote: Counting objects: 100%
Receiving objects: 100%

Git Reflog Visualizer

Recover lost commits using the reference logs. Git never truly deletes your work!

Reference Log (Last 5 actions):
HEAD@{0}
abc123 commit: Add new feature
HEAD@{1}
def456 commit: Fix bug in login
HEAD@{2}
ghi789 reset: hard reset
HEAD@{3}
jkl012 checkout: switched to branch
HEAD@{4}
mno345 merge: Merge pull request
Why Reflog is Powerful:
• Records all HEAD movements (commits, checkouts, resets, merges)
• Entries expire after ~90 days by default
• Can recover commits from deleted branches
• Allows undoing destructive operations like hard reset
• Local to your repository - not shared with others
$ git reflog
HEAD@{0} abc123 commit: Add new feature
HEAD@{1} def456 commit: Fix bug in login
HEAD@{2} ghi789 reset: hard reset
HEAD@{3} jkl012 checkout: switched to branch
HEAD@{4} mno345 merge: Merge pull request

Git Tag Visualizer

Mark important commits with tags for releases and milestones.

Tags:
v1.0.0
release
abc123 • 2024-01-15
v0.9.0
release
def456 • 2024-01-10
beta-1
lightweight
ghi789 • 2024-01-05
Tag Types:
Lightweight Tag
Just a pointer to a commit. Simple and quick.
Annotated Tag
Full object with message, tagger, and date. Better for releases.
$ git tag v1.0.0
$ git tag -a v1.0.0 -m "Version 1.0.0 release"
$ git tag -l
v1.0.0
v0.9.0
beta-1

Git Bisect Visualizer

Use binary search to find the exact commit that introduced a bug.

How Bisect Works:
1. Mark good and bad commits as reference points
2. Bisect automatically selects middle commit to test
3. Mark as good or bad based on bug presence
4. Repeat until exact commit is found
$ git bisect start
$ git bisect bad HEAD
$ git bisect good v1.0
$ git bisect good / bad

.gitignore Visualizer

Control which files Git tracks with pattern matching rules.

.gitignore Patterns:
*.log
node_modules/
.env
dist/
*.tmp
Files in Repository:
main.js
✓ Tracked
debug.log
✗ Ignored (not tracked)
utils.js
✓ Tracked
.env
✗ Ignored (not tracked)
node_modules/
✗ Ignored (not tracked)
dist/app.js
✗ Ignored (not tracked)
Pattern Examples:
*.log → Ignore all .log files
node_modules/ → Ignore entire directory
.env → Ignore specific file
**/*.tmp → Ignore .tmp in any subdirectory
!important.log → Exception: don't ignore this
$ git status
On branch main
Untracked files:
main.js
utils.js
Advanced Git

Advanced Topics

Master advanced Git concepts for professional workflows

Git Hooks

Automate tasks by running scripts at key points in the Git workflow

Git hooks are scripts that run automatically when certain events occur in a Git repository. They allow you to enforce policies, improve code quality, and automate workflows.
Common hooks include: - pre-commit: Run before committing (e.g., lint checks) - post-commit: Run after commit - pre-push: Run before pushing to remote - post-merge: Run after merging branches
Key Points
  • •Located in .git/hooks/ directory
  • •Can be written in any language (shell, Python, etc.)
  • •Use case: Run tests before committing
  • •Use case: Format code automatically
  • •Share hooks by storing in version-controlled directory
Your Learning Journey

Progress Dashboard

Track your mastery of Git and earn achievements

Completion
0%

0 of 31 sections

Points
0

From challenges completed

Achievements
0

Badges unlocked

Last Studied
Never

Keep the streak going!

Learning Streaks

🔥
Current Streak
Keep studying every day!
🎯
Goal: Master All 31 Sections
31 sections remaining

Upcoming Achievements

👣
First Steps

Complete 3 sections

0/3
🏔️
Halfway There

Complete 15 sections

0/15
🎓
Master

Complete all 31 sections

0/31
🏆
Challenge Champion

Score 200+ points in challenges

0/200
Learning Paths

Interactive Tutorials

Step-by-step guided learning for common Git workflows

Test Your Knowledge

Practice Challenges

Quiz yourself on Git concepts with immediate feedback

Question 1 of 5
Score: 0 pts
beginner

What does `git add .` do?

Error Reference

Troubleshooting Guide

Common Git errors, their causes, and solutions

Cause

You are trying to use Git commands in a folder that is not initialized as a Git repository

Solution
  1. 1.Initialize Git in the current directory
  2. 2.Navigate to an existing Git repository folder
  3. 3.Check if you are in the correct directory using `pwd`
Command
$ git init
Prevention Tip

Always ensure you are in the correct project folder before running Git commands

Real-World Challenges

Scenario Missions

Learn Git through realistic developer scenarios

11 — Interactive Command Playground

Run Git without the risk

A safe sandbox terminal. Type real commands and watch how the repository responds — no setup, nothing to break.

bash — learngitno repo

Welcome to the LearnGit playground. Type 'help' to see commands.

Start with: git init

$

Try these

Advanced — Branch Workflow Playground

Master branching strategies

Create, switch, merge, and delete branches. Learn how teams collaborate using branching workflows.

Branch Manager

mainactive

Merge Operations

Create branches to merge them back to main

Main Branch Commits:

abc123 Initial commit

Terminal Output

Branch Workflow Playground Ready

Create branches, add commits, merge, and delete branches

Advanced — File Explorer Playground

Visualize file changes

Create files, edit content, stage changes, and commit. See exactly what happens to your repository.

Files

Select a file

Click a file to edit its content

Git Status

Commit History

Initial commit

fafcb91

Advanced — Merge Simulator Playground

Practice merge resolution

Simulate real merge scenarios. Start a merge, resolve conflicts, and complete the merge process.

main branch

Line 1: Welcome

Alice

Line 2: Main feature

Alice

Line 3: Conclusion

Alice

feature branch

Line 1: Welcome

Bob

Line 2: New feature

Bob

Line 3: Conclusion

Bob

merged result

Start merge to see result

Merge Steps

Terminal

Ready to simulate merge

12 — Complete Command Reference

Every command you'll actually use

Search, filter by category, and copy any command. This is your living cheat sheet.

$ git init

Create a new Git repository in the current directory.

Setup

$ git clone <url>

Copy a remote repository to your machine.

Setup

$ git config user.name "Name"

Set the author name for your commits (local).

Setup

$ git config user.email "email@example.com"

Set the author email for your commits (local).

Setup

$ git config --global user.name "Name"

Set the author name globally for all repositories.

Setup

$ git config --global user.email "email@example.com"

Set the author email globally for all repositories.

Setup

$ git config --global alias.st status

Create a custom command alias (e.g., git st as shorthand for git status).

Setup

$ git config --list

Show all configuration settings for this repository.

Setup

$ git status

Show changed, staged, and untracked files in the working directory.

Basics

$ git add <file>

Stage changes in a specific file for the next commit.

Staging

$ git add .

Stage every change in the working directory.

Staging

$ git add -p

Interactively choose which parts of a file to stage.

Staging
30 — Git Learning Roadmap

From first commit to Git mastery

A structured path through 27 interactive visualizers and 100+ Git commands. Work through each level to go from total beginner to confident contributor.

Stage 01

Foundations

  • Install & configure Git
  • init, clone, status
  • Staging & your first commit
  • Reading git log
Stage 02

Everyday Flow

  • Branches & switching
  • Merging branches
  • Pushing & pulling
  • Working with remotes
Stage 03

Collaboration

  • Pull requests
  • Code review etiquette
  • Resolving conflicts
  • Forks & open source
Stage 04

Mastery

  • Interactive rebase
  • Cherry-pick & reflog
  • Git internals & objects
  • Branching strategies
Developer Resources

Keep leveling up

Hand-picked references and tools to deepen your Git knowledge after the lessons.

Documentation

Git Official Docs

Complete reference for all Git commands, plumbing, guides, and workflows from git-scm.com.

Explore →Quick Reference

Git Cheat Sheet

Official Git cheat sheet with the most common commands, perfect for quick reference.

Explore →Book

Pro Git Book

The complete, free reference written by the Git community. Covers everything from basics to advanced topics.

Explore →Guide

Everyday Git

A curated list of useful Git commands for common workflows and scenarios.

Explore →Reference

Git Glossary

Definitions of all key Git concepts: commits, branches, HEAD, stash, rebasing, and more.

Explore →Guide

Git Hooks

Learn how to automate tasks with client-side and server-side Git hooks.

Explore →Guide

.gitignore

Master pattern-matching to exclude files from version control automatically.

Explore →Reference

Revisions

Reference syntax for specifying commits: branch names, tags, parents, ranges, and more.

Explore →Guide

Submodules

Learn to manage Git repositories within Git repositories.

Explore →Guide

Git Workflows

Explore common branching strategies: Git Flow, GitHub Flow, and trunk-based development.

Explore →Help

FAQ

Frequently asked questions about Git usage, configuration, and troubleshooting.

Explore →Tool

Interactive Sandbox

A safe scratch repository to practice without breaking anything.

Explore →
14 — Frequently Asked Questions

Questions, answered

The things developers ask most when they start learning Git the visual way.

No. Most developers use about 12 commands daily. LearnGit teaches you the mental model behind Git so the commands make sense — you reach for the right one because you understand what is happening, not because you memorized it.