3.4 Git & GitHub: The Complete Beginner's Guide

Why Do You Need Git and GitHub?

Picture three scenarios:

1. You built a product that works. Then you accidentally change some code, and it breaks. You want to revert, but you can't remember what the code looked like before.
2. You're working on a project with a friend, and both of you edit the same file at the same time. Whose version wins?
3. Your hard drive dies, and all your code is gone.

Git and GitHub solve all three problems.

---

What Exactly Are Git and GitHub?

Save System vs Cloud Saves

Think of coding like playing an RPG:

Git = The game's built-in save system (local)

You save before fighting the boss. If you lose, you can reload and try again. You can create unlimited save files, each recording when it was made, how far you got, and what equipment you had. Git is the local save system for code — you manage version history on your own machine and can roll back to any previous state at any time.

GitHub = Cloud save service (online)

If saves only exist on your console, a hardware failure means they're gone. That's why cloud saves exist — sync your saves to a server so you can continue on any device. GitHub is the cloud save platform for code. Your code gets an online backup, and others can view your project and collaborate with you.

One-sentence summary: Git is the save tool on your computer; GitHub is the cloud vault.

What Can Each One Do?

Feature	Git (Local Tool)	GitHub (Online Platform)
Save code history	✅	✅ (synced)
Works offline	✅	❌ Requires internet
Multi-person collaboration	Basic support	✅ Full support
Code backup	❌ Only on your machine	✅ Cloud-safe
Free website hosting	❌	✅ GitHub Pages
Show off projects	❌	✅ Accessible to others

---

Step 1: Install Git

Mac Install

Open Terminal and type:

git --version

If you haven't installed it before, macOS will prompt you to install developer tools — just click "Install." After that, type it again:

git --version
# Output like: git version 2.39.5

Windows Install

1. Open https://git-scm.com/download/win
2. Download the installer and click "Next" through with default settings
3. After installation, open Git Bash (a terminal tool) and type git --version to verify

Linux Install

# Ubuntu / Debian
sudo apt update && sudo apt install git -y

# Fedora
sudo dnf install git -y

# Verify
git --version
# Output: git version 2.43.0

---

Step 2: Initial Configuration (One-Time Only)

After installing Git, tell it who you are. This info gets recorded in every save you make.

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

⚠️ It's recommended to use the same email you registered on GitHub with, so GitHub can recognize your commits.

Verify your configuration:

git config --list
# Output:
# user.name=Your Name
# user.email=your@email.com

---

Step 3: Complete Workflow (Follow Along)

Let's walk through the entire process from scratch: create a project → write code → save → push to GitHub.

3.1 Create a Project Folder

mkdir my-first-project
cd my-first-project
pwd
# Output: /Users/yourname/my-first-project

3.2 Initialize a Git Repository

git init
# Output: Initialized empty Git repository in /Users/yourname/my-first-project/.git/

This command creates a hidden .git directory in your folder — this is Git's "save database." Don't manually modify it.

3.3 Create a File

echo "# My First Project" > README.md
cat README.md
# Output: # My First Project

3.4 Check Current Status

git status
# Output:
# On branch main
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#         README.md
# nothing added to commit but untracked files present

"Untracked files" means: Git found a new file README.md, but it hasn't been added to version control yet.

3.5 Add Files to the Staging Area

git add README.md

Or use git add . to stage all changes. The staging area is like a "shopping cart" — you put everything you want to save in there first, then commit it all at once.

3.6 Commit (Save)

git commit -m "First commit: create README"
# Output:
# [main (root-commit) a1b2c3d] First commit: create README
#  1 file changed, 1 insertion(+)
#  create mode 100644 README.md

The message in quotes after -m describes this save. Good descriptions are important — when you look back at your save history, you'll know exactly what changed at a glance.

3.7 Create a Remote Repository on GitHub

