🧭 Lesson 1: Why Version Control? Installing & Configuring Git

😩 The final-v2-REALLY-final Problem

Be honest: have you ever had a folder that looked like this?

index.html
index-old.html
index-backup.html
index-final.html
index-final-v2.html
index-final-v2-REALLY-final.html
index-final-v2-REALLY-final-USE-THIS-ONE.html

Everybody does this at some point. You're about to try something risky, so you make a copy "just in case." A week later you have seven copies, you can't remember which one is live on Netlify, and you have no idea what's different between final-v2 and REALLY-final.

Now think about your my-website folder from the HTML & CSS course. What if you redesign the navigation, it breaks on phones, and you only notice three days later, after you've changed ten other things? Copying files by hand can't rescue you from that. Version control can.

💾 What Version Control Does

Version control is a system that records snapshots of your project over time, so you can see what changed, when, and why, and go back to any earlier snapshot whenever you need to.

Two ways to picture it:

• Save points in a video game. Before the boss fight, you save. If it goes badly, you reload the save and try again. Git lets you make a save point of your website whenever you like, as many as you like.
• A lab notebook of snapshots. A scientist writes down every experiment: the date, what they changed, and what happened. Git keeps that notebook for you automatically, and every entry includes a complete photo of the whole project at that moment.

The problems it solves

Here's what a history of your site might look like by the end of today. Each dot is a snapshot, called a commit, with a short message describing what changed:

Every one of those dots is a complete snapshot you can look at or return to, even months later.

🔧 Git vs GitHub

These two names get mixed up constantly, so let's settle it now:

A handy comparison: Git is like your camera, which takes the photos. GitHub is like an online photo album where you upload them to keep them safe and share them. You can take plenty of photos without ever uploading any, and that's exactly what the whole morning looks like.

🗂️ The Mental Model: Three Areas

This is the most important idea of the whole day. Once it clicks, every Git command makes sense. Git thinks about your project in three places:

1. Working folder: your my-website folder, exactly as you see it in VS Code. This is where you edit files, the same as always.
2. Staging area: a "getting ready" area where you place the changes you want in your next snapshot. Think of it as arranging people before you take a group photo.
3. Repository: the permanent collection of snapshots (commits). Git stores it in a hidden folder named .git inside your project.

So the rhythm of working with Git is:

1. Edit your files as usual (in the working folder).
2. Stage the changes you want to keep together with git add.
3. Commit them as one snapshot, with a message, using git commit.

⌨️ Opening VS Code's Terminal

Git is a command-line tool: you type short commands and it answers with text. You don't need a separate app for this. VS Code has a terminal built in, and it opens right in your project folder.

1. Open VS Code.
2. Open the terminal with Ctrl + ` (the backtick key, usually above Tab). On a Mac it's also Control + `. You can always use the menu instead: View → Terminal (or Terminal → New Terminal).
3. A panel appears at the bottom with a blinking cursor. That's the prompt. Type a command, press Enter, and read the reply.

📥 Installing Git

First, check whether Git is already on your computer. Many Macs and Linux machines have it. In the VS Code terminal, type:

git --version

If you see something like this, Git is installed and you can skip ahead to Configuring Git:

git version 2.51.0

(Your number will differ. Anything 2.40 or newer is perfect for this class.) If you get an error such as "git is not recognized" or "command not found", follow the steps for your system below.

🪟 Windows: Git for Windows

1. Go to git-scm.com/downloads, choose Windows, and download the 64-bit installer (it's named like Git-2.xx.x-64-bit.exe).
2. Run it. The installer has a lot of screens. Accept the default on every screen except these two:
   • "Choosing the default editor used by Git": open the dropdown and pick Use Visual Studio Code as Git's default editor. (The default is Vim, which is famously hard to exit.)
   • "Adjusting the name of the initial branch in new repositories": choose Override the default branch name for new repositories and make sure the box says main.
3. Keep going with the defaults. You'll pass a screen about a credential helper with Git Credential Manager selected. Leave it that way: it's what will let you sign in to GitHub with your browser this afternoon.
4. Click Install, then Finish.
5. Close VS Code completely and reopen it, so its terminal picks up the newly installed Git. Then run git --version again.

🍎 macOS

1. In the VS Code terminal (or the Terminal app), run git --version.
2. If Git isn't installed yet, macOS pops up a dialog offering to install the command line developer tools. Click Install and wait a few minutes. These are Apple's Xcode Command Line Tools, and they include Git. (You do not need the full Xcode app.)
3. When it finishes, run git --version again.

Already use Homebrew? You can run brew install git instead to get the very latest version. Either way is fine for this class.

🐧 Linux

Use your distribution's package manager, then check the version:

# Ubuntu, Debian, Linux Mint
sudo apt install git

# Fedora
sudo dnf install git

# Then confirm it worked
git --version

⚙️ Configuring Git

Git stamps every commit with the author's name and email, so it needs to know who you are. You set this up once per computer, using git config --global. The word global means "for every project on this computer," so you won't have to do it again.

1. Your name

Use your real name (or whatever name you'd like to appear on your work). Keep the quotation marks:

git config --global user.name "Your Name"

2. Your email

git config --global user.email "you@example.com"

This afternoon you'll connect to GitHub. Using the same email you use (or will use) for your GitHub account means GitHub can link your commits to your profile.

3. The default branch name

Every new project starts with one line of history, called a branch. Today's standard name for it is main, which is also what GitHub uses. This setting makes sure your new projects use it too:

git config --global init.defaultBranch main

(If you chose the "Override" option in the Windows installer, this is already set. Running it again does no harm.)

4. Your editor

Occasionally Git needs you to type a longer message and opens a text editor for it. Let's make that editor VS Code:

git config --global core.editor "code --wait"

The --wait part tells Git to wait until you close that VS Code tab before carrying on.

5. Check your settings

git config --global --list

You should see your four settings (possibly among a few others):

user.name=Your Name
user.email=you@example.com
init.defaultbranch=main
core.editor=code --wait

Don't worry that Git shows defaultbranch in lowercase. Git setting names aren't case-sensitive, so it's the same setting. If the list is long and ends with a : or (END), press q to get your prompt back.

❓ Common Questions

Hands-on Exercise

git --version
git config --global user.name "Ada Lovelace"
git config --global user.email "ada@example.com"
git config --global init.defaultBranch main
git config --global core.editor "code --wait"
git config --global --list

user.name=Ada Lovelace
user.email=ada@example.com
init.defaultbranch=main
core.editor=code --wait

📓 Learning Journal

Summary

📚 Additional Resources

• Git — Downloads
• Pro Git book — What is Git? (free online)
• Pro Git book — First-Time Git Setup
• GitHub Docs — Setting your commit email address

🚀 What's Next?

Git is installed and knows who you are. In the next lesson, you'll turn your my-website folder into a repository with git init, make your first commits, write good commit messages, and do the same thing with a few clicks in VS Code's Source Control panel.