Tools & Workflow 45 min interactive guide🌿 Live Visualizer & Branch Simulator

Git Basics: Version Control & GitHub Essentials

Master Git version control from scratch. Understand the 3-tier state pipeline (Working Directory, Staging Area, Repository), tracking changes, atomic commits, branching, merging, resolving conflicts, and syncing with remote GitHub repositories.

01

1. What Is Git?

Git is a free, open-source Distributed Version Control System (DVCS) created by Linus Torvalds in 2005. It tracks changes in source code files over time, allowing developers to revert mistakes, compare snapshots, and collaborate safely across large distributed engineering teams.

💡 Core Mental Model: Git tracks and manages your local code history. GitHub is the cloud platform that remotely stores and enables collaboration on that Git repository.
02

2. Why Do Developers Use Git?

1. Time Travel

Revert to any working state in your code history if a bug is introduced in production.

2. Teamwork

Hundreds of engineers can work on the same codebase simultaneously without overwriting each other.

3. Experimentation

Create isolated branches to test new features without risking stability on main.

03

3. Git vs GitHub

FeatureGit (Local Tool)GitHub (Cloud Platform)
What is it?Command-line version control softwareWeb-based cloud hosting service
Where does it run?Locally on your computerIn the cloud / browser
Internet required?❌ No (works 100% offline)✅ Yes (for sync, PRs, sharing)
Key Commands / Featuresadd, commit, branch, logPull Requests, Issues, Actions, Forks
04

4. Installing and Setting Up Git

Configure your global username and email once after installing Git. This attaches your identity to every commit:

# Set your identity
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# Check configuration
git config --list
05

5. Git Repository & The .git Folder

A repository (repo) is a folder tracked by Git. Running git init initializes a hidden .git folder in your project root containing the full commit history and version database.

# Initialize a brand new repository
git init
# Initialized empty Git repository in /project/.git/
06

6. Git's 3-Tier Basic Workflow

1. Working Directory

Your actual files on disk. Modifications here are unstaged and uncommitted.

2. Staging Area (Index)

Intermediate staging area drafted with git add before recording a commit.

3. Local Repository

Permanent immutable snapshots stored inside .git via git commit.

07

7. Tracking Changes (status, add, commit)

# 1. Check which files are modified or staged
git status

# 2. Stage specific files or all files
git add index.html
git add .

# 3. Create a snapshot commit with a message
git commit -m "feat: add navigation navbar component"
08

8. Understanding Commits & History

Every commit has a unique 40-character SHA-1 hash, author info, timestamp, and commit message. Use git log to view historical timelines:

# View commit history
git log --oneline --graph
# * a1b2c3d (HEAD -> main) feat: add authentication form
# * e4f5g6h Initial project skeleton
09

9. Viewing and Comparing Changes (git diff)

# Compare Working Directory vs Staging Area
git diff

# Compare Staging Area vs Last Commit
git diff --staged

# Inspect a specific commit
git show a1b2c3d
10

10. Undoing Changes (restore & reset)

CommandWhat It DoesSafety Level
git restore file.jsDiscard uncommitted changes in working directory⚠️ Overwrites local edits
git restore --staged file.jsUnstage a file (moves back to working directory)✅ 100% Safe (no data lost)
git reset HEAD~1Undo last commit but keep changes in working directory✅ Safe (keeps edits)
11

11. Branches & Merging

Branches isolate new work so you don't break the stable main branch while developing features:

# Create and switch to a new branch in one command
git switch -c feature/login-page
# (Older syntax: git checkout -b feature/login-page)

# Make commits on your feature branch...
git commit -m "feat: login form UI"

# Switch back to main and merge the feature
git switch main
git merge feature/login-page
12

12. Handling Merge Conflicts

A merge conflict happens when two branches edit the exact same lines of a file. Git inserts conflict markers:

<<<<<<< HEAD (current main branch)
<h1>Welcome to Pathubs Learning</h1>
=======
<h1>Welcome to Pathubs Education Hub</h1>
>>>>>>> feature/hero (incoming branch)
🛠️ How to Resolve: Delete the markers (<<<, ===, >>>), choose the correct final text, save the file, stage with git add, and commit with git commit.
13

13. Remote Repositories (push, pull, fetch)

git push

Uploads local commits from your machine to the remote repository on GitHub.

git pull

Downloads and automatically merges remote updates into your current branch (fetch + merge).

git fetch

Downloads remote changes for inspection without modifying your working files.

14

14. GitHub Basics (Clone, Fork, Pull Request)

  • Clone: Downloads a full copy of a remote GitHub repository to your local computer (git clone https://...).
  • Fork: Creates a personal copy of someone else's repository on your GitHub account.
  • Pull Request (PR): A proposal to merge your feature branch changes into the upstream team repository, complete with code review and automated CI tests.
15

15. A Complete Real-World Git Workflow

# 1. Update main branch
git switch main && git pull origin main

# 2. Create feature branch
git switch -c feature/search-bar

# 3. Make changes, test, and commit
git add .
git commit -m "feat: add live fuzzy search filter"

# 4. Push feature branch to GitHub
git push -u origin feature/search-bar

# 5. Open Pull Request on GitHub ➔ Review ➔ Merge into main!
16

16. Common Git Mistakes & Fixes

  • Committing sensitive secrets (.env): Add .env and node_modules to .gitignore BEFORE committing.
  • Vague commit messages ("fixed stuff"): Use conventional commit prefixes like feat:, fix:, refactor:, docs:.
  • Committing directly to main in team projects: Always branch first (git switch -c feature/...).
  • Pushing broken code without testing: Verify local builds before pushing to shared remotes.
17

17. Git Best Practices

  • Make small, atomic commits that do one logical thing well.
  • Write clear, imperative commit messages (e.g., "Add search pagination" not "Added pagination").
  • Pull frequently (git pull origin main) to stay in sync and prevent massive merge conflicts.
  • Use .gitignore for dependency directories, build outputs, and local config files.
LIVE INTERACTIVE LAB

Git Workflow & Branch Visualizer

Simulate Git's 4-tier state pipeline or inspect interactive feature branch creation and merging in real time!

📂 1. Working DirectoryUnstaged
index.htmlMODIFIED
styles.cssMODIFIED
📦 2. Staging Area (Index)Staged
[Empty Index]
💾 3. Local Repo (.git)Committed
app.jsCOMMITTED
🌐 4. GitHub (Remote)Synced
[Unpushed]
TERMINAL OUTPUT (Simulated Git CLI):
$ git status
On branch main
Untracked/Modified files: index.html, styles.css
Use 'git add <file>...' to stage changes
🎯 Git Challenge 1 of 6❌ Try Again

Goal 1: Stage a modified file by clicking '2. git add . (Stage)' to move it to the Staging Area.

TEST YOUR KNOWLEDGE

Git Basics Mastery Quiz

8 scenario-based questions testing your understanding of Git vs GitHub, repositories, staging workflows, atomic commits, branching, merging, and remote synchronization.

Question 1 of 8Score: 0 / 8
🌿 What is the core difference between Git and GitHub?