Learning on Web Dev Open is free for all.

Build First > Your machineGit, as a picture
Phase 00Your machine7 of 434

Git, as a picture

A commit is a snapshot with a parent. A branch is a sticky note. Play with the graph until both sentences feel obvious.

Concept18 minAI pair

Now you need a way to make changes to your code, upload it, save it and have an AI or human refer it as well anywhere on the planet

What is Git
local repositorygit enabled
githistory for your code
›src/app
›components/lesson.tsx
›README.mdmodified

terminal

$ git status

commit history

commit 1
pending
pending
See what changed before you save ityour project history
Git

Git tracks your changes

Git saves versions of your code on your computer. GitHub keeps that project online so you can back it up, share it and submit your work.

Create GitHub account

Use Git to save versions of your code. Use GitHub to keep that project online.

Understanding Git & Github

Git becomes much easier once you have a picture in your head. Keep it to two sentences: a commit is a snapshot of every file plus a pointer to the commit before it. A branch is a sticky note attached to one of those snapshots.

Your repositoryHEAD → main3/9
9e3779b3c6ef36daa66d1

Three commits on main. Click any one of them.

Click a node. A commit is not a list of changes. It is the whole project, frozen, with an arrow pointing at the one before it.

Press Undo (revert) and watch what happens to the commit you undo. It is the single most reassuring thing about Git, and it is easier to see than to explain.

Nine commits, two branches, simplified: a real repo has thousands of nodes and exactly this shape.

Commit, branch, merge, undo. Watch the sticky note move.

Play with the graph below. Commit a few times, make a branch and merge it. Watch where the sticky note moves each time. Seeing that movement makes the mental model much easier to understand.

Now press Undo. The important part is what does not happen: the commit you reverted is still sitting there in the graph. It is no longer on the branch tip, but nothing was deleted.

This is why experienced developers tend to be relaxed about Git. Once something is committed, it is very hard to lose. reflog can show you previous states of your repository, including ones you thought were gone. Knowing that safety net exists is more useful than memorising a long list of commands.

You need about six commands day to day: status, add, commit, push, pull, and checkout. You will learn them by using them, starting in the next chapter.

You should now be able to

  • Explain what a commit actually is
  • Describe what a branch points at
  • Recover from a mistake without deleting the folder
Ask the community

Loading…