WELCOME
Slide of 38
MODULE 02 • CLOUD COLLABORATION

GitHub
Cloud Repositories & Collaboration

“Host, share, and collaborate on code anywhere in the world”

Learn how to publish local Git projects to GitHub, push commits, pull updates, and collaborate seamlessly with teams.
or press Space / →
GitHub Repository Verified View
Verified GitHub Project
OVERVIEW

What Is GitHub & Why Do We Need It?

Distinguishing between your local machine tool and the world's largest code platform

01 Git (Local Machine)

Git runs on your personal computer. It tracks file revisions, commits, and branches completely offline without requiring internet access.

Local git protects your work locally on one machine.

02 GitHub (Cloud Platform)

GitHub is a cloud service that hosts Git repositories online. It enables team collaboration, code reviews, issue tracking, continuous integration, and portfolio showcase.

GitHub allows anyone on your team to clone, review, and contribute to your repository.
Slide 14 — Part 6: Create GitHub Repository

Create a GitHub Account

Your online profile and repository host

github.com

Getting Started on GitHub

To push your local Git repository to the cloud, you need a free GitHub account.

  • 1 Visit https://github.com
  • 2 Click Sign up
  • 3 Enter your email, create a secure password, and pick a username
  • 4 Verify your email address
Use the same email address you configured earlier in git config user.email so your commits connect to your GitHub avatar.

The World's Leading Developer Platform

Over 100 million developers store, collaborate on, and publish open-source and private software on GitHub.

Slide 15 — Part 6: Create GitHub Repository

Create a New GitHub Repository

Setting up the empty cloud destination for your project

New Remote Repo

5 Steps on GitHub.com

  • 1 Log into GitHub and click the + icon in the top right
  • 2 Select New repository
  • 3 Enter Repository name: my-project
  • 4 Choose Public (viewable by anyone) or Private
  • 5 Click Create repository
GitHub UI Mockup: Creating a new repository
GitHub UI: Creating "my-project" Real UI Example
CRITICAL BEGINNER TIP:
Do NOT check "Add a README file", ".gitignore", or "license" if your local folder already has files!
Slide 16 — Part 7: Connect Local Git to GitHub

Add GitHub Remote

Teaching your local repository the URL of your GitHub repository

Local Remote Link
Terminal: Connect Remote
$ git remote add origin https://github.com/USERNAME/my-project.git
$ git remote -v
origin https://github.com/USERNAME/my-project.git (fetch) origin https://github.com/USERNAME/my-project.git (push)

Anatomy of the Command

  • git remote: Manage remote connections
  • add: Register a new remote
  • origin: Standard default nickname for the primary remote
  • URL: The web address of your GitHub repository
git remote -v (verbose) lists all connected remotes and verifies the link.
Slide 17 — Part 7: Connect Local Git to GitHub

HTTPS vs SSH

Understanding the two common connection protocols

Protocols

HTTPS (Recommended for Beginners)

https://github.com/USERNAME/my-project.git
  • Works immediately out of the box
  • No complex key generation required
  • Authenticates via GitHub Personal Access Token (PAT) or Git Credential Manager browser login

SSH (Advanced / Experienced Devs)

git@github.com:USERNAME/my-project.git
  • Passwordless authentication via cryptographic keypairs
  • Preferred by developers for automated terminal workflow
  • Requires generating SSH keys and adding them to GitHub settings first
Slide 18 — Part 8: First Push

Rename Branch to main

Standardizing your primary branch name to match modern GitHub

Branch Configuration
Terminal: Rename Branch
$ git branch -M main
-M stands for "Move/Rename with Force". It renames your current branch to main regardless of what it was named before.

Why main?

Historically, Git defaulted to calling the first branch master. In 2020, GitHub and the open-source community transitioned to main as the official, modern industry standard default branch name.

Running git branch -M main ensures your local repository and GitHub's default branch name align seamlessly.

Slide 19 — Part 8: First Push

Push to GitHub

The pivotal command: uploading your local commits to the cloud

The Big Moment
Terminal: Push
$ git push -u origin main
Enumerating objects: 3, done. Counting objects: 100% (3/3), done. Writing objects: 100% (3/3), 220 bytes | 220.00 KiB/s, done. Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 To https://github.com/USERNAME/my-project.git * [new branch] main -> main branch 'main' set up to track 'origin/main'.

Command Breakdown

  • git: Git CLI application
  • push: Upload local commits to remote
  • -u: Set upstream (remembers remote branch for future simple git push)
  • origin: Target remote server nickname
  • main: Local branch to upload
Local Repo Your computer
git push
GitHub Remote Repo
Slide 20 — Part 8: First Push

Verify on GitHub

Seeing your code live on the web

Success Check

Verification Steps

  • Open your browser and navigate to your repository URL
  • Refresh the webpage
  • README.md is visible and rendered cleanly
  • Commit history shows 1 commit: "Initial commit"
  • Default branch shows main
Verified GitHub Repository View
GitHub UI: Verified "my-project" Live on GitHub
Slide 21 — Part 9: Making Future Changes

The Everyday Git Workflow

The four commands developers execute dozens of times every single day

