Git Practice Projects - Hands-On Learning

📁 Project 1: Personal Portfolio Website

Beginner ⏱️ 30-45 minutes

Scenario: You're building a personal portfolio website and want to track your progress using Git. This project teaches you the fundamentals of Git workflow.

Goal: Create a repository, make commits, create branches, and push to GitHub.

git init git add git commit branching GitHub push

1

Initialize Your Project

Create a new folder for your portfolio and initialize Git:

mkdir my-portfolio
cd my-portfolio
git init
echo "# My Portfolio" > README.md
git add README.md
git commit -m "Initial commit: Add README"

2

Create Your Portfolio Structure

Add the basic HTML structure:

# Create index.html with basic content
echo '<!DOCTYPE html>
<html>
<head><title>My Portfolio</title></head>
<body><h1>Welcome to My Portfolio</h1></body>
</html>' > index.html

git add index.html
git commit -m "Add homepage HTML structure"

3

Add Styling

Create a CSS file and track it:

# Create styles.css
echo 'body { font-family: Arial; margin: 40px; }
h1 { color: #333; }' > styles.css

git add styles.css
git commit -m "Add basic styling"

# View your commit history
git log --oneline

4

Create a Feature Branch

Add an about section on a new branch:

git checkout -b feature/about-section

# Add about.html
echo '<h2>About Me</h2>
<p>I am learning Git!</p>' > about.html

git add about.html
git commit -m "Add about section"

# Switch back to main and merge
git checkout main
git merge feature/about-section

5

Push to GitHub

Create a repository on GitHub and push your code:

# Add remote (replace with your repository URL)
git remote add origin https://github.com/yourusername/my-portfolio.git

# Push to GitHub
git push -u origin main

✅ Completion Checklist

Created and initialized a Git repository

Made at least 3 commits with descriptive messages

Created and merged a feature branch

Pushed repository to GitHub

🌟 Bonus Challenge

Add a .gitignore file to exclude node_modules/ and .DS_Store files. Create a develop branch for ongoing work.

📝 Project 2: Collaborative Blog with Conflicts

Intermediate ⏱️ 45-60 minutes

Scenario: You're working with a team on a blog. Multiple people are editing the same files, leading to merge conflicts you need to resolve.

Goal: Experience and resolve merge conflicts, practice collaboration workflows.

merge conflicts pull requests collaboration git stash

1

Setup the Blog Repository

# Create and initialize the blog
mkdir team-blog
cd team-blog
git init

# Create initial blog structure
echo "# Our Team Blog" > README.md
echo "<h1>Welcome to Our Blog</h1>" > index.html
mkdir posts

git add .
git commit -m "Initial blog setup"

2

Simulate Team Member A's Work

# Create a branch for team member A
git checkout -b feature/alice-post

# Alice adds a blog post
echo "# My First Post
By Alice
Date: Today

This is my first blog post about Git!" > posts/first-post.md

# Alice also modifies index.html
echo "<h1>Welcome to Our Amazing Blog</h1>
<p>Latest post: First Post by Alice</p>" > index.html

git add .
git commit -m "Add Alice's first post"

3

Simulate Team Member B's Conflicting Work

# Switch back to main
git checkout main

# Create Bob's branch
git checkout -b feature/bob-post

# Bob also modifies index.html differently
echo "<h1>Team Blog - Updated Design</h1>
<p>New post coming soon by Bob!</p>" > index.html

# Bob adds his post
echo "# Technical Tips
By Bob

Here are some Git tips..." > posts/tech-tips.md

git add .
git commit -m "Add Bob's tech tips post"

4

Create and Resolve Conflict

# Merge Alice's work first
git checkout main
git merge feature/alice-post

# Try to merge Bob's work - CONFLICT!
git merge feature/bob-post

# You'll see a merge conflict in index.html
# Open index.html and you'll see:
# <<<<<<< HEAD
# (Alice's version)
# =======
# (Bob's version)
# >>>>>>> feature/bob-post

# Manually edit to keep both changes:
echo "<h1>Our Amazing Team Blog - Updated Design</h1>
<p>Latest posts:</p>
<ul>
  <li>First Post by Alice</li>
  <li>Technical Tips by Bob</li>
</ul>" > index.html

# Mark as resolved
git add index.html
git commit -m "Merge Bob's post and resolve conflicts"

5

Practice Stashing

# Start working on something
echo "# Draft Post" > posts/draft.md

# Oh no! Need to switch branches urgently
git stash save "WIP: Draft post"

# Do other work
git checkout -b hotfix/typo
echo "# Our Team Blog
The best blog ever!" > README.md
git add README.md
git commit -m "Fix README typo"

# Go back and retrieve your work
git checkout main
git stash pop

# Continue with your draft
git add posts/draft.md
git commit -m "Add draft post"

💡 Hint: When resolving conflicts, take time to understand both versions. Sometimes you want to keep both changes, sometimes just one, and sometimes you need to create a combination.

Conflict Resolution Best Practices:

Communicate: Talk to your team member about the conflicting changes
Understand: Read both versions carefully before deciding
Test: After resolving, test that everything still works
Use tools: VS Code and other editors have built-in merge conflict resolvers
Prevent: Pull frequently and communicate about who's working on what

✅ Completion Checklist

Created multiple branches simulating team members

Created a merge conflict

Successfully resolved the conflict

Used git stash to save work temporarily

🌍 Project 3: Open Source Contribution Simulation

Intermediate ⏱️ 60 minutes

Scenario: Practice the complete open source contribution workflow by forking, making changes, and creating a pull request.

Goal: Master the fork-and-pull workflow used in open source projects.

forking upstream remote pull requests git rebase

1

Find a Practice Repository

Use the "first-contributions" repository or create your own:

# Option 1: Use the famous first-contributions repo
# Go to: https://github.com/firstcontributions/first-contributions
# Click "Fork" button

# Option 2: Create your own practice repo
# Create a new repo on GitHub called "practice-contributions"
# Add a CONTRIBUTORS.md file

2

Fork and Clone

# Clone your fork (replace with your username)
git clone https://github.com/YOUR-USERNAME/first-contributions.git
cd first-contributions

# Add upstream remote
git remote add upstream https://github.com/firstcontributions/first-contributions.git

# Verify remotes
git remote -v

3

Create Feature Branch

# Always create a new branch for your changes
git checkout -b add-your-name

# Add your name to Contributors.md
echo "- [Your Name](https://github.com/your-username)" >> Contributors.md

# Commit your change
git add Contributors.md
git commit -m "Add [Your Name] to Contributors list"

4

Keep Your Fork Updated

# Fetch upstream changes
git fetch upstream

# Merge or rebase upstream changes
git checkout main
git merge upstream/main

# Rebase your feature branch
git checkout add-your-name
git rebase main

5

Push and Create Pull Request

# Push your branch to your fork
git push origin add-your-name

# Go to GitHub and you'll see a "Compare & pull request" button
# Click it and:
# 1. Write a clear title
# 2. Describe your changes
# 3. Reference any issues (e.g., "Fixes #123")
# 4. Submit the pull request

💡 Pro Tip: Before submitting a PR, always check the project's CONTRIBUTING.md file for specific guidelines. Many projects have specific requirements for commit messages, code style, and testing.

🌟 Bonus Challenge

Find a real open source project with "good first issue" labels and make an actual contribution! Start with documentation fixes or typo corrections.

🐛 Project 4: Bug Hunt with Git Bisect

Advanced ⏱️ 45 minutes

Scenario: A bug was introduced somewhere in the last 20 commits. Use git bisect to find exactly when it was introduced.

Goal: Master git bisect for efficient debugging.

git bisect debugging automation

1

Create a Project with History

# Create a calculator project
mkdir calculator-app
cd calculator-app
git init

# Create a simple calculator
cat > calculator.js << 'EOF'
function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }
function divide(a, b) { return a / b; }

