Git Visual Book

Watch Git work. Then never forget it.

An animated, interactive book that teaches Git & GitHub with living diagrams and sound — from your very first git init to interactive rebase and reflog rescues.

◉ Why this exists

Most people learn Git by memorizing magic words and praying. The commands only click when you can see what they do — a commit sliding from the staging area into history, a branch pointer gliding forward, a merge tying two rails together.

Git Visual Book turns every core Git concept into a short animated scene. Each lesson pairs plain-English reading with a living SVG diagram, copy-ready commands, and one practical tip a working developer would actually give you.

No framework. No build step. No CDN. No internet required. One HTML file you can open by double-clicking — on a laptop or a phone.

◉ What it looks like

add → commit → push — the core loop as moving pieces	Merge conflicts — the markers, the panic, the calm fix
git bisect — binary search hunting the bad commit	Fork & PR — the full open-source circuit
Worktrees — two desks, one repository	Tags & releases — pinning versions, shipping pages

◉ The curriculum — 28 lessons, 3 levels

🟢 Beginner · 8 lessons

Zero to your first push, with confidence.

#	Lesson	You walk away knowing
1	Git vs GitHub	The tool vs the website — and why they're different things
2	Install & First Config	user.name, user.email, init.defaultBranch main
3	Start a Repo	git init vs git clone, and why you never mix them
4	Add → Commit → Push	Working dir → staging → local repo → GitHub
5	Status & Log	Reading where you are and how you got there
6	.gitignore	Keeping secrets and junk out of history forever
7	Remove Git History	What deleting .git really does
8	GitHub Authentication	Personal access tokens and SSH keys

🟡 Intermediate · 10 lessons

Branching, team workflows, and undoing things safely.

#	Lesson	You walk away knowing
1	What a Branch Really Is	Branches are movable pointers, not copies
2	Merging Branches	Fast-forward vs merge commits
3	When Merges Collide	Conflict markers and the resolve loop
4	Reading Changes	diff, diff --staged, diff main..feature
5	Parking Unfinished Work	The stash stack
6	reset vs revert vs restore	The most-confused trio, untangled
7	Fixing the Last Commit	--amend and when it becomes dangerous
8	fetch, pull & Remote Branches	Tracking branches and -u
9	Fork & Pull Request Workflow	origin vs upstream, the open-source loop
10	Tags & Releases	Lightweight vs annotated, pushing tags

🔴 Professional · 10 lessons

History surgery, rescue operations, and power tools.

#	Lesson	You walk away knowing
1	Rebase vs Merge	Replaying commits and the golden rule
2	Interactive Rebase	pick / reword / squash / fixup / drop
3	Cherry-pick	Copying one commit across branches
4	Reflog Rescues	Why "lost" commits almost never are
5	Bisect	Binary-searching 1,000 commits in ~10 tests
6	Worktrees	Two working folders, one repository
7	One Folder, Different Repos	Multiple remotes from a single clone
8	Force Push, Done Safely	--force-with-lease and purging secrets
9	Blame & Pickaxe	git blame, git log -S, reading history
10	Hooks	Automatic gatekeepers in .git/hooks

◉ Getting started

The whole app is one file. Pick whichever you like:

# 1 — just open it
git clone https://github.com/anhafxd/git-visual-book.git
cd git-visual-book
open index.html          # macOS
start index.html         # Windows
xdg-open index.html      # Linux

# 2 — or serve it (identical result)
python3 -m http.server 8000
# → http://localhost:8000

Or deploy it in one minute with GitHub Pages: repo → Settings → Pages → deploy from the main branch. Done — index.html is picked up automatically.

Works fully offline. Google Fonts (Space Grotesk + JetBrains Mono) load when online and degrade gracefully to system fonts when not.

◉ Under the hood

Everything lives in a single self-contained index.html:

• Fluid design system — zero fixed pixel sizes in the layout; everything is clamp(), container queries, and viewport units, so it scales from a phone to a cinema display.
• SVG stage toolkit — a tiny hand-rolled animation library (schedule, moveGroup, drawCommitDot, typeLine, …) drives every scene inside one 720 × 440 viewBox. All timers are cancelable, so Replay is always clean.
• Web Audio sound engine — pops, whooshes, and success chords synthesized from raw oscillators; no audio files, and one click mutes it.
• Per-level progress — the rail, counter, and completion state track each level independently.
• Accessible by default — keyboard navigation (← →), focus rings, ARIA labels, and full prefers-reduced-motion support.

The palette

Color	Hex	Meaning
git orange	#f05033	Git commands & actions
stage gold	#f2c14e	Staged / in-between states
branch mint	#3fd68f	Committed / success / safe
remote sky	#5db1ff	Remote / GitHub
danger red	#ff6b6b	Destructive / conflict / blocked

◉ Contributing

Found a factual slip, a typo, or a scene that could teach better? PRs and issues are very welcome. A few ground rules that keep the project what it is:

1. One file stays one file. No build steps, no dependencies, no CDN scripts.
2. Modern commands first — git switch / git restore, with git checkout noted as the older form.
3. Scenes use the stage toolkit — schedule() for all timing (never raw setTimeout), animation classes on inner groups, everything inside the 720 × 440 viewBox.
4. Accuracy beats volume. Every claim should be true of current Git.

◉ Author

ANHAFXD

If this project helped Git finally click for you, a ⭐ on the repo helps others find it.

◉ License

Released under the MIT License — use it, fork it, teach with it.

_{Built with vanilla HTML, CSS, SVG, and the Web Audio API — nothing else.}