Core Loop
The Daily 4-Step Cycle
1. git status
Inspect what files changed
2. git add .
Stage all modified and new files
3. git commit -m "Describe your changes"
Record snapshot with a clear message
4. git push
Upload new commit to GitHub!

Why Memorize This Loop?

Whether you are building a small personal website or working at a tech giant with 10,000 engineers, this 4-step sequence is the heart of everyday version control.

Because you used -u earlier, you only need to type git push without specifying remote and branch names every time!
Slide 22 — Part 9: Making Future Changes

Example: Modify a Project

A real-world walkthrough of editing code and pushing updates

End-to-End Walkthrough
Terminal Walkthrough
$ echo "Hello GitHub" >> README.md
$ git status
modified: README.md
$ git add .
$ git commit -m "Update README"
[main 3c4d5e6] Update README
$ git push
1. Edit CodeREADME.md modified
↓
2. Check Statusgit status
↓
3. Stage Filegit add .
↓
4. Commit Snapshotgit commit -m "..."
↓
5. Push to GitHubgit push
Slide 23 — Part 10: Clone an Existing Project

Clone a Repository

Downloading an existing repository and its full history from GitHub

Remote Local
Terminal: Clone
$ git clone https://github.com/USERNAME/my-project.git
Cloning into 'my-project'... remote: Enumerating objects: 6, done. remote: Total 6 (delta 0), reused 6 (delta 0) Receiving objects: 100% (6/6), done.
$ cd my-project

What Does git clone Do?

clone = download a Git repository and its complete commit history to your computer.

  • Creates a new folder matching the repository name
  • Downloads all project files and branches
  • Automatically sets up origin remote linking back to GitHub
  • You do NOT need to run git init!
Slide 24 — Part 10: Clone an Existing Project

Pull Changes

Syncing your local workspace with updates made by teammates or other machines

Remote Local
Terminal: Pull
$ git pull
Updating a1b2c3d..e7f8g9h Fast-forward README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-)
GitHub New commits
git pull
Your Computer Updated working tree

Push vs Pull Direction

git push Uploads: Local Remote
git pull Downloads: Remote Local
Always run git pull before starting work on a team project to avoid conflicting commits!
Slide 29 — Part 13: Common Mistakes

Mistake: Wrong Remote URL

Fixing typos in repository URLs without deleting the repository

Common Pitfall #2
Check Current URL
$ git remote -v
origin https://github.com/WRONG-USER/wrong-repo.git (fetch) origin https://github.com/WRONG-USER/wrong-repo.git (push)
Fix with set-url
$ git remote set-url origin https://github.com/USERNAME/REPOSITORY.git

Why Not git remote add?

If you try running git remote add origin ... again when origin already exists, Git will error: fatal: remote origin already exists.

Use git remote set-url origin <new-url> to safely update the existing origin URL.

Slide 30 — Part 13: Common Mistakes

Mistake: Push Rejected

Understanding non-fast-forward rejections and why never to force push

Common Pitfall #3
Push Rejected Error
$ git push
! [rejected] main -> main (fetch first) error: failed to push some refs to 'https://github.com/...' hint: Updates were rejected because the remote contains work that you do not have locally.
The Solution: Pull First
$ git pull
$ git push
DO NOT BLINDLY USE:
git push --force
Force push overwrites and deletes the remote history on GitHub, potentially destroying work done by teammates!

Common Causes

  • A teammate pushed new commits to GitHub
  • The GitHub repo was created with an extra README/license
  • Running git pull merges remote changes into local first so you can push cleanly
Slide 33 — Part 15: Complete Workflow

From Zero to GitHub

The complete master script from an empty terminal to your first pushed project

Master Recipe
The Complete Sequence
$mkdir my-project && cd my-project
$git init
$git add .
$git commit -m "Initial commit"
$git branch -M main
$git remote add origin https://github.com/USER/my-project.git
$git push -u origin main

What Each Stage Accomplished

  • Folder created and entered
  • Git initialized locally
  • Files staged and committed into local history
  • Branch renamed to main
  • Remote origin configured to GitHub
  • Commits uploaded live to the web
Slide 36 — Part 16: Hands-on Exercise

Final Challenge

Practice the everyday cycle completely independently

Challenge

8-Step Challenge

  • 1 Create a new file (e.g. app.js or index.html)
  • 2 Modify README.md to add a project description
  • 3 Run git status to see modified & untracked files
  • 4 Stage the changes with git add .
  • 5 Commit with git commit -m "Add new changes"
  • 6 Push to GitHub with git push
  • 7 Refresh your GitHub repository in your web browser
  • 8 Verify your new commit and updated files appear!
Challenge Solution
$ git status
$ git add .
$ git commit -m "Add new changes"
$ git push
Everything up-to-date on GitHub!
Slide 38 — Wrap Up

Questions?

“Happy coding”

Congratulations

You just mastered version control basics!

You now know how to install Git, initialize a local project, stage, commit, create a GitHub repo, connect remotes, and push your code with confidence.

Next Steps to Explore

  • Practice feature branches and merging
  • Open your first Pull Request on GitHub
  • Explore open-source projects and contribute
Git & GitHub Mastery
Git & GitHub Mastery
Zero Hero