Git Branching Cheatsheet
Mohamad's interest is in Programming (Mobile, Web, Database and Machine Learning). He is studying at the Center For Artificial Intelligence Technology (CAIT), Universiti Kebangsaan Malaysia (UKM).
Introduction
Learn to use Git's powerful collaboration tools—branching, stashing, tagging, and merging—by building and switching between three versions of a demo app. No setup required; just your browser!
Quick Start Guide
Step 0: Create Your Replit Project
Sign in to [Replit].
Create a New Project:
Select PHP Web Server Framework.
Name it
GitQuizDemo.
Step 1: Initialize Git & Create Base App
Check Git Version: bash
git --versionConfigure Git: bash
git config --global user.name "YourName" git config --global user.email "youremail@example.com" git config --global init.defaultBranch mainInitialize Git: bash
git initCheck Configuration: bash
git config --global --list
Step 2: Edit Index Page
- Open
index.phpand paste the following:
html
<!DOCTYPE html>
<html>
<head>
<title>Demo App — Base</title>
</head>
<body>
<h1>🚀 Welcome to Demo App!</h1>
<p>Switch branches to see different versions.</p>
</body>
</html>
html 1
Open on canvas
Step 3: Commit — First Snapshot of Main
bash
git add index.php
git commit -m "Initial commit: Base version"
Step 4: Practice Branching — Create Dark Theme
Create and Switch to Dark Theme Branch: bash
git checkout -b feature/dark-themeEdit
index.phpfor Dark Theme:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyKahoot — Dark Theme</title>
<style>
body { background: #121212; color: #e0e0e0; }
h1 { color: #bb86fc; }
</style>
</head>
<body>
<h1>Quiz Night</h1>
<p>Welcome to the ultimate quiz game!</p>
</body>
</html>
html 2
Open on canvas
- Commit Changes:
bash
git add index.php
git commit -m "feat: dark theme UI"
Step 5: Edit Index Page Again
- Undo Changes:
bash
git checkout -- index.php
Step 6: Create Timer Version from Main
Switch to Main: bash
git checkout mainCreate Timer Branch: bash
git checkout -b feature/timerEdit
index.phpfor Timer:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyKahoot — Timer Quiz</title>
</head>
<body>
<h1>Timer Active</h1>
<p>Next question in <span id="countdown">10</span> seconds!</p>
<script>
let timeLeft = 10;
const timer = setInterval(() => {
document.getElementById('countdown').textContent = --timeLeft;
if (timeLeft <= 0) clearInterval(timer);
}, 1000);
</script>
</body>
</html>
html 3
Open on canvas
- Commit Changes:
bash
git add index.php
git commit -m "feat: added countdown timer"
Step 7: Create Leaderboard Version
Switch to Main: bash
git checkout mainCreate Leaderboard Branch: bash
git checkout -b feature/leaderboardEdit
index.phpfor Leaderboard:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DemoApp — Leaderboard</title>
</head>
<body>
<h1>Top Players</h1>
<ol>
<li>Alex — 9500 pts</li>
<li>Jamie — 8700 pts</li>
<li>Taylor — 8200 pts</li>
</ol>
</body>
</html>
html 4
Open on canvas
- Commit Changes:
bash
git add index.php
git commit -m "feat: added leaderboard"
Step 8: Switch Between All Branches
- Switch and Refresh Browser:
bash
git checkout feature/dark-theme
git checkout feature/timer
git checkout feature/leaderboard
git checkout main
Step 9: Practice Stashing
- Edit
index.php:
html
<p>🚧 COMING SOON: Sound Effects!</p>
- Stash Changes:
bash
git stash push -m "WIP: sound effects teaser"
- Switch Branch:
bash
git checkout feature/dark-theme
- Retrieve Stash:
bash
git checkout main
git stash apply
Step 10: Practice Tagging
- Tag the Dark Theme:
bash
git checkout feature/dark-theme
git tag -a v1.0 -m "First release: Dark Theme Edition"
- List Tags:
bash
git tag -n
- Switch to Tag:
bash
git checkout v1.0
Step 11: Practice Merging (Optional)
- Merge Dark Theme into Main:
bash
git checkout main
git merge feature/dark-theme
- Resolve Merge Conflicts (if any):
- Edit the file to resolve conflicts, then:
bash
git add index.php
git commit -m "Resolved merge conflict"
Key Commands Summary
| Command | Description |
git --version | Check Git version |
git config --global user.name "YourName" | Set username |
git init | Initialize a Git repository |
git checkout -b <branch> | Create and switch to a new branch |
git add <file> | Stage changes for commit |
git commit -m "message" | Commit staged changes with a message |
git branch | List all branches |
git stash push -m "message" | Stash uncommitted changes |
git tag -a <tag> -m "message" | Create a tag |
git merge <branch> | Merge a branch into the current branch |
Conclusion
You've mastered Git branching techniques! You can now create isolated features, stash unfinished work, tag releases, and merge changes effectively. Happy coding!