⏪ Lesson 3: History & Undo

🕰️ Introduction

In the last lesson you made your first commits. Each one is a save point for your whole website. Saving is only half the story, though. The reason save points exist is so you can go back: to check what you changed, to find when a bug crept in, or to undo something you regret.

This lesson is about exactly that. First you'll learn to look (what changed, and when). Then you'll learn to undo, choosing the gentlest tool that fixes the problem. Every command here is safe: nothing you learn today throws away a commit.

Here's the map from Lesson 1 again, now with the "look" and "undo" commands added. Each area has its own way of seeing and undoing changes:

🔍 Seeing Changes with git diff

git status tells you which files changed. git diff tells you which lines changed. It's the command to run just before you stage, so you know exactly what's about to go into your next commit.

Unstaged changes: git diff

Open css/style.css in VS Code, change your h1 color, and save. Then, in the integrated terminal:

git diff

You'll see something like this:

diff --git a/css/style.css b/css/style.css
index 136cefd..bbe85b5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,5 +4,5 @@ body {
 }

 h1 {
-    color: #1e3a8a;
+    color: #b91c1c;
 }

How to read a diff

• --- a/ and +++ b/ name the file: a is the old version, b is the new one.
• @@ -4,5 +4,5 @@ says where in the file this is (around line 4). You can mostly ignore it.
• Lines starting with - (usually red) were removed.
• Lines starting with + (usually green) were added.
• Lines with no sign are unchanged context, shown so you can tell where you are.

Notice that Git doesn't have a "changed" line. A changed line is shown as the old line removed and the new line added.

Staged changes: git diff --staged

Now stage the file and run git diff again:

git add css/style.css
git diff

Nothing prints! That surprises everybody the first time. Plain git diff only compares your working folder with the staging area, and those now match. To see what's staged (what your next commit will contain), add --staged:

git diff --staged

Now the same red/green diff appears again.

📜 Exploring Your History

You already know git log --oneline from Lesson 2. It lists your commits, newest first, each with a short hash (its ID) and its message. Here's Ada's history from Lesson 2, with two more small commits on top:

git log --oneline

0d2abf0 (HEAD -> main) Add a note about weekly photos
4c2960c Add photography to about page
3cfc1b8 Add hobbies section to About page
9cc816c Add site images
e56cc25 Add site stylesheet
a9a2faf Add home, about, and contact pages
9b951eb Add .gitignore for system files

Your hashes will be different. Every commit in the world gets its own. You never have to type the full 40-character hash; the short 7-character version works fine. You can also copy and paste it from the terminal instead of typing it.

What did that commit change? git show

Give git show a hash and it prints who made the commit, when, the message, and the diff:

git show 4c2960c

commit 4c2960c697f1acdd6b917765a52c6a03dce574d1
Author: Ada Lovelace <ada@example.com>
Date:   Sat Sep 26 12:42:34 2026 -0700

    Add photography to about page

diff --git a/about.html b/about.html
index c79a249..7fa5da4 100644
--- a/about.html
+++ b/about.html
@@ -5,6 +5,6 @@
 </head>
 <body>
     <h1>About Me</h1>
-    <p>I love hiking and baking bread.</p>
+    <p>I love hiking, baking bread, and photography.</p>
 </body>
 </html>

Run git show with no hash at all and you get the most recent commit.

Just one file's history: git log --oneline -- <file>

When you want to know "when did my About page change?", put the file name after --:

git log --oneline -- about.html

4c2960c Add photography to about page
3cfc1b8 Add hobbies section to About page
a9a2faf Add home, about, and contact pages

Commits that didn't touch about.html (like the stylesheet, the images, and the note on the home page) are left out. The -- means "everything after this is a file name," which avoids confusion if a file is ever named like a branch.

🔭 Visiting an Old Version

Sometimes you just want to read an old version of a page: "What did my About page say this morning?" You can do that without changing any files at all.

In the terminal: git show <hash>:<file>

Put a colon between the hash and the file's path:

git show a9a2faf:about.html

Git prints the whole file exactly as it was in that commit. Your working folder is untouched. For a file in a subfolder, include the folder, using forward slashes on every operating system:

git show e56cc25:css/style.css

In VS Code: the Timeline view

