Create and edit code files, add their changes to Git's staging area, and commit them onto pages of the scrapbook.
Welcome to Level 3. Back to the scrapbook: in this level you will pick and choose mementos and add them into the binder you created in Level 2. But first, you need some mementos. In our analogy a memento is a code file, so you will start by creating a new file with some code in it.
This is the longest level in the journey, and the most important one. Everything after it builds on what happens here.
You can use any programming language you like. To keep things simple, you write a Python file called hello.py with a single line in it:
print("Hello world!")
There it is, sitting on your table next to the empty binder. Your very first memento. It is labelled new because Git has never seen it, and that is what the next command is about.
Imagine a big wall behind your table, split into three columns: Untracked files, Modified files and Staged files. Every file you touch will show up in one of those columns, and git-sim draws the same three columns under its graph.
Untracked files are files Git does not know about yet. They are mementos you have not stuck in the scrapbook. Your hello.py is one of them right now: you created it, but you have not told Git about it.
To add hello.py to the scrapbook, you first tell Git to track it. This is called staging your file changes.
Think of the staging area as a designated space on your tabletop, a mat where you arrange your mementos before you stick them into the book. Git also calls it the index. Nothing on the mat is in the book yet. It is a plan for the next page.
You stage file changes with git add:
git add <filename>
For your memento, that is:
git add hello.pyKeep your eye on the wall under the graph. hello.py jumps from Untracked files to Staged files. In the scrapbook, it moved from the loose pile onto the mat.
That is what your table looks like now. The memento is arranged in the staging area, and Git knows it is coming. The binder is still empty.
Next up: take the mementos in your staging area and stick them onto a page in the scrapbook. This is called committing your staged changes, also known as making a commit.
Making a commit is like inserting a finished page of mementos into the scrapbook. In other words, a commit stores your finalized code changes so your repository has a record of them.
git commit -m "Initial commit"This is a big moment. You just made your very first commit, which means your scrapbook has its first page. Since it is the first commit in this repository, it is called the initial commit. Mic drop.
Here is that page in the scrapbook. Your memento is stuck on it, and along the bottom is a stamp: the commit ID, and who added the page.
Every commit gets its own unique ID, generated by Git. Technically the full ID is 40 characters long, but the first six or seven are usually enough to tell commits apart. Hover the commit on the graph and you will see the same stamp: the full ID, the author, the date, and the message you wrote.
You might be wondering about the two labels sitting on top of your commit, on the graph and in the picture.
The green one is a Git branch. See how it says main? That is the default branch name you set with git config back in Level 2. In the scrapbook it is a section marker standing up from the page. We will dive deeper into branches in Level 7.
The blue one is Git's HEAD pointer, usually just called HEAD. In the scrapbook it is a bookmark clipped onto the page the book is open to. For now, just remember the name. HEAD can be a bit of a head-scratcher, so it gets a level of its own later on.
To witness the true power of pages, you need more than one. You write another Python file, brew.py, with a slightly different print statement:
print("Sip coffee")
Like hello.py before it, brew.py shows up as a new, untracked memento on the table. It exists, but it has not been added to a page.
Just like you told Git about hello.py with git add, you do the same for brew.py:
git add brew.pyWatch it jump to the Staged files column. Sweet. Your second memento is arranged in the staging area. Time to commit this little rascal.
Time to commit this little rascal onto a page of its own:
git commit -m "Create brew.py"Two commits down. A second page has been added to your scrapbook. Be-LEAF me when I say there are infinitely more commits waiting for you.
Now that you have two, you can see how commits connect. The new commit sits at the front, on the left, where Git always puts the newest one, and your first commit moved behind it. An arrow points from the second commit back to the first.
Just like you and me, every commit except the very first has a parent. The arrow is that link. The first commit has no parents, because it started it all.
Notice the first page's stamp has not changed. Each commit keeps its ID forever, so you can always refer to a specific moment in your project's history. And by following the arrows from page to page, you trace the full story. That connected chain is what your main branch really is: more than a silly green marker, a chain of linked pages. Also notice the marker and the HEAD clip both jumped to the new page. Whenever you commit, Git moves them to the new commit.
You have learned how to add new files to your repository. But what happens when you modify a file that is already being tracked? You are in for a TREE-t.
You edit hello.py so it prints Hello chunky universe! instead. It shows up in the middle column of the wall: Modified files. A modified file is a memento you previously stuck in the scrapbook that you have since changed. In the picture it carries a little pencil badge.
git status reports what is on your table: new files, changed files, staged files. It reads and never changes anything, which makes it the safest command in Git. (Level 4 is all about it.)
git statusgit-sim shows the difference between the last committed version and the version you just edited: a red line for the text you removed and a green line for the text you added. You may be thinking: "But I didn't delete any line!" True. You changed a line, and the way Git sees it, changing a line is the same as deleting a line and adding a new one in its place. Git has a name for this set of differences: a diff.
The edit to hello.py should become your third page. What comes first?
Since you are here, a little rant about staged files. The staging area is where you gather the changes you want in your next commit. Maybe you and a team are working on a big project, and you have some changes that are finished and others that are not ready to share.
By staging only the finished ones, you can commit and share those without touching the messy stuff you are still working on. The mat is a filter between your table and the book.
The staged change becomes your third page:
git commit -m "Update hello.py"Nice. You are clearly COMMIT-ted. Your main branch now has three pages, and once again both the marker and HEAD moved forward to stay on the newest one.
In case you are wondering, the -m flag lets you write the commit message right in the command. A commit message is a short description that explains what the commit does. Clear, concise messages keep a readable history and make it easy for you and your teammates to understand what each change was for. Trust me, your team will love you for this.
Here is the whole book so far. The newest page is at the front, the earlier two trail behind it, and each page points back to its parent with an arrow. This connected chain of changes is called Git's commit history, or the commit graph.
Wow, this has been a long level. To sum it up: the first commit added hello.py, the second added brew.py, and the third updated hello.py. It might feel like a lot all at once. These abstract ideas get clearer and clearer as you go.
The graph appears here when the first command runs. The simulations are drawn by git-sim from a real repository.
The scrapbook picture appears as the story is told.
Level 3 complete
🎉 New rank unlocked
You made three commits: one added hello.py, one added brew.py, one updated hello.py. Untracked files are brand new to Git, modified files are tracked files with changes, and staged files are ready to commit. Commits have IDs and messages that explain what each one does. The green branch marker and the blue HEAD are labels that point to commits, and they move to each new commit you make. Next: a breather.
Get new levels and walkthroughs
New lessons and command walkthroughs, plus a Git trick or two. Your progress stays saved in this browser either way.
Free: the Git essentials cheat sheet
The 16 Git commands you'll use most, each with a picture of what it does to your repo, drawn by git-sim, on one printable sheet. Or pick your own 16. We'll email it to you, along with new levels and walkthroughs.