Demo Mode

No student ID available

Collaboration Workflows: Hands-On Practice

🎯 Activity Objectives

By completing these activities, you will:

Create and manage pull requests effectively
Practice forking and upstream workflows
Resolve real merge conflicts confidently
Experience team collaboration scenarios
Master code review processes

🚀 Activity One: Your First Pull Request

Setup: Create Team Project Repository

We'll simulate a team environment by creating a main repository and contributing to it.

bash

# Create main team repository
mkdir team-website-project
cd team-website-project

git init
echo "# Team Website Project" > README.md
echo "A collaborative website built by our team." >> README.md

# Create initial project structure
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <title>Our Team Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Our Team</h1>
        <p>Building great things together</p>
    </header>
    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>We are a team of developers learning Git collaboration!</p>
        </section>
    </main>
</body>
</html>
EOF

cat > styles.css << 'EOF'
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 4rem 2rem;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 2rem;
}

section {
    margin: 2rem 0;
}

h1, h2 {
    margin-bottom: 1rem;
}
EOF

git add .
git commit -m "Initial team website with basic structure"

Step One: Create Feature Branch for Pull Request

bash

# Create feature branch for team member profiles
git switch -c feature/add-team-profiles

# Add team profiles section
cat >> index.html << 'EOF'
        
        <section id="team">
            <h2>Meet Our Team</h2>
            <div class="team-grid">
                <div class="team-member">
                    <h3>Alex Johnson</h3>
                    <p>Frontend Developer</p>
                    <p>Loves React and clean code</p>
                </div>
                <div class="team-member">
                    <h3>Sarah Chen</h3>
                    <p>Backend Developer</p>
                    <p>Python and API specialist</p>
                </div>
                <div class="team-member">
                    <h3>Mike Rodriguez</h3>
                    <p>Full Stack Developer</p>
                    <p>Git workflow enthusiast</p>
                </div>
            </div>
        </section>
EOF

# Add CSS for team profiles
cat >> styles.css << 'EOF'

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.team-member {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    transition: transform 0.2s;
}

.team-member:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.team-member h3 {
    color: #667eea;
    margin-bottom: 0.5rem;
}

.team-member p {
    margin-bottom: 0.5rem;
}

.team-member p:first-of-type {
    font-weight: bold;
    color: #764ba2;
}
EOF

# Commit the changes
git add .
git commit -m "Add team profiles section with styling

- Create responsive grid layout for team members
- Add hover effects for better interactivity
- Include three team member profiles
- Style with gradient accent colors"

Step 2: Push Branch and Create Pull Request

bash

# First, push your main branch to GitHub
# (Create repository on GitHub first)
git remote add origin https://github.com/USERNAME/team-website-project.git
git push -u origin main

# Push feature branch
git push -u origin feature/add-team-profiles

On GitHub:

Go to your repository
You should see "Compare & pull request" button
Click it to create PR

Fill in details:

Title: "Add team profiles section"
Description:

markdown

## What This PR Does
- Adds a team profiles section to showcase team members
- Implements responsive grid layout
- Adds hover effects for better UX

## Visual Changes
- New "Meet Our Team" section below About
- Three team member cards with roles and descriptions
- Consistent styling with existing design

## Testing
- [x] Tested responsive behavior on mobile/desktop
- [x] Verified accessibility with screen readers
- [x] Cross-browser tested (Chrome, Firefox, Safari)

Step 3: Review Your Own Pull Request

Before creating the PR, let's review our changes:

bash

# See what changed compared to main
git diff main feature/add-team-profiles

# See the specific files changed
git diff --name-only main feature/add-team-profiles

# See a summary of changes
git diff --stat main feature/add-team-profiles

✅ Success! You've created a professional pull request with detailed description!

🍴 Activity 2: Fork Workflow Practice

Let's simulate contributing to an open-source project by forking our own repository.

Step One: Fork Your Repository

