Tools & Cloud Collaboration 45 min interactive guide🚀 Live GitHub UI & PR Simulator

GitHub: Cloud Collaboration & Pull Requests

Master GitHub for modern software engineering. Learn cloud repository management, cloning, branch synchronization, opening and reviewing Pull Requests (PRs), managing Issues, forks, GitHub Actions CI/CD, and GitHub Pages deployment.

01

1. What Is GitHub?

GitHubis the world's leading cloud hosting platform for software development and version control using Git. It provides a web interface where millions of developers store code repositories, review pull requests, report bugs with issues, and automate CI/CD pipelines.

💡 Core Mental Model: Git is your local version control engine; GitHub is the online social network and collaboration hub where your Git repositories live and thrive.
02

2. Git vs GitHub

DimensionGitGitHub
DefinitionCommand-line version control softwareCloud platform & collaboration hub
ExecutionRuns locally on your laptop / PCRuns in the cloud (web browsers & APIs)
Internet100% offline capableRequires internet to sync & review
Key PowerLocal snapshots, branches, diffsPull Requests, Code Review, CI/CD, Issues
03

3. Creating a GitHub Account & SSH Keys

Sign up on github.com. Set up an SSH Key or GitHub Personal Access Token (PAT) so your terminal can securely push code without typing your password every time:

# Generate SSH Key
ssh-keygen -t ed25519 -C "your.email@example.com"

# Copy public key and paste into GitHub Settings ➔ SSH Keys
cat ~/.ssh/id_ed25519.pub
04

4. Understanding a GitHub Repository Anatomy

README.md

The front door of your repo. Explains the project, installation, screenshots, and usage.

.gitignore

Lists files Git must NEVER track (e.g. .env, node_modules/, build artifacts).

LICENSE

Defines legal permissions (MIT = permissive, Apache 2.0 = patent grant, GPL = copyleft).

05

5. Creating and Managing a Repository

You can start by creating a repo on GitHub and cloning it, OR connecting an existing local repo:

# Option A: Clone a remote repository
git clone https://github.com/username/repo-name.git

# Option B: Link an existing local project to GitHub
git remote add origin https://github.com/username/repo-name.git
git branch -M main
git push -u origin main
06

6. Working With Remote Repositories

git push

Uploads local commits to the remote branch on GitHub.

git pull

Downloads remote changes and immediately merges them into your active branch.

git fetch

Downloads remote branches to local cache without modifying your working files.

07

7. Branches on GitHub

GitHub visually displays all active branches. You can set branch protection rules on main requiring PR approvals and passing CI tests before anyone can merge.

08

8. Pull Requests (PRs) & Code Review

The Pull Request (PR)is GitHub's most important feature. It allows engineers to inspect changes, discuss architecture, suggest specific line edits, and approve before code lands in production:

1. Create PR

Propose merging feature/login into main with a summary of changes.

2. Code Review

Teammates review diffs, leave comments, and request adjustments.

3. Merge & Deploy

Once approved & tests pass, merge with one click and delete the feature branch.

09

9. Issues, Labels & Project Tracking

Use GitHub Issues as your team's backlog. Add labels like bug, enhancement, good first issue, assign developers, and link issues directly to PRs by typing "Closes #12" in PR descriptions.

10

10. GitHub Collaboration & Open Source (Forks)

To contribute to an open-source project where you don't have write access:

# 1. Click 'Fork' on GitHub to create your copy
# 2. Clone your fork locally
git clone https://github.com/your-username/open-source-repo.git

# 3. Create feature branch, make commits, and push to your fork
git switch -c fix/typo
git commit -m "fix: correct typo in auth docs"
git push origin fix/typo

# 4. Open a Pull Request from your fork back to the upstream repo!
11

11. GitHub Actions (CI/CD Basics)

# .github/workflows/test.yml
name: Node CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && npm test
12

12. GitHub Pages (Free Web Hosting)

Host static frontends (HTML, CSS, JS, React/Vite builds) directly from your repository for free at https://username.github.io/repository-name under Repo Settings ➔ Pages.

13

13. GitHub Profile & Portfolio README

Create a repository with your exact username (e.g. username/username) with a special README.md to showcase your bio, tech stack badges, pinned repositories, and contribution activity graphs to recruiters.

14

14. A Complete Production GitHub Workflow

1. Assign an Issue (e.g. #42: Build User Profile)
2. git switch -c feature/42-user-profile
3. Write code, test locally, commit atomically
4. git push -u origin feature/42-user-profile
5. Open Pull Request on GitHub (link to "Closes #42")
6. CI automated checks pass (GitHub Actions)
7. Code Review by teammate ➔ Approved
8. Merge PR into main ➔ Auto-deploy to production!
15

15. Common GitHub Mistakes

  • Pushing secret API keys or credentials: Once pushed, commit history is public. Always use .env and .gitignore.
  • Creating massive 2,000-line Pull Requests: Keep PRs small (< 300 lines) so teammates can review them quickly.
  • Merging PRs with failing CI checks: Never bypass automated unit test failures.
  • Not writing PR descriptions: Always explain what changed and why.
16

16. GitHub Best Practices

  • Enable Branch Protection Rules on main (require 1 approval + green CI).
  • Use Conventional Commits & PR titles (e.g., feat:, fix:, docs:).
  • Keep your GitHub profile active with polished READMEs and pinned projects.
  • Delete merged feature branches to keep the repository clean.
LIVE INTERACTIVE LAB

GitHub UI & Workflow Simulator

Experience real GitHub collaboration! Walk through the complete developer journey from opening a Pull Request to code review, automated CI tests, merging, and tracking Issues.

1. Local Project
2. git push
3. GitHub Repo
4. Feature Branch
5. Pull Request
6. Code Review
7. Merge to main
pathubs-team / interactive-web-appPublic
Watch 12 Fork 34 Star 128
Code
Pull requests 1
Issues 3
Actions
Pull Request #101
feat: add user authentication form & validation
● Openpathubs-dev wants to merge 1 commit into main from feature/auth
📄 src/components/AuthForm.tsx (+14, -2)
@@ -12,4 +12,16 @@ export function AuthForm() {
- const [email, setEmail] = useState("");
+ const [email, setEmail] = useState("");
+ const [isValid, setIsValid] = useState(false);
+ const handleValidate = (val: string) => setIsValid(val.includes("@"));
All checks have passed
1 successful check (Node.js CI / test & lint)
🎯 GitHub Challenge 1 of 7✅ Completed!

Goal 1: Familiarize yourself with creating a repository structure on GitHub.

Challenge Completed! You demonstrated mastery of GitHub for Goal 1!
TEST YOUR KNOWLEDGE

GitHub Cloud Collaboration Mastery Quiz

8 scenario-based questions testing your understanding of GitHub repositories, Pull Requests, Code Reviews, Issues, Forks, Actions CI/CD, and Pages deployment.

Question 1 of 8Score: 0 / 8
🌐 What is the fundamental relationship between Git and GitHub?