Learn Git Visually

An interactive guide to version control. No jargon, no memorizing commands — just clear mental models you can actually use.

01

What is Git

Git is a version control system — it tracks every change you make to your files and lets you go back to any previous state. Think of it as an infinite undo system for your entire project.

Interactive — Your project timeline

Each circle is a saved snapshot of your project. Click the button to save a new version.

Git doesn't auto-save. You choose exactly when to create a snapshot — and what to include in it. This is intentional: it gives you clean, meaningful history instead of noise.

Without Git, people email files like design_v3_FINAL_really_final.fig. With Git, you have a clean timeline you can navigate, branch, and share. Every change is attributed to a person. Nothing gets lost.

02

Repositories

A repository (repo) is just your project folder — with a hidden .git directory where Git stores all its tracking data.

Your project structure
▸ my-project/
● .git/ Git's brain
─ index.html
─ styles.css
▸ images/
─ logo.png
Inside .git/
Commit history
Branch pointers
Configuration
Staged changes
You never edit this directly.
# Create a new repository
git init

# Clone an existing one
git clone https://github.com/user/project.git

git init creates the .git folder. That's it — your directory is now a Git repo. Everything Git knows lives in there.

03

Commits

A commit is a snapshot of your project at a specific moment. It records what changed, who changed it, and when. Each commit has a unique ID (a hash).

Interactive — Build a commit

Stage files, write a message, and commit. This is the actual workflow.

Working Dir
M index.html
+ style.css
M app.js
Click to stage →
Staging Area
Nothing staged
Commit
# Stage specific files
git add index.html style.css

# Stage everything
git add .

# Commit with a message
git commit -m "Add navigation component"
The staging area is like a packing box. You choose exactly what goes in before sealing it (committing). You don't have to include everything — just the changes that belong together logically.
04

Branches

Branches let you work on different things in parallel without affecting the main codebase. Every repo starts with one branch, usually called main.

Interactive — Create branches

Click to create a branch. Each branch is an independent line of work.

# Create and switch to a new branch
git checkout -b feature/new-header

# Or the modern way
git switch -c feature/new-header

# List all branches
git branch

A branch is just a pointer to a commit — it's incredibly lightweight. Creating a branch doesn't copy any files. It just says "this is where I'm working from now."

05

Merging

Merging takes the changes from one branch and combines them into another. It creates a special "merge commit" that ties the two histories together.

Interactive — Merge demo

Watch what happens when a feature branch gets merged back into main.

# Switch to the branch you want to merge INTO
git checkout main

# Merge the feature branch
git merge feature/new-header
06

Rebasing

Rebase does the same thing as merge — combines work from two branches — but creates a cleaner, linear history. This is the key decision you'll face in Git.

⚡ Key concept — Merge vs Rebase

Toggle between merge and rebase to see the difference. Same changes, different history shape.

Merge preserves exact history — you can see exactly when branches diverged and came together. Creates a merge commit. History looks like a subway map.
When to Merge
  • • Shared/public branches
  • • When history matters
  • • Team collaboration
  • • Pull requests
When to Rebase
  • • Your own local branches
  • • Cleaning up before PR
  • • Linear history preference
  • • Keeping up with main
# Rebase your feature onto latest main
git checkout feature/new-header
git rebase main

# Golden rule: never rebase a branch others are working on
07

Push & Pull

Your commits are local until you explicitly share them. push sends your commits to a remote server. pull brings others' commits down to you.

Interactive — Local ↔ Remote sync

Remote (GitHub)

Shared repository

Local (Your machine)

Your working copy

# Push your commits to remote
git push origin main

# Pull remote changes
git pull origin main
08

Fetch vs Pull

Both get data from the remote, but they do different things with it. fetch is safe and non-destructive. pull is fetch + merge in one step.

Interactive — See the difference

Remote

origin/main

D
fetch

Tracking Refs

origin/main (local copy)

D

Working Files

Your local main

D
git fetch downloads new commits from the remote but puts them in a separate tracking reference. Your working files don't change. You can review before merging.
# Safe: download without changing anything
git fetch origin

# See what changed
git log origin/main --oneline

# Then merge when ready
git merge origin/main
09

Conflicts

Conflicts happen when two branches change the same lines. Git can't decide which version to keep — you have to choose. It's not an error, it's a question.

Interactive — Resolve a conflict

Both sides changed the same code. Click the version you want to keep for each conflicting line.

← main branch (theirs)
→ feature branch (yours)
Merged result
Select lines above to build the merged file...
10

Workflows

The "feature branch" workflow is the most common pattern. It keeps main clean and lets everyone work independently.

Feature branch workflow
1

Create a branch

Branch off from main for your feature or fix.

git switch -c feature/new-header
2

Make commits

Work on your feature, committing as you go. Small, focused commits.

git add . && git commit -m "Add header layout"
3

Push & open PR

Push to remote, open a pull request for review.

git push origin feature/new-header
4

Code review

Team reviews your changes. You address feedback with new commits.

5

Merge to main

Once approved, merge your branch. Delete it after — it's done its job.

git checkout main && git merge feature/new-header

This workflow scales from solo projects to teams of hundreds. The key principle: main is always deployable. All experimental work happens on branches.

11

Playground

Free sandbox. Create commits, branches, and merges. See how the graph evolves.

Commands

Current branch:
main
Ready. Start committing.