Git & GitHub: How Developers Save and Share Code
Interactive demonstration of Git and Github.
Understanding Git vs GitHub
Git is a version control tool that keeps a complete history of changes to a folder of files, called a repository (repo).
GitHub is an online service that hosts these repositories, making it easy for people to collaborate, share, and work on the same code together.
Learning Objectives
You'll understand how developers manage code changes, collaborate with teams, and maintain project history using git.
Think of it like:
Git = A detailed logbook that records every change made to a document
GitHub = A shared library where teams can access and contribute to the same logbooks
1Local vs Remote Repositories
💻 Your Computer
Local Repository
☁️ GitHub
Remote Repository
Think of it like:
Working on a document on your laptop (local) while keeping a backup in Google Drive (remote) that your team can access. You can work offline on your laptop, then sync when you're ready to share.
Key Commands (we'll practice these later):
git push - Send your changes to GitHubgit pull - Get latest changes from GitHubgit clone - Copy a project from GitHubgit fetch - Check for updates2Understanding Staging: The Photography Studio
📁 Your Working Directory (Messy Desk)
Drag files to the stage →
🎬 Staging Area (Photography Stage)
Drop files here to stage them
Stage some files first!
📚 Your Photo Album (Commit History)
Why this two-step process?
Just like a photographer carefully arranges items on a stage before taking a photo, Git lets you carefully select which changes to include in each commit. This creates a clean, understandable project history where each "snapshot" has a clear purpose.
3Git Workflow
Working Directory
Edit files here
Staging Area
Prepare to commit
Local Repository
Committed history
Remote Repository
Shared team codebase - push your commits here, pull others' changes from here
Command History
On branch main
Changes not staged for commit:
modified: homepage.html
Workflow Status
1.
git add - Stage changes2.
git commit - Save locally3.
git push - Upload to remote4.
git pull - Download from remoteNote: "Reset Demo" resets this interactive demo,
not the same as git reset command
Complete workflow:
Working → Staging → Local Repo → Remote Repo = Full development cycle with team synchronization
4Branch Management
Think of it like:
Branches are parallel universes where you can experiment without affecting the main timeline. Successful experiments get merged back.
5Team Collaboration with Pull Requests
Sarah (Frontend)
Mike (Backend)
Alex (DevOps)
Pull Requests
Team Activity Log
Pull Request workflow:
Developers work independently on feature branches → Create pull requests → Team reviews code → Approved changes merge to main branch
Summary
You've now experienced the Git and GitHub workflow through interactive demonstrations:
- Complete workflow: Working directory → Staging → Local repo → Remote repo
- Branch management: Creating, switching, and merging branches interactively
- Pull request workflow: How teams collaborate through code review
- Essential commands: add, commit, push, pull, branch, merge in action