Collaborative Development with Git & GitHub
Git & GitHub Collaboration
Course Overview
An introductory lecture for those newly curious about open source. We look at Git Flow — a proven branching strategy — visually through Sourcetree (a UI tool), and see how it pairs with AI code generators (Claude Code), all in one flow.
This lecture is demonstration-based. The instructor shares their screen and walks through a full cycle, while participants observe the flow and the behavior of the tools. Hands-on practice — where you push PRs yourself — is covered in a separate course.
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#e3f2fd','primaryBorderColor':'#90caf9','lineColor':'#546e7a','textColor':'#333','mainBkg':'#fafafa','nodeBorder':'#90a4ae','clusterBkg':'#f5f5f5','clusterBorder':'#bdbdbd'}}}%%
flowchart LR
subgraph Solo["Solo work"]
S1["local\nfile"] --> S2["edit"] --> S3["save"]
end
subgraph Team["Team work"]
C1["main"] --> C2["develop"] --> C3["feature"]
C3 --> C4["PR\nreview"] --> C5["deploy"]
end
Solo -- "evolves with Git Flow" --> Team
style S1 fill:#bbdefb,stroke:#1976d2,stroke-width:2px,rx:10,ry:10
style S2 fill:#eceff1,stroke:#546e7a,stroke-width:2px,rx:10,ry:10
style S3 fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,rx:10,ry:10
style C1 fill:#bbdefb,stroke:#1976d2,stroke-width:2px,rx:10,ry:10
style C2 fill:#bbdefb,stroke:#1976d2,stroke-width:2px,rx:10,ry:10
style C3 fill:#fff9c4,stroke:#f9a825,stroke-width:2px,rx:10,ry:10
style C4 fill:#fff9c4,stroke:#f9a825,stroke-width:2px,rx:10,ry:10
style C5 fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,rx:10,ry:10
style Solo rx:15,ry:15
style Team rx:15,ry:15
Course Flow
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#e3f2fd','primaryBorderColor':'#90caf9','lineColor':'#546e7a','textColor':'#333','mainBkg':'#fafafa','nodeBorder':'#90a4ae','clusterBkg':'#f5f5f5','clusterBorder':'#bdbdbd'}}}%%
flowchart LR
subgraph Phase1["Phase 1 — Fundamentals"]
direction TB
P1["Part 1\nGit & GitHub basics"]
P2["Part 2\nSourcetree intro"]
P1 --> P2
end
subgraph Phase2["Phase 2 — Git Flow"]
direction TB
P3["Part 3\nGit Flow concepts"]
P4["Part 4\nSourcetree's\nGit Flow menu"]
P5["Part 5\nPR & code review"]
P3 --> P4 --> P5
end
subgraph Phase3["Phase 3 — AI · Open Source"]
direction TB
P6["Part 6\nAI code generators\nand Git Flow"]
P7["Part 7\nDemo: Claude Code +\nGit Flow timer"]
P8["Part 8\nOpen source\ncontribution"]
P6 --> P7 --> P8
end
Phase1 --> Phase2 --> Phase3
style P1 fill:#e3f2fd,stroke:#90caf9,stroke-width:2px,rx:10,ry:10
style P2 fill:#e3f2fd,stroke:#90caf9,stroke-width:2px,rx:10,ry:10
style P3 fill:#fff9c4,stroke:#f9a825,stroke-width:2px,rx:10,ry:10
style P4 fill:#fff9c4,stroke:#f9a825,stroke-width:2px,rx:10,ry:10
style P5 fill:#fff9c4,stroke:#f9a825,stroke-width:2px,rx:10,ry:10
style P6 fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,rx:10,ry:10
style P7 fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,rx:10,ry:10
style P8 fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,rx:10,ry:10
style Phase1 rx:15,ry:15
style Phase2 rx:15,ry:15
style Phase3 rx:15,ry:15
Git Flow Branch Model
%%{init: { 'gitGraph': {'mainBranchName':'main'}, 'themeVariables': {'git0':'#1976d2','git1':'#388e3c','git2':'#f9a825','git3':'#d32f2f','git4':'#7b1fa2'}}}%%
gitGraph
commit id: "init"
branch develop
commit id: "dev start"
branch feature/timer
commit id: "timer skeleton"
commit id: "start/pause/reset"
checkout develop
merge feature/timer
branch release/0.1.0
commit id: "prepare release"
checkout main
merge release/0.1.0 tag: "v0.1.0"
checkout develop
merge release/0.1.0
checkout main
branch hotfix/critical
commit id: "fix bug"
checkout main
merge hotfix/critical tag: "v0.1.1"
checkout develop
merge hotfix/critical
Learning Objectives
- Understand the core concepts of Git and GitHub from a collaboration perspective
- See how Git commands map to visual operations in Sourcetree
- Grasp the roles and flow of Git Flow’s five branches (main, develop, feature, release, hotfix)
- Observe how Pull Requests and code reviews operate within a collaboration cycle, through demonstration
- Watch how AI code generators (Claude Code) combine with Git Flow in a modern development workflow
- Build a mental picture of the full open source contribution process
Target Audience · Prerequisites
| Target Audience | Prerequisites |
|---|---|
| Students / junior developers wanting a bird’s-eye view of Git/GitHub collaboration | Basic terminal/CLI experience (optional) |
| Junior developers or team leads curious about the big picture of Git Flow | Experience writing code in at least one language |
| Anyone curious about the full open source contribution process | Prior Git/GitHub experience not required |
| Anyone wanting to see how AI code generators fit with collaboration workflows | Prior AI code generator experience not required |
Demonstration Environment
| Item | Setup |
|---|---|
| Device | MacBook or Windows laptop |
| Primary GUI tool | Sourcetree (built-in Git Flow support) |
| Secondary CLI tool | Git commands (for concept comparison) |
| AI code generator | Claude Code |
| Collaboration platform | GitHub (account required) |
| Demo project | A simple timer web app (HTML/JS) |
Course Structure
Part 1 — Git & GitHub Fundamentals
- What Git is: a distributed version control system that records and reverts changes
- Core concepts: Working Directory / Staging Area / Repository; commits, branches, remotes
- Creating a GitHub account and your first repository
- One full command loop:
clone → add → commit → push → pull - Touring the GitHub web UI: Repository / Issues / Pull Requests / Actions
Part 2 — Sourcetree Intro
- Why use a GUI: branches and merges become much easier to grasp as a graph
- Installation, connecting your GitHub account, cloning a repository
- Following along in Sourcetree: commits, branches, push/pull, stash
- A 1:1 mapping table between CLI commands and the GUI
- Try the same operation in both CLI and GUI
Part 3 — Understanding the Git Flow Workflow
- What is Git Flow? A branching strategy proposed by Vincent Driessen
- The roles of the five branches:
- main — always-deployable, stable
- develop — integration branch for the next release
- feature/* — new feature development
- release/* — release preparation
- hotfix/* — emergency fixes on main
- Branching and merging rules — which branch flows into which
- Git Flow vs GitHub Flow — choosing between long release cycles and rapid deployment (Trunk-based mentioned briefly)
- Why Git Flow is common in open source projects
Part 4 — Sourcetree’s Git Flow Menu
- Where Sourcetree’s built-in Git Flow functions live in the menu
git flow init/feature start|finish/release start|finish/hotfix start|finish— what Git commands each menu item bundles together- One menu click = executing “Vincent Driessen’s standard flow” as-is
- The full end-to-end cycle is demonstrated in Part 7, alongside Claude Code
Part 5 — Pull Requests and Code Review
- What a Pull Request really means: “please merge my branch” + “please review it”
- What makes a good PR: small size, clear title and description, meaningful commit units
- The code review loop: inline comments, change requests, approval, Resolve
- Resolving merge conflicts visually in Sourcetree
- Merge vs Rebase vs Squash — choosing your merge strategy
Part 6 — AI Code Generators and Git Flow
- Development workflow in the era of AI code generators (Claude Code, Copilot, Cursor, …)
- Why Git Flow remains valuable in the AI era:
feature/*= a task unit that fits one AI session- PR = a natural gate where humans review AI-generated code
release/*= a checkpoint that re-validates accumulated AI changeshotfix/*= a fast path to revert regressions introduced by AI
- What to watch for when reviewing AI-generated code (hallucinations, licensing, security)
- Delegating commit messages and PR descriptions to AI — and the limits of doing so
Part 7 — Demo: Building a Timer App with Claude Code + Git Flow
The instructor walks through the full cycle from an empty repo to deployment via screen share.
- Create an empty repo → clone it in Sourcetree
- Git Flow init (auto-creates
developandmain) - Start
feature/timer— click through the Sourcetree Git Flow menu - Implement with Claude Code:
- Build Start / Pause / Reset features
- Demonstrate asking Claude Code in small task units
- Split work into meaningful commits — visualize them in the Sourcetree graph
- Push → open a Pull Request on GitHub — tour the PR and review interface
- Merge → create
release/0.1.0→ tag → deploy tomain - Intentionally introduce a bug to demonstrate the
hotfix/...flow
Part 8 — Open Source Contribution Walkthrough
- Understanding open source culture: licenses, CONTRIBUTING.md, Code of Conduct
- How to find a good first issue
- Walking through a real repository to see the Fork → Branch → PR contribution flow
- Etiquette when communicating with maintainers (waiting for reviews, addressing change requests)
- What to watch out for when contributing AI-generated code (licensing, disclosure, review responsibility)
Teaching Method
- Format: Offline in-person session or Zoom (approx. 2 hours)
- Demo-based: The instructor shares their screen and walks through a full cycle live
- UI-focused: Sourcetree as the visual driver; CLI shown only for comparison
- AI demo: A combined Claude Code + Git Flow timer app demonstration (Part 7)
- No paid services: All tools used are open source or free
- Code shared: Demo code and step-by-step commit history published in a GitHub repository
- Q&A: Free questions during the lecture, plus a dedicated 15-minute Q&A at the end
- Hands-on practice is a separate course: A follow-up course covers following along and pushing your own PRs with code review
Key Takeaways
| Part | Key takeaway |
|---|---|
| Part 1 | Git provides “a history of change”; GitHub provides “a place to collaborate” |
| Part 2 | Seeing branches as a graph in Sourcetree quickly cements your mental model of Git |
| Part 3 | Git Flow’s five branches separate stability, integration, development, release, and emergencies into distinct timelines |
| Part 4 | Sourcetree’s Git Flow menu reduces complex command sequences to a single click |
| Part 5 | Good PRs and good reviews are the heart of good collaboration — deliver context before code |
| Part 6 | AI code generators land most safely on top of Git Flow’s feature/PR/release structure |
| Part 7 | Watching the full Claude Code + Git Flow cycle play out builds intuition for collaboration |
| Part 8 | First open source contributions start not with “code” but with “context and conversation” |
Contact
For course schedule and pricing inquiries, please reach out via email.