Module 25: Version Control — Design & Code Foundations

09

undefined

Version History

Print

File copies

Manual naming

design_v1, design_v2, design_final...

Web

Git history

Automatic tracking

Complete history with messages

Collaboration

Print

File sharing

Email/Dropbox

Risk of overwriting each other

Web

Branches + PRs

Parallel work

Merge changes systematically

Review Process

Print

Meetings

Verbal feedback

Feedback not tracked

Web

Code review

Documented

Comments on specific lines

Rollback

Print

Hope you saved

Manual copies

May lose work

Web

git revert

Any version

Restore any previous state

10

undefined

Cognitive Benefits

undefined

Psychological Safety

undefined

Team Communication

undefined

11

Version Control in Practice

How teams use version control effectively.

Branch → PR → Review → Merge

Simple, effective workflow

Principles Identified:

Simplicity One main branch, feature branches

Code Review Every change reviewed via PR

Continuous Deploy Main is always deployable

Key insight: GitHub Flow is the most common workflow—simple enough for small teams, scales to large ones.

Figma + Git

Design tokens, not design files

Principles Identified:

Tokens in Git Export design tokens as JSON/CSS

Figma for Design Keep visual files in Figma

Single Source Tokens sync between design and code

Key insight: Design systems export tokens (colors, spacing) to Git while keeping visual design in Figma.

Fork → PR → Discuss

Contribute to any project

Principles Identified:

Fork Copy project to your account

Contribute Make changes, submit PR

Collaborate Maintainers review and merge

Key insight: Git enables global collaboration—anyone can contribute improvements to public projects.

12

Version Control Mistakes

Common errors that cause team friction.

Failure: Committing to Main Directly

Direct push to main

No review, potential bugs

Fix: Always use feature branches

Branch → PR → Review → Merge

Changes reviewed first

Rule: Never push directly to main. Create a branch, open a PR, get review, then merge.

Failure: Vague Commit Messages

"updates"
"fixed stuff"
"WIP"
"changes"

Fix: Write descriptive messages

"Fix nav overflow on mobile"
"Add dark mode toggle"
"Refactor button styles"

Rule: Commit messages should explain what changed and why. Future you will thank you.

Failure: Massive Pull Requests

+2,847 lines, 45 files

Impossible to review

Fix: Keep PRs small and focused

+150 lines, 5 files

Easy to understand

Rule: Small PRs get better reviews. Break large features into multiple smaller PRs.

Failure: Not Pulling Before Starting

Branch from stale main

Merge conflicts later

Fix: Always pull latest main first

git pull → git checkout -b

Start from latest

Rule: Always pull the latest main before creating a new branch. Reduces conflicts.

13

Version Control Best Practices

Checklist for healthy Git workflows.

01

Commit Message Audit

Tests: Message quality

Review your last 10 commits. Are messages descriptive? Could you understand what changed 6 months from now? Aim for 'what + why' in each message.

git log --oneline -10

Review recent history

02

PR Size Check

Tests: Reviewability

Is your PR under 400 lines? Can it be reviewed in 15 minutes? If not, consider splitting into smaller PRs. Large PRs get rubber-stamped, not truly reviewed.

< 400 lines ✓

< 10 files ✓

Single purpose ✓

03

Branch Hygiene

Tests: Repository cleanliness

Are merged branches deleted? Are branch names descriptive? Is main always deployable? Regular cleanup keeps the repo manageable.

☑ Delete merged branches

☑ Descriptive names

☑ Main is deployable

04

Review Participation

Tests: Team engagement

Is everyone participating in reviews? Are reviews timely (< 24 hours)? Is feedback constructive and specific? Good reviews improve everyone's work.

Response time: < 24h ✓

Specific feedback ✓

Team participation ✓

14

Git Commands Reference

Essential Git commands for daily work.

# Get latest changes
git pull origin main

# Create new branch
git checkout -b feature/my-feature

# Or, shorter version
git checkout -b feature/my-feature origin/main

Starting Work via CSS

git pull - Download latest changes
git checkout -b - Create and switch to branch
origin/main - Base branch on remote main

Tip: Always start from fresh main to minimize merge conflicts.

# See what's changed
git status

# Stage specific files
git add path/to/file.css

# Stage all changes
git add .

# Commit with message
git commit -m "Add dark mode styles"

# Commit with longer message
git commit

Making Commits via CSS

git status - See uncommitted changes
git add - Stage files for commit
git commit -m - Commit with inline message

Tip: Commit often. Small, focused commits are easier to understand and revert.

# Push branch to remote
git push origin feature/my-feature

# Push and set upstream
git push -u origin feature/my-feature

# Then open PR in GitHub/GitLab web interface
# Or use GitHub CLI:
gh pr create --title "Add feature" --body "Description"

Pushing & PRs via CSS

git push origin - Upload branch to remote
-u flag - Set upstream for future pushes
gh pr create - GitHub CLI for PRs

Tip: Use -u on first push so future pushes just need 'git push'.

# Switch to main
git checkout main

# Get latest
git pull

# Go back to feature branch
git checkout feature/my-feature

# Merge main into your branch
git merge main

# Or rebase (cleaner history)
git rebase main

Staying Updated via CSS

git merge main - Bring main changes into branch
git rebase main - Replay commits on top of main
Regular updates - Minimize merge conflicts

Tip: Pull main and merge/rebase regularly. Don't let your branch get too stale.

15

Self-Assessment

Test your understanding of version control concepts.

Q1

What is the purpose of a commit?

Click to reveal

Q2

Why should you use branches instead of working directly on main?

Click to reveal

Q3

What makes a good commit message?

Click to reveal

Q4

What is a pull request and why is it important?

Click to reveal

Q5

How do you handle merge conflicts?

Click to reveal

Version Control

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Version Control in Practice

Common Failures

Version Control Mistakes

Visual Tests

Version Control Best Practices

Commit Message Audit

PR Size Check

Branch Hygiene

Review Participation

CSS Implementation

Git Commands Reference

Self-Assessment

Self-Assessment

Key Takeaways