// Test
console.log("2 + 2 =", add(2, 2));
console.log("10 - 5 =", subtract(10, 5));
console.log("3 * 4 =", multiply(3, 4));
console.log("15 / 3 =", divide(15, 3));
EOF

git add calculator.js
git commit -m "Initial calculator implementation"

2

Create Multiple Commits (Including Bug)

# Make several commits
for i in {1..5}; do
    echo "// Feature $i added" >> calculator.js
    git add calculator.js
    git commit -m "Add feature $i"
done

# Introduce a bug (change multiply function)
sed -i 's/return a \* b/return a + b/' calculator.js
git add calculator.js
git commit -m "Refactor multiply function"

# Make more commits after the bug
for i in {6..10}; do
    echo "// Enhancement $i" >> calculator.js
    git add calculator.js
    git commit -m "Add enhancement $i"
done

3

Start Bisecting

# Start bisect
git bisect start

# Current version is bad (multiply doesn't work)
git bisect bad

# The first commit was good
git bisect good HEAD~15

# Git will checkout a commit in the middle
# Test if multiply works correctly
node -e "
function multiply(a, b) { return a * b; }
console.log('3 * 4 =', multiply(3, 4));
console.log('Is it 12?');
"

# If it shows 12, mark as good
git bisect good
# If it shows 7 (wrong), mark as bad
git bisect bad

