Skip to main content

Git and GitHub Revision Control and Collaboration

Quick Review + GitHub Basics​

  • git init - Start a new project
  • git add - Prepare changes
  • git commit - Save a snapshot
  • git push - Send to GitHub
  • git pull - Get updates from GitHub

Two Ways to Do Everything (Git and GitHub)​

Command Line Way (what you type)

git status
  • Shows you what file have changed, what's stages, what not tracked
  • Text-based output in your terminal

GitHub Website Way (what you click)

  • Go to your repository page
  • Visual representation of the same information
  • Green/red badges, dots or highlights show file status at a glance

Why Learn Both?

  • Command line = Faster once you know it, works everywhere
  • GitHub website = Visual, easier to understand, good for beginners
  • Best approach = Use GitHub website to learn, then gradually try commands

Seeing Changes: Git Diff + GitHub Compare​

Understanding What Changed​

Real-Life Example: Essay Editing Imagine you're writing an essay and want to see exactly what you changed between drafts.

Method 1: Command Line​

# See what you changed (before saving)
git diff

# See changes between your last save and current work
git diff HEAD~1 HEAD

What does "HEAD" mean?

  • HEAD = Your most recent save (latest commit)
  • HEAD~1 = One save before that (previous commit)
  • Think of it like: "Compare my current version with the version from 1 save ago"

Method 2: GitHub Website​

Step-by-Step: See Changes on GitHub

  1. Go to your repository on GitHub.com
  2. Click "Commits" (usually shows a number like "5 commits")
  3. Click on any commit to see what changed
  4. Look for colored lines:
    • Red lines (-) = What was removed
    • Green lines (+) = What was added

Live Example - Student Recipe Project:

Let's say you're working on a recipe collection:

Command Line:

# Create initial recipe
echo "Chocolate Chip Cookies" > recipe.txt
echo "Ingredients: flour, sugar, eggs" >> recipe.txt
git add recipe.txt
git commit -m "Add basic cookie recipe"

# Make improvements
echo "Instructions: Mix ingredients, bake 350°F for 12 minutes" >> recipe.txt
git add recipe.txt
git commit -m "Add baking instructions"

# See what changed between versions
git diff HEAD~1 HEAD

Understanding Git's "Save Numbers":

  • HEAD = Your most recent save (like "Version 5")
  • HEAD~1 = One save before (like "Version 4")
  • HEAD~2 = Two saves before (like "Version 3")
  • Think of it as: "Show me what changed between Version 4 and Version 5"

GitHub Website Way:

  1. Push your changes: git push origin main
  2. Go to GitHub.com → Your repository
  3. Click "2 commits" (or however many you have)
  4. Click on "Add baking instructions" commit
  5. See the visual diff - GitHub shows exactly what you added in green!

The GitHub website makes it super easy to see changes. You can even click line numbers to comment on specific changes - great for group projects!

Understanding History: Git Log + GitHub Insights​

Viewing Your Project Timeline​

Real-Life Analogy: Like looking through your photo album to see how your room changed over time.

Method 1: Command Line​

# Simple history
git log --oneline

# Visual tree (shows branches)
git log --oneline --graph

# Find specific changes
git log --grep="fix"

Method 2: GitHub Website (Much Easier!)​

Step-by-Step: Explore History on GitHub

  1. Go to your repository on GitHub.com
  2. Click "Insights" tab at the top
  3. Click "Network" to see a visual tree of all changes
  4. OR click "Commits" to see a list of all changes
  5. Click any commit to see details

Example - Study Notes Project:

Command Line:

# Create study notes with multiple commits
echo "Biology Chapter 1: Cells" > biology.txt
git add biology.txt
git commit -m "Start biology notes"

echo "Cell parts: nucleus, membrane, cytoplasm" >> biology.txt
git add biology.txt
git commit -m "Add cell parts"

echo "Cell functions: growth, reproduction, metabolism" >> biology.txt
git add biology.txt
git commit -m "Add cell functions"

# View history
git log --oneline

GitHub Website Way:

  1. Push everything: git push origin main
  2. Go to GitHub → Your repository
  3. Click "3 commits"
  4. See your timeline - GitHub shows:
    • When you made each change
    • What you changed
    • Your commit messages
    • A green/red graph showing how much you added/removed

What You See:

  • Clear timeline of your work
  • Visual graphs showing your productivity
  • Easy browsing - just click to explore
  • Search functionality - find specific changes

Safe Ways to Undo Mistakes​

The Safety First Approach​

Important Rule: Always choose the safest method first!

Scenario 1: "I Just Made a Commit But Want to Add More"​

Problem: You saved your work (committed) but realized you forgot to add something.

Command Line (Safest):

# Undo last commit but keep your changes
git reset --soft HEAD~1

# Add more changes
echo "Additional content" >> your-file.txt
git add your-file.txt