1. Go to github.com and log in
2. Click the + in the top right → New repository
3. Name it my-first-project (matching your local folder makes management easier)
4. Do NOT check "Add a README file" (you already have one locally)
5. Click Create repository

GitHub will give you a repository URL like: https://github.com/your-username/my-first-project.git

3.8 Link Local Repository to GitHub

git remote add origin https://github.com/your-username/my-first-project.git

origin is the conventional alias for the remote repository.

3.9 Push to GitHub

git push -u origin main

-u origin main means: default to pushing to origin's main branch from now on. Next time you only need git push.

# Output:
# Enumerating objects: 3, done.
# Counting objects: 100% (3/3), done.
# Writing objects: 100% (3/3), 230 bytes | 230.00 KiB/s, done.
# Total 3 (delta 0), reused 0 (delta 0)
# To https://github.com/your-username/my-first-project.git
#  * [new branch]      main -> main

Refresh the GitHub page, and you'll see your README.md file!

Complete Workflow Summary

mkdir project-name        ← Create folder
cd project-name           ← Enter folder
git init                  ← Initialize repository
                          ← Write code, create files...
git add .                 ← Stage all changes
git commit -m "message"   ← Save
git remote add origin URL ← Link to GitHub
git push -u origin main   ← Push online

After that, every time you change code, repeat the three steps: add → commit → push.

---

.gitignore: Tell Git "Ignore These Files"

Some files don't need to be saved — like dependencies, system-generated files, or config files containing passwords. Create a .gitignore file in the project root:

touch .gitignore

Then list the files/folders to ignore:

# Dependencies (hundreds of MB, no need to commit)
node_modules/

# System files
.DS_Store
Thumbs.db

# Environment variables (may contain passwords, API keys — NEVER commit!)
.env
.env.local

# Build output
dist/
build/

# Log files
*.log

Common templates are available at github.com/github/gitignore, covering nearly every language and framework.

🚨 Security reminder: .env files usually contain API keys, database passwords, and other sensitive info. Never commit them to GitHub — that's basically publishing your passwords. Always add .env to .gitignore.

---

Branches: A Safety Net for Bold Experiments

Branches are like parallel universes. You build a stable version in the main universe (main branch), then open a parallel universe (new branch) to experiment with new features. If the experiment works, merge it back. If it fails, just delete that universe — the main universe remains unaffected.

Creating and Switching Branches

git branch new-feature      # Create a branch called new-feature
git checkout new-feature    # Switch to that branch
# Or replace the above two lines with one command:
git checkout -b new-feature
# Output: Switched to a new branch 'new-feature'

Developing on a Branch

You're now on the new-feature branch. Go wild — change anything:

echo "This is a new feature" >> app.js
git add .
git commit -m "Add new feature"

Merging Branches

When the new feature is done, switch back to main and merge:

git checkout main           # Switch back to main
git merge new-feature       # Merge the new feature in

Deleting Branches

Once merged, clean up:

git branch -d new-feature
# Output: Deleted branch new-feature.

Common Branch Use Cases

Scenario	Approach
Trying an uncertain new feature	Create a branch to experiment
Fixing a bug	Create a fix-login-bug branch
Multi-person collaboration	Each person gets their own branch

---

Things Go Wrong? Two Lifesaving Commands

Scenario 1: Code is broken, want to undo uncommitted changes

# See which files changed
git status
# Output:
# Changes not staged for commit:
#         modified:   app.js

# Undo changes in a specific file, back to last save
git checkout -- app.js

# Or undo all changes
git checkout -- .

This is like "loading a save" — you go back to the last save state, and all your changes disappear.

Scenario 2: Need to pause current work and switch tasks

# Working on feature A, suddenly need to fix an urgent bug
git stash
# Output: Saved working directory and index state WIP on main: a1b2c3d last commit

# Now the working directory is clean — go fix the bug
git checkout -b fix-bug
# ... fix the bug, commit ...

# Switch back and restore your work
git checkout main
git stash pop
# Output: On branch main
# Changes not staged for commit:
#         modified:   app.js

