Visual Git Tutorial

Learn Git with a live visual commit graph — see branches and commits update in real time

1

Create Your First Commit

Getting Started

In this tutorial, you’ll see a live visual Git graph that updates as you run Git commands. But first, let’s set up a repository.

Task

  1. Initialize a repo and create a file:
git init /tutorial
cd /tutorial
  1. The file hello.txt is already in the editor. Save it to the VM by pressing Ctrl+S, then stage and commit:
git add hello.txt
git commit -m "Initial commit"
  1. Click Test My Work to proceed.
Starter files
hello.txt
Hello, World!
This is my first file in a Git repository.
2

See Your Commit Graph

Your First Graph

Look at the Git Graph panel on the right! You can see your first commit as a node, with the main branch label pointing to it.

The graph shows:

  • Colored circles = commits (with abbreviated SHA hash)
  • Labels = branch names pointing to commits
  • HEAD = which branch you’re currently on

Task

Make two more commits so you can see the graph grow:

cd /tutorial
echo "Second line" >> hello.txt
git add hello.txt
git commit -m "Add second line"

echo "Third line" >> hello.txt
git add hello.txt
git commit -m "Add third line"

Watch the graph update after each commit! Click Refresh if needed.

3

Branching

Branches Are Just Pointers

A branch in Git is simply a lightweight pointer (a label) to a commit. Creating a branch doesn’t copy any files — it just adds a new label.

Task

Create a new branch and make a commit on it:

cd /tutorial
git branch feature
git checkout feature

Now make a change on the feature branch:

echo "Feature work" > feature.txt
git add feature.txt
git commit -m "Add feature"

Watch the graph — you’ll see two branches diverging from the same point, then the feature branch moving forward.

4

Edit Files on a Branch

Working on Your Branch

You’re currently on the feature branch. Let’s edit the feature file using the code editor.

Task

  1. Edit feature.txt in the editor to contain a more detailed feature description.
  2. Stage and commit your changes:
cd /tutorial
git add feature.txt
git commit -m "Improve feature description"
Starter files
feature.txt
Feature: User Authentication
- Login with email and password
- Session management
- Password reset flow
5

Merging Branches

Merging

Now let’s bring the feature work back into main. A merge creates a new merge commit that has two parents — one from each branch.

Task

Switch back to main and merge the feature branch:

cd /tutorial
git checkout main
git merge --no-ff feature -m "Merge feature into main"

The --no-ff flag forces Git to create a merge commit even when a fast-forward would be possible — without it, since main hasn’t moved since feature branched, Git would just slide the main pointer forward and no merge commit would appear.

Watch the graph — you’ll see a new commit with lines going back to both main and feature, visually showing the merge.

6

Multiple Branches

Parallel Development

Let’s create multiple branches to see how Git handles parallel work.

Task

Create two branches from main and make commits on each:

cd /tutorial
git checkout main
git branch bugfix
git branch docs

Work on the bugfix branch:

git checkout bugfix
echo "Bug fixed!" > bugfix.txt
git add bugfix.txt
git commit -m "Fix critical bug"

Work on the docs branch:

git checkout docs
echo "# Documentation" > README.md
git add README.md
git commit -m "Add documentation"

Now look at the graph — three branches diverging from main!