# Continue until Git finds the exact bad commit

4

Automate Bisect

# Create a test script
cat > test.sh << 'EOF'
#!/bin/bash
# Extract multiply function and test it
grep "multiply" calculator.js | grep -q "return a \* b"
EOF

chmod +x test.sh

# Restart bisect with automation
git bisect reset
git bisect start HEAD HEAD~15
git bisect run ./test.sh

# Git will automatically find the bad commit!

5

Fix the Bug

# Once found, fix the bug
git bisect reset
git checkout main

# Fix the multiply function
sed -i 's/return a + b/return a * b/' calculator.js
git add calculator.js
git commit -m "Fix: Correct multiply function bug"

# Verify fix
node calculator.js

Git Bisect Best Practices:

Always have a reproducible test case
Automate testing when possible with scripts
Use git bisect skip if a commit can't be tested
Document the bug and fix in your commit message
Consider adding a regression test to prevent the bug from returning

🆘 Project 5: Disaster Recovery Training

Advanced ⏱️ 60 minutes

Scenario: Practice recovering from common Git disasters: deleted branches, lost commits, accidental resets, and more.

Goal: Build confidence in recovering from any Git mistake.

git reflog recovery git fsck reset strategies

1

Scenario: Accidentally Deleted Branch

# Create and delete a branch with important work
git checkout -b important-feature
echo "Important work" > feature.txt
git add feature.txt
git commit -m "Add important feature"

# Accidentally delete it
git checkout main
git branch -D important-feature  # Oh no!

# Recovery using reflog
git reflog
# Find the commit SHA of the deleted branch
git branch recovered-feature abc123  # Use actual SHA

# Or in one command
git branch recovered-feature HEAD@{1}

2

Scenario: Lost Commits After Reset

# Make some commits
echo "Work 1" > work1.txt && git add . && git commit -m "Work 1"
echo "Work 2" > work2.txt && git add . && git commit -m "Work 2"
echo "Work 3" > work3.txt && git add . && git commit -m "Work 3"

# Accidentally reset
git reset --hard HEAD~3  # Lost everything!

# Recover using reflog
git reflog
# You'll see your lost commits
git reset --hard HEAD@{1}  # Or use specific SHA

# Alternative: cherry-pick specific commits
git cherry-pick abc123  # Lost commit SHA

3

Scenario: Committed to Wrong Branch

# You're on main but meant to be on feature branch
echo "Feature code" > feature.js
git add feature.js
git commit -m "Add new feature"
# Oops, this should have been on feature branch!