1. Open the file in the editor (for example, about.html).
2. In the Explorer sidebar, look near the bottom for a collapsed section called Timeline and click to expand it.
3. You'll see a list of that file's commits, with their messages. (It may also show local saves; those are VS Code's own file history, not Git commits.)
4. Click any commit to open a side-by-side comparison: the old version on the left, the version after that commit on the right.

Both methods are read-only. Look all you like; nothing changes until you decide to change it.

🪜 The Undo Ladder

There isn't one "undo" button in Git. There are several, and the right one depends on how far your mistake has traveled: is it just an edit in a file, is it staged, or is it already committed? Start at the bottom of the ladder and climb only as high as you need.

Good news: you don't have to memorize this. git status prints the right undo command as a hint, right under each heading. Read what it tells you!

Rung 1: Throw away an unstaged edit: git restore <file>

You edited a file, saved it, and hate the result. You haven't staged it. Run git status:

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   css/style.css

no changes added to commit (use "git add" and/or "git commit -a")

See the second hint? That's your undo:

git restore css/style.css

The file snaps back to how it was at your last commit. If VS Code has it open, the editor updates on its own.

Rung 2: Unstage a file: git restore --staged <file>

You ran git add . and staged something you didn't mean to commit yet. git status shows:

On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	modified:   css/style.css

Take it back out of the staging area:

git restore --staged css/style.css

This is completely safe. Your edit is still in the file; it's just no longer staged. Run git status and you'll see the file back under "Changes not staged for commit." (And if you now want to throw the edit away too, that's Rung 1.)

Rung 3: Fix the last commit: git commit --amend

You just committed and immediately spotted a problem. Two classic cases:

A typo or unclear commit message. Replace the message on your most recent commit:

git commit --amend -m "Add a note about weekly photos"

[main 0d2abf0] Add a note about weekly photos
 Date: Sat Sep 26 12:42:41 2026 -0700
 1 file changed, 1 insertion(+)

You forgot a file (or a last-second fix). Stage it, then amend with --no-edit to keep the same message:

git add index.html
git commit --amend --no-edit

The missing change is folded into the last commit, as if you'd included it all along.

Rung 4: Undo an older commit safely: git revert <hash>

Say you rewrote your About page, committed it, and now you want the old text back. Find the commit:

git log --oneline

e3f2c9b (HEAD -> main) Rewrite about page
0d2abf0 Add a note about weekly photos
4c2960c Add photography to about page
3cfc1b8 Add hobbies section to About page
...

Then revert it:

git revert e3f2c9b

Because you set VS Code as Git's editor in Lesson 1, a tab opens with a ready-made message: Revert "Rewrite about page", followed by This reverts commit e3f2c9b…. That message is fine as-is. Close the tab (save first if you edited it) and Git finishes the job. Now look at the log:

60efe82 (HEAD -> main) Revert "Rewrite about page"
e3f2c9b Rewrite about page
0d2abf0 Add a note about weekly photos
4c2960c Add photography to about page
3cfc1b8 Add hobbies section to About page
...

git revert doesn't erase anything. It adds a new commit that does the exact opposite of the old one. History stays honest ("I tried a rewrite, then undid it"), and it's always safe, even after you've pushed and shared your work. That's why it's the go-to undo for anything already committed.

The ladder at a glance

🖱️ Undo in VS Code

The first two rungs have buttons in VS Code's Source Control panel (the branching icon in the Activity Bar, or Ctrl+Shift+G / Cmd+Shift+G). Hover over a file to reveal its small icons:

• Under "Changes", the curved-arrow icon is Discard Changes. That's git restore <file>. VS Code asks you to confirm, because the edit will be gone.
• Under "Staged Changes", the − (minus) icon is Unstage Changes. That's git restore --staged <file>.
• Clicking a changed file opens a side-by-side diff, the visual version of git diff.

For amend, the … (More Actions) menu at the top of the panel has Commit → Commit (Amend). The menu layout moves around between VS Code versions, so if you can't find it, the terminal command always works.

Use whichever you like. The terminal and the buttons do exactly the same thing to the same repository, so you can mix them freely.

🚫 The Command We Won't Use Today

❓ Common Questions

🛠️ Hands-on Exercise

# Part A
git status
git diff
git restore index.html
git status

# Part B
git add .
git diff --staged
git restore --staged css/style.css
git status
# then: Source Control panel → hover style.css → Discard Changes

# Part C
git commit -am "Rewrite about page intro"
git log --oneline
git revert a1b2c3d          # use YOUR hash of the silly commit
git log --oneline
git show a1b2c3d:about.html # the silly version, still in history

f9e8d7c (HEAD -> main) Revert "Rewrite about page intro"
a1b2c3d Rewrite about page intro
...

📓 Learning Journal

Summary

📚 Additional Resources

• Pro Git — Undoing Things
• Pro Git — Viewing the Commit History
• git-restore documentation
• git-revert documentation
• Git Quick Reference (this site)

🚀 What's Next?

That wraps up Module 1: you can save, look back, and undo. After lunch, you'll learn Git's favorite feature: branches. A branch is a safe copy of your timeline where you can try a bold new color scheme without touching the working site, then merge it in when you like it. You'll even cause a merge conflict on purpose and fix it.