Go to your team-website-project on GitHub
Click "Fork" button (top right)
Fork it to your account (it'll have the same name)
You now have two repos: original and fork

Step 2: Clone Your Fork and Set Up Upstream

bash

# Clone your fork (not the original)
cd ..
git clone https://github.com/USERNAME/team-website-project.git team-fork
cd team-fork

# Add original repository as upstream
git remote add upstream https://github.com/USERNAME/team-website-project.git

# Verify remote configuration
git remote -v
# Should show both origin (fork) and upstream (original)

Step 3: Create Feature in Fork

bash

# Make sure you're on main and up-to-date
git switch main
git pull upstream main

# Create feature branch
git switch -c feature/add-contact-form

# Add contact section
cat >> index.html << 'EOF'
        
        <section id="contact">
            <h2>Contact Us</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea id="message" name="message" required></textarea>
                </div>
                <button type="submit">Send Message</button>
            </form>
        </section>
EOF

# Style the contact form
cat >> styles.css << 'EOF'

.contact-form {
    max-width: 500px;
    margin: 2rem 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.contact-form button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.contact-form button:hover {
    opacity: 0.9;
}
EOF

# Commit and push to fork
git add .
git commit -m "Add contact form with validation and styling

- Implement responsive contact form
- Add proper form validation
- Style with consistent theme colors
- Include focus states for accessibility"

git push origin feature/add-contact-form

Step 4: Create Pull Request to Original Repository

Go to your fork on GitHub
You should see option to create PR to upstream repository
Create PR with title: "Add contact form for user inquiries"
In the description, explain this is a contribution from a fork

⚔️ Activity 3: Merge Conflict Resolution

Let's create and resolve merge conflicts to practice this essential skill.

Step One: Create Conflicting Changes

bash

# Go back to original repository
cd ../team-website-project

# Create first branch that modifies header
git switch main
git switch -c feature/update-header-style

# Modify the header text and styling
sed -i.bak 's|Welcome to Our Team|Welcome to Our Amazing Team|' index.html
sed -i.bak 's|Building great things together|Creating incredible projects with passion|' index.html

git add index.html
git commit -m "Update header with more descriptive text"

# Switch to main and create conflicting branch
git switch main
git switch -c feature/new-header-design

# Make different changes to the same lines
sed -i.bak 's|Welcome to Our Team|Our Awesome Development Team|' index.html
sed -i.bak 's|Building great things together|Crafting innovative solutions daily|' index.html

# Also change the header background
sed -i.bak 's|background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);|background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);|' styles.css

git add .
git commit -m "Redesign header with new colors and messaging"

Step 2: Create the Conflict

bash

# Merge first branch into main
git switch main
git merge feature/update-header-style
# This should work fine

# Now try to merge the second branch
git merge feature/new-header-design
# CONFLICT! Git can't automatically resolve this

Step 3: Resolve the Conflict

bash

# Check which files have conflicts
git status
# Shows "both modified: index.html"

# Look at the conflicted file
cat index.html
# You'll see conflict markers: <<<<<<, =======, >>>>>>

Edit index.html to resolve conflicts:

html

<!-- Choose the best parts from both versions -->
<header>
    <h1>Our Awesome Development Team</h1>
    <p>Creating incredible projects with passion</p>
</header>

bash

# Stage the resolved file
git add index.html

# Complete the merge
git commit -m "Resolve header conflict: combine best messaging from both branches"

# Clean up feature branches
git branch -d feature/update-header-style
git branch -d feature/new-header-design

Step 4: Handle Complex Conflicts

Let's create a more complex conflict scenario:

bash

# Create two branches that modify the same CSS properties
git switch -c feature/mobile-improvements
sed -i.bak 's|max-width: 800px;|max-width: 1200px;|' styles.css
cat >> styles.css << 'EOF'

@media (max-width: 768px) {
    header {
        padding: 2rem 1rem;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
}
EOF

git add .
git commit -m "Add mobile responsiveness improvements"

git switch main
git switch -c feature/desktop-enhancements
sed -i.bak 's|max-width: 800px;|max-width: 900px;|' styles.css
cat >> styles.css << 'EOF'

@media (min-width: 1200px) {
    main {
        max-width: 1000px;
    }
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
EOF

git add .
git commit -m "Enhance desktop layout with better spacing"

# Merge first branch
git switch main
git merge feature/mobile-improvements

# Create conflict with second branch
git merge feature/desktop-enhancements
# Conflict in styles.css

Resolve by combining both media queries:

css

main {
    max-width: 1200px;  /* Take the larger value */
    margin: 2rem auto;
    padding: 0 2rem;
}

/* Keep both media queries */
@media (max-width: 768px) {
    header {
        padding: 2rem 1rem;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) {
    main {
        max-width: 1000px;
    }
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

bash

git add styles.css
git commit -m "Merge responsive improvements: combine mobile and desktop enhancements"

# Clean up
git branch -d feature/mobile-improvements
git branch -d feature/desktop-enhancements

👥 Activity 4: Team Code Review Simulation

Let's practice the complete code review workflow.

Step One: Create PR with Issues

bash

# Create a branch with some problematic code
git switch -c feature/add-javascript-functionality

# Add some JavaScript (with intentional issues)
cat > script.js << 'EOF'
// Team member hover effects and contact form handling
document.addEventListener('DOMContentLoaded', function() {
    // Get all team members
    var teamMembers = document.querySelectorAll('.team-member');
    
    // Add click handlers (inefficient approach)
    for (var i = 0; i < teamMembers.length; i++) {
        teamMembers[i].addEventListener('click', function() {
            alert('You clicked on ' + this.querySelector('h3').innerText);
        });
    }
    
    // Contact form handler (no validation)
    var form = document.querySelector('.contact-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Message sent!'); // Not really sending
        });
    }
});
EOF

# Link the JavaScript
sed -i.bak 's|</head>|    <script src="script.js"></script>\
</head>|' index.html

git add .
git commit -m "Add JavaScript functionality for interactions

- Team member click handlers
- Contact form submission
- Document ready handling"

git push origin feature/add-javascript-functionality

Step 2: Self-Review Before Creating PR

bash

# Review your own changes first
git diff main feature/add-javascript-functionality

# Check for common issues
echo "Self-review checklist:
[ ] Code follows team standards
[ ] No security vulnerabilities
[ ] Performance considerations addressed
[ ] Error handling implemented
[ ] Code is properly commented
[ ] Tests included (if applicable)"

Step 3: Create PR with Detailed Description

Create PR on GitHub with this description:

markdown

## What This PR Does
- Adds JavaScript interactivity to team member profiles
- Implements contact form submission handling
- Uses vanilla JavaScript for compatibility

## Changes Made
- Created script.js with event handlers
- Added click interactions for team members
- Form submission prevention and feedback

## Questions for Reviewers
- Is the event handling approach optimal?
- Should we add form validation?
- Any accessibility concerns?

## Testing Done
- [x] Manual testing in Chrome
- [ ] Cross-browser testing needed
- [ ] Accessibility testing needed

Step 4: Address Review Feedback

Let's simulate receiving review feedback and addressing it:

bash

# Reviewer feedback: "Use more modern JavaScript and add proper validation"
# Address the feedback

cat > script.js << 'EOF'
// Modern JavaScript with proper validation and accessibility
document.addEventListener('DOMContentLoaded', () => {
    // Team member interactions with better accessibility
    const teamMembers = document.querySelectorAll('.team-member');
    
    teamMembers.forEach((member, index) => {
        // Add keyboard accessibility
        member.setAttribute('tabindex', '0');
        member.setAttribute('role', 'button');
        member.setAttribute('aria-label', `Learn more about ${member.querySelector('h3').textContent}`);
        
        // Use modern event handling
        const handleInteraction = () => {
            const name = member.querySelector('h3').textContent;
            const role = member.querySelector('p').textContent;
            alert(`${name} - ${role}`);
        };
        
        member.addEventListener('click', handleInteraction);
        member.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleInteraction();
            }
        });
    });
    
    // Enhanced contact form with validation
    const form = document.querySelector('.contact-form');
    if (form) {
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Get form data
            const formData = new FormData(form);
            const name = formData.get('name').trim();
            const email = formData.get('email').trim();
            const message = formData.get('message').trim();
            
            // Validation
            if (!name || !email || !message) {
                alert('Please fill in all fields');
                return;
            }
            
            if (!isValidEmail(email)) {
                alert('Please enter a valid email address');
                return;
            }
            
            // Simulate successful submission
            alert('Thank you for your message! We will get back to you soon.');
            form.reset();
        });
    }
    
    // Email validation helper
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
});
EOF

