INF 270: WordPress — Week 13: Git and GitHub

What is Version Control?

Version control is a system that tracks every change you make to your files over time. Think of it like a detailed "undo" history that never expires — one you can share with teammates, explore, and roll back to at any point.

• Safety net: Made a change that broke everything? You can revert to any previous state in seconds.
• History: Every commit is a snapshot with a message explaining what changed and why.
• Collaboration: Multiple people can work on the same project simultaneously without overwriting each other's work.
• Backup: Your code lives on a remote server (GitHub), not just your laptop. If your machine dies, your work is safe.
• Industry standard: Every professional development team uses version control. Learning Git now is a direct career skill.

Git vs. GitHub — What's the difference?

• Git is the version control software. It runs on your computer and tracks changes to your files locally.
• GitHub is a website that hosts Git repositories online so you can back them up, share them, and collaborate with others.

You can use Git without GitHub (local-only), but you can't use GitHub without Git. In practice, almost everyone uses them together.

Installing Git

Windows

1. Go to git-scm.com/download/win — the download should start automatically.
2. Run the installer. The default options are fine for most students.
3. When asked to choose a default editor, you can select Visual Studio Code from the dropdown if it appears.
4. When asked about the default branch name, choose main.
5. Finish the installer, then open Git Bash (search for it in the Start menu) and type git --version to confirm it worked.

Mac

1. Open the Terminal app (search Spotlight with Cmd + Space).
2. Type git --version and press Enter. If Git isn't installed, macOS will prompt you to install the Xcode Command Line Tools — click Install and follow the prompts.
3. Alternatively, if you have Homebrew installed, you can run brew install git to get the latest version.

First-time Git Setup

After installing Git, tell it your name and email. This information gets attached to every commit you make. Run these two commands in your terminal (Git Bash on Windows, Terminal on Mac):

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

Use the same email address you'll use for your GitHub account. You only need to do this once per machine.

Creating a GitHub Account

1. Go to github.com and click Sign up.
2. Enter your email, create a password, and choose a username.
   Choose your username carefully. It will appear in the URL of every project you publish (github.com/your-username/project). Use something professional — many employers check GitHub profiles when hiring.
3. Complete the verification steps and confirm your email address.
4. On the welcome screen you can skip the personalization questions — just scroll to the bottom and click Skip personalization.

Ways to Work With Git

There are three main ways to interact with Git. They all do the same thing — pick the one that feels most comfortable to you.

1. The Command Line (Terminal / Git Bash)

The most universal approach. Works everywhere, and every tutorial and documentation example uses it. It can feel intimidating at first but you only need a handful of commands day-to-day.

2. VS Code's Built-in Source Control Panel

VS Code has Git support built in. Click the Source Control icon in the left sidebar (looks like a branching diagram). From there you can stage files, write commit messages, and push — all without leaving your editor.

3. GitHub Desktop (GUI)

GitHub Desktop is a free standalone app that gives you a visual interface for all Git operations. Great if you prefer clicking over typing. It also handles GitHub authentication for you automatically.

Initializing a Repo — the store-calculator project

We're going to put the store-calculator project from last week under version control. Open a terminal and navigate to that folder, then run:

# Navigate into your project folder first
cd store-calculator

# Initialize a new Git repository
git init

git init creates a hidden .git folder inside your project. That folder is the entire history of your repository — don't delete it.

Making Your First Commit

A commit is a saved snapshot of your project. Think of it like a checkpoint in a video game. The workflow is always the same three steps:

1. Make changes to your files (edit code, add files, etc.)
2. Stage the changes you want to include in this snapshot (git add)
3. Commit the staged changes with a descriptive message (git commit)

# See what files Git is aware of
git status

# Stage all files in the current folder
git add .

# Commit with a message describing what you did
git commit -m "Initial commit"

Creating a Remote Repo on GitHub

1. Log in to GitHub and click the + icon → New repository.
2. Name it store-calculator (matching your local folder name helps).
3. Leave it Public (or Private if you prefer).
4. Do not initialize with a README, .gitignore, or license — your local repo already exists and we don't want a conflict.
5. Click Create repository.

GitHub will show you a page with setup instructions. Copy the URL of your new repo — you'll need it in the next step.

Pushing to GitHub

Now we connect the local repo to GitHub and push the code up. Run these commands in your terminal (replace YOUR-USERNAME with your actual GitHub username):

# Connect your local repo to the GitHub remote
git remote add origin https://github.com/YOUR-USERNAME/store-calculator.git

# Push your code (the -u flag saves the remote for future pushes)
git push -u origin main

After this, refresh your GitHub repo page — your files should be there. Every future push is just git push (no extra flags needed after the first time).

The Daily Git Workflow

After the initial setup, your everyday workflow looks like this whenever you sit down to work on the project:

# Check what has changed since your last commit
git status

# Stage a specific file
git add index.html

# Stage everything that changed
git add .

# Commit the staged changes
git commit -m "Add quantity input field"

# Push to GitHub
git push

And to review your commit history at any time:

# See the history of commits
git log

# Compact one-line view
git log --oneline

Using Git in VS Code

Once your folder has been initialized as a Git repo, VS Code detects it automatically. Here's how to do the same workflow without the terminal:

1. Click the Source Control icon in the left sidebar (or press Ctrl+Shift+G / Cmd+Shift+G).
2. Changed files appear under Changes. Hover over a file and click the + icon to stage it (equivalent to git add).
3. Type a commit message in the text box at the top and click Commit (the checkmark button).
4. Click the ... menu → Push to send your commits to GitHub.

VS Code also shows a colored indicator next to each line in a file to show what's been added (green), changed (blue), or deleted (red) since the last commit.

Using GitHub Desktop

1. Download and install GitHub Desktop.
2. Sign in with your GitHub account — it handles authentication for you.
3. Go to File → Add Local Repository and point it to your store-calculator folder.
4. Changed files appear automatically in the left panel. Check the boxes next to what you want to stage.
5. Write a summary (commit message) at the bottom left and click Commit to main.
6. Click Push origin in the top bar to send your changes to GitHub.

Quick Reference

Activity

Continue to work on your store calculator plugin. Focus on functionality and styling. After making changes, periodically commit your work and push it to GitHub.