Git/
Lesson

Git can feel like a black box, commands go in, something happens, but what exactly? The status and diffWhat is diff?A comparison showing exactly which lines were added, removed, or changed between two versions of code. commands pull back the curtain and show you exactly what Git sees. Master these, and you'll never be surprised by what gets committed.

Your most important command: git status

If you remember only one Git command, make it this one. git status tells you everything happening in your repositoryWhat is repository?A project folder tracked by Git that stores your files along with the complete history of every change, inside a hidden .git directory. right now:

git status

Decoding the output

Here's what you'll typically see:

On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   index.html
        new file:   utils.js

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
        modified:   style.css
        modified:   app.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        config.json
        notes.txt

Git organizes this into three sections:

  1. Changes to be committed (green): These are staged and ready to commitWhat is commit?A permanent snapshot of your staged changes saved in Git's history, identified by a unique hash and accompanied by a message describing what changed.
  2. Changes not staged (red): Modified files that won't be in the next commit
  3. Untracked files (red): New files Git doesn't know about yet
Pro tip
Git's output is actually helpful. Notice how it tells you exactly which commands to use for different actions, "use git restore --staged to unstage" or "use git add to include." When in doubt, read what Git is telling you.
02

Reading diffs like a pro

While git status tells you which files changed, git diff shows you how they changed. This is where you catch mistakes before they become permanent.

AI pitfall
When you paste AI-generated code into your project, always run git diff before committing. AI tools sometimes insert subtle changes, extra imports, modified configurations, or debug statements, that you didn't ask for. The diff is your safety net to catch unwanted changes before they're permanent.

Seeing unstaged changes

Run this to see what would be staged if you ran git add:

git diff

The output looks intimidating at first, but it's logical once you understand it:

diff --git a/app.js b/app.js
index 3f4a2b1..c7d8e9f 100644
--- a/app.js
+++ b/app.js
@@ -15,7 +15,8 @@ function calculateTotal(items) {
   let total = 0;
   for (const item of items) {
-    total += item.price;
+    const tax = item.price * 0.08;
+    total += item.price + tax;
   }
   return total;
 }

Let's break this down:

  • diff --git a/app.js b/app.js, we're comparing versions of app.js
  • --- a/app.js, the old version (what's currently committed or staged)
  • +++ b/app.js, the new version (what's in your working directory)
  • @@ -15,7 +15,8 @@, this chunk starts at line 15, shows 7 lines from the old version and 8 from the new
  • Lines starting with - were removed (old code)
  • Lines starting with + were added (new code)
  • Lines with no prefix stayed the same (context)
SymbolMeaningColor
-Line was removedRed
+Line was addedGreen
(no prefix)Unchanged contextWhite/Gray

Checking staged changes

Once you've staged changes with git add, git diff alone won't show them anymore. To see what's staged:

git diff --staged
# Or the older synonym:
git diff --cached

This compares your staging areaWhat is staging area?A holding zone in Git where you place changes you want to include in your next commit, letting you select exactly which modifications to save. against the last commitWhat is commit?A permanent snapshot of your staged changes saved in Git's history, identified by a unique hash and accompanied by a message describing what changed., in other words, it shows exactly what will be in your next commit.

Checking specific files

Sometimes you only care about one file:

# See unstaged changes in a specific file
git diff src/components/Button.tsx

# See staged changes in a specific file
git diff --staged src/components/Button.tsx
03

The shortcut: short status

When you just need a quick overview, use the short format:

git status -s
M README.md          ← Modified but not staged
M  index.html         ← Modified and staged
A  new-feature.js     ← Added (new file staged)
D  old-file.txt       ← Deleted and staged
?? untracked.js       ← Untracked (Git doesn't know about it)

The two-letter codes tell the story:

Left columnRight columnMeaning
(empty)MModified in working directory
M(empty)Modified and staged
A(empty)Added (new file staged)
D(empty)Deleted and staged
????Untracked file
Power user tip
Combine short status with branch info: git status -sb. The -b flag adds the current branch and upstream tracking info in a compact format. Many developers alias this to gs for lightning-fast status checks.
04

When to check what

Here's your decision tree:

Before staging:

git status        # See what's changed
git diff          # Review the actual changes

After staging, before committing:

git status        # Verify what's staged
git diff --staged # Review exactly what will be committed

Checking your work:

git status -s     # Quick "what's going on" check
git log --oneline -5  # See recent commits for context

05

Your daily workflow

These commands form the backbone of your Git routine:

# 1. Start by checking what's happening
git status

# 2. Review your changes before staging
git diff

# 3. Stage the changes you want
git add src/components/

# 4. Review what's staged before committing
git diff --staged

# 5. Commit if everything looks good
git commit -m "Add user profile component"

# 6. Verify the clean state
git status

Getting into the habit of checking before you commitWhat is commit?A permanent snapshot of your staged changes saved in Git's history, identified by a unique hash and accompanied by a message describing what changed. will save you countless headaches. That thirty seconds reviewing your diffWhat is diff?A comparison showing exactly which lines were added, removed, or changed between two versions of code. is how you catch the debugging console.log you forgot to remove, or the typo in your commit message. Your teammates will appreciate your clean commits, and your future self will too.

06

Quick reference

CommandWhat it doesWhen to use it
git statusOverview of repo stateBefore and after every operation
git status -sCompact one-line statusQuick check
git status -sbCompact with branch infoQuick check with context
git diffShow unstaged changesBefore staging
git diff --stagedShow staged changesBefore committing
git diff fileShow changes in one fileFocused review
javascript
# Check current status
git status

# See unstaged changes
git diff

# See staged changes
git diff --staged

# Short status format
git status -s