git add script.js
git commit -m "Address review feedback: improve JavaScript quality

- Use modern ES6+ syntax with arrow functions
- Add proper form validation
- Implement keyboard accessibility
- Add ARIA labels for better screen reader support
- Include email validation with regex
- Provide better user feedback"

git push origin feature/add-javascript-functionality

Step 5: Final Review and Merge

After addressing feedback:

Re-request review on GitHub
Wait for approval
Merge the PR
Clean up branch locally

bash

# After PR is merged, update local repository
git switch main
git pull origin main
git branch -d feature/add-javascript-functionality

✅ Skills Checkpoint

Test your collaboration knowledge:

Create detailed pull requests with clear descriptions
Fork repositories and set up upstream remotes
Resolve merge conflicts by understanding both changes
Give constructive code review feedback
Address review comments professionally
Handle multiple branches with conflicting changes
Use GitHub features for team communication

🎯 Real-World Team Scenario

Scenario: Emergency Hotfix During Feature Development

bash

# You're working on a feature
git switch -c feature/user-dashboard
echo "<p>Dashboard in progress...</p>" >> index.html
git add . && git commit -m "Start dashboard feature"

# URGENT: Critical bug in production!
# Teammate reports: "Contact form is broken on mobile!"

# Stop feature work, fix the critical issue
git switch main
git switch -c hotfix/mobile-contact-form

# Fix the mobile issue
cat >> styles.css << 'EOF'

@media (max-width: 480px) {
    .contact-form button {
        width: 100%;
        margin-top: 1rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}
EOF

git add .
git commit -m "Fix contact form mobile issues

- Make button full-width on small screens
- Increase input font-size to prevent iOS zoom
- Improve touch target accessibility"

# Push and create emergency PR
git push origin hotfix/mobile-contact-form
# Create PR with "HOTFIX" in title for priority

# After hotfix is merged, update your feature branch
git switch main
git pull origin main
git switch feature/user-dashboard
git merge main  # Get the hotfix in your feature branch

💡 Pro Tips from This Activity

Detailed PR descriptions help reviewers understand your changes
Small, focused PRs are easier to review and get approved faster
Self-review first - catch issues before others spend time reviewing
Address feedback promptly - keep the collaboration flowing
Test conflict resolutions - always verify that merged code works
Communicate proactively - use comments to explain complex decisions

🎉 Activity Complete!

You've mastered:

Creating professional pull requests with detailed descriptions
Fork and upstream workflows for open-source contributions
Merge conflict resolution strategies and techniques
Code review processes from both reviewer and author perspectives
Team communication through Git and GitHub
Emergency hotfix workflows during feature development

These collaboration skills are essential for working on any development team!

Activity 3: Collaboration Workflows

Activity 3: Collaboration Workflows