# Solution 1: Move commit to correct branch
git checkout -b feature-branch  # Create branch with commit
git checkout main
git reset --hard HEAD~1  # Remove from main

# Solution 2: Cherry-pick approach
git log --oneline  # Note the commit SHA
git checkout feature-branch
git cherry-pick abc123  # The commit SHA
git checkout main
git reset --hard HEAD~1

4

Scenario: Detached HEAD State

# You accidentally checked out a commit directly
git checkout abc123  # Some commit SHA
# Now in detached HEAD state

# Made changes in detached state
echo "Important changes" > important.txt
git add important.txt
git commit -m "Important work in detached HEAD"

# Save your work before switching
git branch temp-save  # Create branch from detached HEAD
git checkout main
git merge temp-save  # Merge your saved work

5

Scenario: Recover Deleted Files

# Accidentally deleted and committed
rm important-file.txt
git add -A
git commit -m "Clean up files"  # Oops, deleted important file!

# Find when file existed
git log --all --full-history -- important-file.txt

# Restore file from specific commit
git checkout abc123~1 -- important-file.txt
git add important-file.txt
git commit -m "Restore accidentally deleted file"

# Or use git restore (Git 2.23+)
git restore --source=HEAD~1 important-file.txt

🛡️ Recovery Golden Rules:

Don't panic - Git rarely loses data permanently
Check git reflog first - it's your time machine
Make a backup branch before attempting recovery
Use git fsck --lost-found for orphaned objects
Remember: Until garbage collection runs (usually 30 days), everything is recoverable

⚡ Quick Mini-Challenges

Various Levels ⏱️ 10-15 minutes each

Short, focused exercises to practice specific Git skills:

🎯 Challenge 1: Commit Message Master

Create 5 commits following conventional commit format:

feat: add user authentication fix: resolve memory leak in parser docs: update API documentation

🎯 Challenge 2: Interactive Rebase

Create 10 messy commits, then use interactive rebase to squash them into 3 clean commits.

🎯 Challenge 3: Cherry-Pick Practice

Create two branches with different features. Cherry-pick specific commits from one to the other.

🎯 Challenge 4: Stash Juggling

Create 3 different stashes with descriptive messages. Apply them in different order.

🎯 Challenge 5: Tag Management

Create semantic version tags (v1.0.0, v1.1.0) and practice listing and pushing tags.

🎯 Challenge 6: Alias Creation

Create 5 useful Git aliases and document what each does.

🎯 Git Practice Projects

📁 Project 1: Personal Portfolio Website

Initialize Your Project

Create Your Portfolio Structure

Add Styling

Create a Feature Branch

Push to GitHub

✅ Completion Checklist

🌟 Bonus Challenge

📝 Project 2: Collaborative Blog with Conflicts

Setup the Blog Repository

Simulate Team Member A's Work

Simulate Team Member B's Conflicting Work

Create and Resolve Conflict

Practice Stashing

Conflict Resolution Best Practices:

✅ Completion Checklist

🌍 Project 3: Open Source Contribution Simulation

Find a Practice Repository

Fork and Clone

Create Feature Branch

Keep Your Fork Updated

Push and Create Pull Request

🌟 Bonus Challenge

🐛 Project 4: Bug Hunt with Git Bisect

Create a Project with History

Create Multiple Commits (Including Bug)

Start Bisecting

Automate Bisect

Fix the Bug

Git Bisect Best Practices:

🆘 Project 5: Disaster Recovery Training

Scenario: Accidentally Deleted Branch

Scenario: Lost Commits After Reset

Scenario: Committed to Wrong Branch

Scenario: Detached HEAD State

Scenario: Recover Deleted Files

⚡ Quick Mini-Challenges

🎯 Challenge 1: Commit Message Master

🎯 Challenge 2: Interactive Rebase

🎯 Challenge 3: Cherry-Pick Practice

🎯 Challenge 4: Stash Juggling

🎯 Challenge 5: Tag Management

🎯 Challenge 6: Alias Creation