git stash is like a "temporary save" — it hides your current changes so you can bring them back later.

Scenario 3: Want to undo a committed change (roll back to a historical version)

# View commit history
git log --oneline
# Output:
# f4e5d6c Third commit: added button
# b2c3d4e Second commit: wrote homepage
# a1b2c3d First commit: create README

# Roll back to the second commit (keeps changes staged, can recommit)
git revert f4e5d6c

Or a more forceful reset (use with caution! You'll lose commits):

git reset --hard b2c3d4e

💡 Beginner safety rule: When in doubt, use git revert. It's a "safe rollback" — it creates a new commit to undo the previous changes without losing history. git reset --hard is a "force rollback" that actually destroys commits. Make sure you know what you're doing before using it.

---

Managing Git with Cursor

Cursor has built-in Git support — no command line needed.

Viewing Changes

Open Cursor and look for the Source Control icon in the left sidebar (branch-shaped). Changed files are listed there — click one to see exactly which lines changed (red for deletions, green for additions).

Committing Code

1. In the Source Control panel, click the + icon next to a file to stage it
2. Type your commit message in the input box at the top
3. Click the ✓ Commit button

Pushing and Pulling

• Click the sync button (circular arrow icon) in the bottom-left to push and pull
• More options are available in the ... menu in the Source Control panel

Creating and Switching Branches

The bottom-left shows the current branch name. Click it to create or switch branches.

---

Managing Git with Claude Code

Claude Code's strength is that you just talk to it in natural language.

You: commit my code for me
Claude Code: [automatically runs git add . && git commit -m "Update feature module"]

You: push to GitHub
Claude Code: [automatically runs git push origin main]

You: create a new branch called fix-header-bug
Claude Code: [automatically runs git checkout -b fix-header-bug]

You: show me recent commit history
Claude Code: [automatically runs git log --oneline -10]

Claude Code understands your intent and translates it into the corresponding Git commands. It's faster than typing them yourself and less error-prone.

---

GitHub Pages: Build a Website for Free

GitHub Pages can host static websites (HTML/CSS/JS) for free — launch a portfolio, personal homepage, or project documentation at zero cost.

Steps

1. Make sure your repo has an index.html

echo '<!DOCTYPE html>
<html>
<head><title>My Website</title></head>
<body>
  <h1>Hello World! This is my first website</h1>
  <p>Hosted on GitHub Pages, completely free 🎉</p>
</body>
</html>' > index.html

git add .
git commit -m "Add homepage"
git push

2. Enable Pages on GitHub

Go to your repo → click Settings → find Pages in the left sidebar → select main branch under Source → click Save

3. Wait a minute or two, and your site URL will appear at the top of the page:

https://your-username.github.io/my-first-project/

Open that link, and your website is live!

Advanced Uses

• You can bind a custom domain
• Supports static site generators like Jekyll
• Many open-source project docs are hosted on GitHub Pages

---

Daily Command Cheat Sheet

# Check status (most commonly used command — use it anytime)
git status

# See what changed
git diff

# Stage all changes
git add .

# Commit
git commit -m "description"

# Push to GitHub
git push

# Pull latest code from GitHub
git pull

# View commit history
git log --oneline

# Create and switch to a new branch
git checkout -b branch-name

# Switch back to main
git checkout main

# Merge a branch
git merge branch-name

# Temporarily save current work
git stash

# Restore temporarily saved work
git stash pop

---

Summary

Git and GitHub might seem like overkill at first — "I'm just coding by myself, why bother?" But once you get used to them, you'll find they're like your phone's auto-backup feature — you don't think about them until they save your life.

Plus, almost every AI coding tool has deep Git integration. Cursor has a built-in Git panel, and Claude Code can execute Git commands directly. Learn the basics, and your AI tools can do even more for you.

Spend ten minutes learning these commands, and you'll benefit for a lifetime.