WELCOME
Slide of 38
DEVELOPER WORKSHOP

Git & GitHub
From Zero to Your First Push

“Learn version control step by step”

Practical, command-focused guide designed specifically for complete beginners.
or press Space / →
Git & GitHub Flow
Local Computer Git GitHub
Continuous Version Control & Cloud Collaboration
Workflow
Slide 02

What Are Git and GitHub?

Understanding the difference between the tool and the platform

Git ≠ GitHub

Git (The Tool)

Git is a version control system that runs locally on your computer. It tracks changes to files and allows developers to manage project history completely offline.

GitHub (The Cloud Platform)

GitHub is a cloud hosting service for Git repositories. It provides a web interface, team collaboration, code reviews, and remote backups.

The Relationship Diagram
Your Computer ↓ Git (Software) ↓ Local Repository (.git) ↓ GitHub (Online Cloud) ↓ Remote Repository (Origin)
Slide 03

Why Do We Need Git?

Solving the everyday chaos of software development

Problems vs Solutions

Life Without Git

  • Accidentally deleting working code with no undo
  • Losing earlier working versions permanently
  • Not knowing who broke a feature or when
  • Painful file naming madness:
project-final.zip
project-final2.zip
project-final-real.zip
project-final-real-final-v2.zip

Life With Git

  • Single clean folder: No duplicate zipped copies
  • Time machine: Jump to any commit in history
  • Detailed attribution: Every change has an author and timestamp
  • Safe experiments: Try features in isolated branches
  • Team harmony: Merge contributions smoothly
Git records exact line-by-line diffs of every file you choose to save.
Slide 04

Git Vocabulary

The essential glossary every developer uses daily

Core Terminology
Term Plain English Meaning Context
Repository A project folder tracked by Git containing your code and history Local or Remote
Commit A saved snapshot of staged changes with a unique ID and message Local
Branch An independent line of development to build features safely Local & Remote
Remote The version of your repository hosted on the internet (e.g. GitHub) Remote
Origin The default nickname Git gives to your main remote repository URL Remote
Push Upload your local commits to the remote repository on GitHub Local Remote
Pull Download and integrate new changes from the remote to your local machine Remote Local
Clone Download a full copy of an existing remote repository to a new local folder Remote New Local
Stage Prepare and mark specific files to be included in the next commit snapshot Local
Slide 05 — Part 1: Installation

Check if Git Is Installed

Verifying your terminal environment before starting

Local Terminal
Terminal
$ git --version
git version 2.43.0
If a version number (like git version 2.x.x) is printed, Git is successfully installed on your machine!

What If Git Is Not Installed?

If your terminal responds with command not found: git, download and install it for your operating system:

  • macOS: Run xcode-select --install or install via Homebrew: brew install git
  • Windows: Download from git-scm.com (includes Git Bash)
  • Linux (Ubuntu/Debian): sudo apt install git
Slide 06 — Part 1: Installation

Basic Git Configuration

Introducing yourself to Git so your commits are attributed to you

Identity Setup
Terminal Setup
$ git config --global user.name "Your Name"
$ git config --global user.email "you@example.com"
$ git config --global --list
user.name=Your Name user.email=you@example.com

Why Does Git Need This?

These values are stamped onto every commit you create as the commit author. Collaborators and GitHub use this email to associate commits with your GitHub profile.

Important Distinction:
Git local identity (name/email) and GitHub authentication (passwords/tokens/SSH keys) are related, but not the same thing.
Slide 07 — Part 2: Create a Project

Create a New Project

Setting up a fresh folder and initial files in the terminal

Local Workspace
Terminal
$ mkdir my-project
$ cd my-project
$ echo "# My Project" > README.md

Resulting Folder Structure

my-project/
└── README.md

What Just Happened?

  • mkdir creates a new empty folder named my-project
  • cd moves our terminal inside that directory
  • echo ... > README.md creates our first markdown file
Slide 08 — Part 2: Create a Project

Initialize Git

Transforming a standard folder into a version-controlled repository