# Commit everything together
git commit -m "Complete version with all changes"

GitHub Website Way: Unfortunately, you cannot undo commits directly on GitHub website. This is why learning basic command line is helpful! But here's what you can do:

  1. Make the additional changes in a new commit
  2. Use descriptive commit messages like "Add missing conclusion to essay"
  3. Don't worry about having extra commits - it's completely normal!

Scenario 2: "I Made a Mistake and Need to Fix It"​

Problem: You committed wrong information and need to correct it safely.

Command Line (Recommended):

# Create a new commit that fixes the mistake
git revert HEAD

What this means:

  • HEAD = Your most recent save
  • revert = "Create a new save that undoes the previous save"
  • Like writing "CORRECTION: The right answer is..." instead of erasing your mistake

GitHub Website Way (Easier for Beginners!):

Step-by-Step: Fix Mistakes on GitHub

  1. Go to your repository on GitHub.com
  2. Find the file with the mistake
  3. Click the pencil icon (Edit this file)
  4. Make your corrections
  5. Scroll down to "Commit changes"
  6. Write a clear message like "Fix incorrect date in assignment"
  7. Click "Commit changes"

Student Example - Assignment Due Date:

Let's say you wrote the wrong due date in your assignment file:

GitHub Method:

  1. Click on "assignment.txt" in your repository
  2. Click the pencil icon to edit
  3. Change "Due: March 15" to "Due: March 25"
  4. Write commit message: "Correct assignment due date"
  5. Click "Commit changes"

Result: GitHub automatically creates a new commit with the fix. Your mistake is still in history (which is good for learning), but the current version is correct.

Team Collaboration Workflows​

Working with Others on GitHub​

This is where GitHub really shines! The website makes collaboration much easier than command line.

Scenario 1: Joining Someone's Project​

GitHub Website Way (Recommended for Beginners):

Step-by-Step: Join a Class Project

  1. Teacher shares link like: https://github.com/teacher/class-project
  2. Click "Fork" button (top-right) - this makes your own copy
  3. Click "Code" → "Download ZIP" if you just want to see files
  4. OR Clone if you want to contribute:
    • Click "Code" → Copy the link
    • In terminal: git clone [paste-link-here]

What Forking Does:

  • Creates your own copy you can edit freely
  • Keeps connection to original project
  • Lets you suggest changes back to original

Scenario 2: Contributing to a Project​

Example: Adding to Class Study Guide

GitHub Website Method (No Command Line Needed!):

  1. Fork the study guide repository
  2. Go to YOUR fork (will show "your-name/study-guide")
  3. Find the file you want to improve
  4. Click pencil icon to edit
  5. Make your improvements: 
    Chapter 3: Physics
    - Newton's Laws (original content)
    - Example: Pushing a shopping cart demonstrates force = mass × acceleration (your addition)
  6. Commit your changes with message "Add real-world physics example"
  7. Click "Pull Request" (this suggests your changes to the original)
  8. Write explanation: "I added a shopping cart example to help explain Newton's laws"
  9. Click "Create Pull Request"

What Happens Next:

  • Teacher gets notification about your suggestion
  • Teacher can review your changes
  • If approved, your changes get added to the main study guide
  • Everyone benefits from your contribution!

Scenario 3: Getting Updates from Team​

Problem: Your teammate added new content, and you want those updates.

GitHub Website Way:

  1. Go to your fork on GitHub
  2. Look for message "This branch is 2 commits behind original"
  3. Click "Sync fork" button
  4. Click "Update branch"
  5. Done! Your copy now has the latest changes

Command Line Way:

git pull origin main

Essential Commands​

Must Know (Command Line):

git status          # What's happening?
git add .           # Prepare all changes
git commit -m "..."  # Save with message
git push origin main # Send to GitHub
git pull origin main # Get updates

Must Know (GitHub Website):

  • Fork - Make your own copy
  • Edit files - Click pencil icon
  • View commits - Click commit count
  • Compare changes - Click on any commit
  • Pull requests - Suggest changes
  • Sync fork - Get updates

Daily Workflow for Students​

Typical Day:

  1. Morning: git pull origin main (get updates)
  2. Working: Make changes, git add, git commit, git push
  3. Collaboration: Use GitHub website to review others' work
  4. Problem? Use GitHub website to see what changed

Key Points​

Remember:

  • GitHub website is your friend - use it to understand what's happening
  • Command line is faster once you learn it
  • Always pull before push - get updates first
  • Descriptive commit messages help everyone understand changes
  • Mistakes are normal - both Git and GitHub help you fix them safely

Final Encouragement: Don't feel like you need to master everything at once! Start with the GitHub website to understand concepts, then gradually add command-line skills. Both methods are valuable, and using them together makes you a more effective collaborator.

Remember: Every expert was once a beginner. Git and GitHub might seem complex now, but with practice, they'll become as natural as saving a document!