The visual way to master version control

Learn Git Visually, Not Memorization

Stop copy-pasting commands you don't understand. See commits, branches, merges, rebases, and pull requests come alive through interactive animations and real-world developer workflows.

14
Visual Lessons
40+
Commands
6
Simulators
0
Memorization
git log --graph
initreadmesetupfeat: uifeat: apihotfixmergereleasemain
  • git commit
  • branch
  • merge
  • rebase
  • pull request
  • cherry-pick
  • stash
  • HEAD
  • origin/main
  • fast-forward
  • squash
  • reflog
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)
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.

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

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.

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

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 folder.

Setup

$ git clone <url>

Copy a remote repository to your machine.

Setup

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

Set the author name for your commits.

Setup

$ git status

Show changed, staged, and untracked files.

Basics

$ git add <file>

Stage changes for the next commit.

Basics

$ git add .

Stage every change in the working directory.

Basics

$ git commit -m "msg"

Record staged changes as a new commit.

Basics

$ git log --oneline --graph

View commit history as a compact graph.

Inspect

$ git diff

Show unstaged changes line by line.

Inspect

$ git show <sha>

Inspect the contents of a specific commit.

Inspect

$ git blame <file>

See who last changed each line of a file.

Inspect

$ git branch <name>

Create a new branch from the current commit.

Branching

$ git switch <name>

Move HEAD to another branch.

Branching

$ git switch -c <name>

Create and switch to a new branch.

Branching

$ git merge <name>

Combine another branch into the current one.

Branching

$ git rebase <base>

Replay commits on top of another base.

Branching

$ git push origin <branch>

Upload local commits to the remote.

Remote

$ git pull

Fetch and merge changes from the remote.

Remote

$ git fetch

Download remote changes without merging.

Remote

$ git remote -v

List configured remote repositories.

Remote

$ git restore <file>

Discard changes in the working directory.

Undo

$ git restore --staged <file>

Unstage a file without losing changes.

Undo

$ git reset --hard <sha>

Reset branch and working tree to a commit.

Undo

$ git revert <sha>

Create a new commit that undoes another.

Undo
13 — Git Learning Roadmap

From first commit to Git mastery

A clear path through the platform. Work top to bottom and you'll 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
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.