git init
Terminal: my-project
$ git init
Initialized empty Git repository in /Users/username/my-project/.git/

The Hidden .git Directory

my-project/
├── .git/ (Hidden Git Database)
└── README.md
.git holds all branches, commit snapshots, and Git configuration. Never manually edit or delete this folder!
Slide 09 — Part 3: Check Project Status

git status

Your most important diagnostic command in Git

Inspection
Terminal: my-project
$ git status
On branch main No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) README.md nothing added to commit but untracked files present (use "git add" to track)

What Does Untracked Mean?

Untracked = Git sees the file, but it is not being tracked yet.

Any changes you make to an untracked file will not be recorded until you explicitly tell Git to track it using git add.

Whenever you are unsure of what to do next, run git status. Git usually prints helpful suggestions!
Slide 10 — Part 4: Staging

git add

Selecting and preparing files for the next snapshot

Staging Area
Stage Specific File
$ git add README.md
Stage All Files At Once
$ git add .
Working Directory Unstaged files
git add
Staging Area Ready to commit

Why Have a Staging Area?

Staging acts like a buffer. If you modified 5 files but only want 2 of them in this commit, staging allows you to craft precise, clean commits.

Slide 11 — Part 4: Staging

Check the Staged Changes

Verifying that files moved into the staging area

Status: Staged
Terminal: git status
$ git status
On branch main No commits yet Changes to be committed: (use "git rm --cached <file>..." to unstage) new file: README.md

Green Means Staged!

Notice the color change: README.md is now listed under Changes to be committed in bright green.

This confirms the file is successfully staged and waiting to be permanently captured by git commit.

If you make further edits to README.md now, the new edits won't be staged until you run git add again!
Slide 12 — Part 5: Commit

Create Your First Commit

Capturing a permanent snapshot of your staged files

git commit
Terminal: Commit
$ git commit -m "Initial commit"
[main (root-commit) a1b2c3d] Initial commit 1 file changed, 1 insertion(+) create mode 100644 README.md
The -m flag allows you to provide a short, descriptive commit message right from the command line.

The 3-Tier Local Git Pipeline

Working Directory Where you edit files
↓ git add
Staging Area Indexed changes
↓ git commit
Permanent Commit Saved in .git history
Slide 13 — Part 5: Commit

View Commit History

Browsing your project timeline with git log

git log
git log (Full View)
$ git log
commit a1b2c3d4e5f67890abcdef1234567890abcdef12 Author: Your Name <you@example.com> Date: Mon Oct 19 09:30:00 2026 +0700 Initial commit
git log --oneline (Compact View)
$ git log --oneline
a1b2c3d Initial commit

What Is a Commit Hash?

A commit hash (e.g. a1b2c3d) is a unique 40-character SHA-1 checksum that cryptographically identifies that exact snapshot and state in time.

You only need the first 7 characters to reference any commit in Git commands.

Slide 25 — Part 11: Branches

What Is a Branch?

Creating isolated sandboxes for new features without breaking production

Branching
main feature
Branches let you work on experimental code without disturbing the stable main branch.

Why Developers Use Branches

  • New features: Develop isolated features without breaking existing code
  • Bug fixes: Patch urgent bugs quickly without mixing unfinished work
  • Experiments: Try radical code changes; delete the branch if it fails
  • Team development: Multiple engineers build features concurrently without stepping on toes
Slide 26 — Part 11: Branches

Create and Switch Branch

Modern branch management syntax in Git

git switch
Modern Syntax (Recommended)
$ git switch -c feature/login
Switched to a new branch 'feature/login'
$ git switch main
Switched to branch 'main'

Older Equivalent Command

In older tutorials or blog posts, you will often see:

git checkout -b feature/login

git checkout had too many conflicting responsibilities (switching branches AND discarding file changes). Git introduced git switch in version 2.23 to be dedicated, clear, and beginner-friendly.

Slide 27 — Part 12: Cheat Sheet

Git Command Cheat Sheet

Quick reference of the most vital commands

