Chapter 6: Version Control with Git

Welcome to the final chapter of the foundational roadmap! You've learned how to build a complete, interactive website. Now, it's time to learn how to manage your code like a professional. This is where **Version Control** comes in.

What is Version Control? (And Why Do I Need It?)

Imagine you're working on your website. You change 3 files... and suddenly, the entire website breaks. You don't remember what you changed. Version Control is a system that records changes to files over time so that you can recall specific versions later. It's like a "time machine" for your code.

Git vs. GitHub: What's the Difference?

• Git: This is the *software* on your computer. It's the "time machine" that tracks your files.
• GitHub: This is a *website* (a cloud service). It's a place to store your Git projects (called repositories or "repos") online. It's like a "Google Drive for your code."

You use **Git** on your computer, and then you "push" your project to **GitHub** to back it up.

Core Concept #1: The Basic Workflow (The 3 Stages)

Git has a three-stage process:

1. Working Directory: Your project folder where you edit files.
2. Staging Area (Index): Your "shopping cart." You put the files you want to save in here.
3. Repository (`.git` folder): The "checkout counter." When you "commit," you permanently save everything in your cart as a snapshot.

Core Concept #2: The 5 Basic Commands

You'll use these 5 commands 90% of the time in your terminal.

1. `git init`

Turns your project folder into a Git repository. You only run this **once** per project.

git init

2. `git status`

Your best friend. It *tells you* the current status: which files are changed, staged, etc.

git status

3. `git add `

Moves a file from the Working Directory to the Staging Area (puts it in your cart).

# Add just one file
git add index.html

# A common shortcut to add ALL changed files
git add .

4. `git commit -m "Your Message"`

The "save" button. It takes *everything* in your Staging Area and saves it as a snapshot. The `-m` flag is for the required "message."

git commit -m "Created the basic HTML for homepage"

5. `git push`

This uploads your local commits from your computer to a remote server like **GitHub**.

git push origin main

Core Concept #3: Branches (Working in Parallel)

What if you want to try a new feature without breaking your main, working website? You use **branches**. A branch is like making a *copy* of your project.

By default, you are on the `main` branch. You can create a new branch (`new-feature`), work on it, and if it works, **merge** it back into `main`. If it fails, you just delete the branch.

# Create a new branch AND switch to it
git checkout -b new-feature

# ... (do your work, add, commit) ...

# Switch back to the main branch
git checkout main

# Merge the 'new-feature' branch into 'main'
git merge new-feature

Conclusion: Your New Workflow

Your new workflow for *any* project should be:

1. **Initialize:** `git init` (once).
2. **Work:** Change your code.
3. **Stage:** `git add .`
4. **Commit:** `git commit -m "Made some changes"`
5. **Push:** `git push origin main` (to back it up).

Congratulations on completing the foundational roadmap. You now have the skills to not only build modern websites but to manage them professionally.