Lesson 2 • Beginner
Git Basics: Clone, Add, Commit 🌿
Master the three core commands every developer uses daily — clone repositories, stage changes, commit snapshots, and inspect your history.
What You'll Learn in This Lesson
- •
git cloneto download existing repositories - •
git addandgit commit— the daily workflow - •
git logandgit diff— inspecting history and changes - • Undoing mistakes with restore, reset, and revert
- • Writing meaningful commit messages
git add is choosing which photos to include, and git commit is gluing them into the album with a caption.1️⃣ git clone — Download a Project
git clone downloads an entire repository from GitHub (or any remote) to your machine — including all files, history, and branches. It's how you start working on an existing project.
Try It: git clone
Download and explore an existing repository
// git clone — Download an Existing Repository
console.log("=== git clone ===");
console.log("Clone copies an entire repository from a remote server.");
console.log();
console.log(" $ git clone https://github.com/user/project.git");
console.log(" Cloning into 'project'...");
console.log(" remote: Enumerating objects: 156, done.");
console.log(" remote: Counting objects: 100% (156/156), done.");
console.log(" Receiving objects: 100% (156/156), 2.4 MiB, done.");
console.log();
console.log("Wh
...2️⃣ git add & git commit — The Daily Loop
The add-commit cycle is the heartbeat of Git. Edit files → git add to stage → git commit to save. You'll do this hundreds of times per project. Stage related changes together for clean, logical commits.
Try It: Add & Commit
Stage files and create commits step by step
// git add & git commit — The Daily Workflow
console.log("=== The Add-Commit Cycle ===");
console.log("This is what you'll do dozens of times per day:");
console.log(" 1. Edit files");
console.log(" 2. git add (stage changes)");
console.log(" 3. git commit (save snapshot)");
console.log();
console.log("=== git add — Staging Files ===");
console.log(" git add index.html ← Stage one file");
console.log(" git add src/ ← Stage entire folder");
console.log(" git add .
...3️⃣ git log & git diff — Inspect History
git log shows your commit history. git diff shows exactly what changed — line by line, red for removed, green for added. These are essential for understanding what happened in your project.
Try It: Log & Diff
View commit history and see line-by-line changes
// git log & git diff — Inspecting History
console.log("=== git log — View Commit History ===");
console.log();
console.log(" $ git log --oneline");
const commits = [
{ hash: "d4e5f6g", msg: "Add dark mode toggle", author: "Alice", time: "2 hours ago" },
{ hash: "a1b2c3d", msg: "Fix navbar spacing", author: "Bob", time: "5 hours ago" },
{ hash: "x9y8z7w", msg: "Add user profile page", author: "Alice", time: "1 day ago" },
{ hash: "m3n4o5p", msg: "Set up React Router", author: "Charlie"
...4️⃣ Undoing Changes
Everyone makes mistakes. Git provides multiple ways to undo: restore for uncommitted changes, reset for local commits, and revert for safely undoing pushed commits.
Try It: Undo Changes
Learn restore, reset, amend, and revert
// Undoing Changes — restore, reset, revert
console.log("=== Undo Toolkit ===");
console.log("Git gives you multiple ways to undo mistakes.");
console.log();
console.log("=== 1. Discard Working Directory Changes ===");
console.log(" $ git restore index.html");
console.log(" → Throws away all uncommitted changes to index.html");
console.log(" → File goes back to the last committed version");
console.log(" ⚠️ This is PERMANENT — changes are lost!");
console.log();
console.log("=== 2. Unstage
...⚠️ Common Mistakes
git add . blindly — This stages everything. Always run git status first to see what you're adding.📋 Quick Reference
| Command | Purpose |
|---|---|
| git clone URL | Download a repository |
| git add file | Stage changes |
| git commit -m "msg" | Save a snapshot |
| git log --oneline | View commit history |
| git diff | See uncommitted changes |
| git restore file | Discard changes |
🎉 Lesson Complete!
You've mastered the daily Git workflow! Next, we'll learn branching — how to work on features in isolation.
Sign up for free to track which lessons you've completed and get learning reminders.