Cheat Sheet
Command Purpose Where It Operates
git init Initialize a new local repository Local
git status Inspect working directory and staged file changes Local
git add . Stage all current changes for the next commit Local
git commit -m "msg" Save a permanent snapshot of staged files Local
git push Upload commits to remote GitHub repository Local Remote
git pull Download and merge changes from GitHub to local Remote Local
git clone URL Download an entire existing repository locally Remote Local
git log View commit history timeline Local
git branch List all local branches Local
git switch <branch> Switch to an existing branch Local
git remote -v View all configured remote repository URLs Remote
Slide 28 — Part 13: Common Mistakes

Mistake: Forgetting to Commit

Why running git add then git push doesn't upload your changes

Common Pitfall #1
The Mistake
$ git add .
$ git push
Everything up-to-date
git push only uploads commits! Staged files that are not committed yet will never be pushed.
The Correct Flow
$ git add .
$ git commit -m "Update project"
$ git push
To https://github.com/... a1b2c3d..d4e5f6g main -> main
Slide 31 — Part 14: .gitignore

What Is .gitignore?

Preventing junk, generated files, and secrets from entering your repository

Clean Repositories
Example .gitignore File
node_modules/ .env .next/ dist/ *.log .DS_Store

Why Is This Essential?

A .gitignore file is placed in the root of your project. Git will intentionally never track files matching these patterns.

NEVER COMMIT SECRETS:
Files like .env containing API keys, database passwords, or auth tokens must always be in .gitignore.
Slide 32 — Part 14: .gitignore

Example Project Structure

Visualizing what gets tracked vs what stays local

Folder Layout
my-project/
├── .git/ (Internal database - stays local)
├── .gitignore (Pushed to GitHub)
├── README.md (Pushed to GitHub)
├── package.json (Pushed to GitHub)
├── src/ (Pushed to GitHub)
└── node_modules/ (IGNORED: Stays local)

Why Is node_modules/ Ignored?

In Node.js projects, node_modules/ can contain hundreds of thousands of downloaded package files and weigh gigabytes.

Anyone cloning your repository can reproduce the entire folder instantly by running pnpm install using the committed package.json.

Slide 34 — Part 15: Complete Workflow

The Mental Model

The four architectural layers of Git and how data travels between them

Core Architecture
GitHub (Remote Repository)
Hosted in the cloud on github.com
Remote
▲ git push (Upload)  |  ▼ git pull (Download)
Local Repository (.git)
Full commit history on your disk
Local
▲ git commit
Staging Area (Index)
Selected changes ready for next commit
Buffer
▲ git add
Working Directory
Actual files you see and edit in your IDE
Workspace

Why This Mental Model Matters

When you understand these 4 distinct layers, Git errors stop being mysterious.

You always know:

  • Where your changes currently live
  • Which command moves them to the next level
  • Whether a change is local or shared remotely
Slide 35 — Part 16: Hands-on Exercise

Your First GitHub Project

A step-by-step practical drill for every student

Hands-on Lab

Exercise Objective

Create a project called hello-git and publish it to your GitHub profile.

1 Create folder hello-git and enter it
2 Create README.md containing # Hello Git
3 Run git init
4 Stage and commit: git add . & git commit -m "Initial commit"
5 Create empty GitHub repository named hello-git
6 Rename branch, add remote, and push with -u origin main
Exercise Commands
$mkdir hello-git && cd hello-git
$echo "# Hello Git" > README.md
$git init
$git add .
$git commit -m "Initial commit"
$git branch -M main
$git remote add origin https://github.com/USER/hello-git.git
$git push -u origin main
Slide 37 — Wrap Up

Final Summary

The foundational principles to carry forward in your developer journey

Key Takeaways

Git

Tracks your project history, snapshots, and branches locally on your computer.

GitHub

Hosts your Git repositories online, enabling cloud backup, sharing, and team collaboration.

“If you understand this workflow, you already understand the foundation of Git.”

The Core Workflow

Edit CodeIn your IDE
↓
git statusCheck changes
↓
git add .Stage changes
↓
git commit -m "..."Save snapshot
↓
git push Upload to 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