⌨️ Git Basics: status, add, commit, diff, log

Git Basics: status, add, commit, diff: The staging area works exactly like a shopping cart that sits between the store shelves and the checkout counter: you can put things in the

The staging area works exactly like a shopping cart that sits between the store shelves and the checkout counter: you can put things in the cart, take them out, swap them — and the receipt is only printed when you actually check out. The "why" worth pausing on: if Git is going to take a snapshot anyway, why not just snapshot everything that changed in one step? Because a QA engineer who fixed a flaky test and unrelated whitespace in the same session wants two separate, reviewable commits — one that says "fix: stabilize login test" and another that says "style: trim trailing whitespace". Java analogy: this maps directly to the Builder pattern — you call setter methods (git add) to configure the object, then call build() (git commit) when the state is exactly right; nobody can see the half-built object from outside. Without this two-step model, CI pipelines receive commits that bundle unrelated changes, making bisect and rollback precision impossible when a flaky test suddenly appears.

Step 4: See Working Tree, Staging Area and Commit

Now that Git makes sense, watch how one change moves through the three local Git areas before it is shared.

git-interactive-terminal

Interactive Git Terminal

Type git status, add, commit, branch, switch commands and see Staging and Commit Graph update live.

Try It Yourself: First safe commit flow

Put the commands in the correct order before using a real terminal.

Check repository state first

Stage the relevant file

Create a commit with a meaningful message

Check whether the working tree is clean

git-remote-origin-setup

Step 5: Connect Local Repo to GitHub with origin