Git & GitHub Student Workflow

Every student at Tech Minds Academy uses Git and GitHub starting in Week 1. Whether you are building your very first 'About Me' web page in HTML Mastery, training a model in Python, Data Science & ML, or shipping microservices in Node.js & Backend Dev, version control is non-negotiable.

---

Why Git & GitHub From Week 1?

Beginners without version control end up with folders that look like this:

• capstone-project.zip
• capstone-project-final.zip
• capstone-project-final-REAL-2am.zip

Professional engineers never work that way. Understanding the difference between Git and GitHub makes everything click:

• Git is a free tool installed locally on your laptop that records snapshots ("commits") of your project over time. Even if your internet goes down in Abuja for six hours, you can make 20 local Git commits offline and roll back mistakes at any second.
• GitHub (github.com) is the cloud platform where you push your Git repositories to back up your code, receive line-by-line code reviews from Tech Minds mentors, host static websites free via GitHub Pages, and build a public engineering portfolio that employers inspect before interviewing you.

IMPORTANT

When recruiters evaluate junior developers, a 6-month GitHub contribution graph showing steady weekly projects, clean README.md documentation, and meaningful commit messages speaks louder than any bullet point on a CV.

---

1. First-Time Configuration (Do This Once Per Laptop)

Make sure you have installed Git via our Developer Environment Setup Guide and created a free account at github.com using a professional username (e.g., amina-bello or chinedu-okeke-dev).

Step 1: Set Your Identity & Default Branch

Open your terminal (PowerShell on Windows, Terminal on macOS/Linux) and run these commands — replacing the name and email with your real name and the exact email registered on your GitHub account:

git config --global user.name "Amina Bello"
git config --global user.email "amina.bello@example.com"
git config --global init.defaultBranch main

Windows students should also prevent cross-platform line-ending warnings (CRLF vs LF):

# Run on Windows:
git config --global core.autocrlf true

# Run on macOS / Linux / WSL2:
git config --global core.autocrlf input

Verify your configuration:

git config --list

Step 2: Authenticate With GitHub (GitHub CLI or SSH Key)

GitHub no longer accepts your normal account password when running git push in the terminal. Choose one of these two official authentication methods:

Option A: GitHub CLI (gh auth login) — Fastest for Beginners

1. Install GitHub CLI:
   • Windows: winget install --id GitHub.cli
   • macOS: brew install gh
   • Ubuntu/WSL2: sudo apt install -y gh
2. Restart your terminal and run:

   gh auth login

3. Select GitHub.com -> HTTPS -> Yes (Authenticate Git with your GitHub credentials) -> Login with a web browser, copy the one-time 8-character code shown in your terminal, press Enter, and authorize in Chrome. Done!

Option B: SSH Keys — Industry Standard for All OSes

1. Generate a modern ed25519 SSH key pair:

   ssh-keygen -t ed25519 -C "amina.bello@example.com"

   Press Enter three times to accept the default file location (~/.ssh/id_ed25519) and optional passphrase.
2. Print your public key (never share the private key without .pub!):

   cat ~/.ssh/id_ed25519.pub

3. Copy the entire output line starting with ssh-ed25519 ..., go to GitHub -> Settings -> SSH and GPG keys -> New SSH key, give it a title like "Tech Minds Laptop", and save.
4. Test your connection:

   ssh -T git@github.com
   # Expected: Hi amina-bello! You've successfully authenticated...

---

2. Understanding the Three Git Areas

Every file in a Git project moves through three zones:

  Working Directory  ──(git add)──►  Staging Area  ──(git commit)──►  Local Repository  ──(git push)──►  GitHub Remote
  (Files in VS Code)                 (Ready box)                      (.git history)                     (Cloud backup)

1. Working Directory: The files you are actively editing and saving in VS Code.
2. Staging Area (Index): A preparation zone where you choose which modified files belong together in your next snapshot (git add).
3. Repository (.git): Permanent, timestamped history snapshots saved locally (git commit) and synced to GitHub (git push).

---

3. Core Daily Student Workflow

Here are the exact commands you will run every week at Tech Minds Academy.

Starting a Brand-New Weekly Project (git init)

Suppose you just finished building Week 1's 'About Me' project on your laptop and created an empty repository named techminds-html-week-01 on GitHub (without checking "Add a README" on GitHub yet):

# 1. Navigate into your project folder
cd ~/techminds-projects/html-mastery/week-01-about-me

# 2. Initialize a new local Git repository
git init

# 3. Check the status of your files (run this constantly!)
git status

# 4. Stage all files in the current directory
git add .

# 5. Record your first snapshot with a clear commit message
git commit -m "Add semantic About Me page and project README"

# 6. Link your local folder to your GitHub repository URL
git remote add origin https://github.com/amina-bello/techminds-html-week-01.git

# 7. Push your main branch to GitHub (the -u flag remembers origin/main for next time)
git push -u origin main

From now on, whenever you improve that project, your daily 3-step save loop is simply:

git status
git add .
git commit -m "Add profile photo with descriptive alt text"
git push

Downloading an Existing Repository (git clone & git pull)

If a mentor shares a starter lab repository, or you switch computers at the Bwari campus lab:

# Download a repository onto your computer once
git clone https://github.com/amina-bello/techminds-html-week-01.git
cd techminds-html-week-01

# Pull the latest commits down from GitHub before starting new edits
git pull

Writing Good Commit Messages

Your commit history tells the story of how you built your project. Start every message with an imperative action verb (Add, Fix, Update, Refactor, Remove) under ~60 characters:

Bad Commit Messages (Avoid!)	Good Tech Minds Commit Messages
git commit -m "update"	git commit -m "Add responsive Flexbox navbar to all 4 pages"
git commit -m "asdfghjkl"	git commit -m "Fix W3C validation error on contact form labels"
git commit -m "final changes"	git commit -m "Extract colour palette into CSS custom properties"
git commit -m "fixed bug"	git commit -m "Handle empty search input in weather API fetch"

---

4. Branching & Pull Requests for Mentor Review

Starting in Stage 2 of our engineering tracks — and throughout every Capstone Project — you will protect your main branch so main always contains clean, working code, while building new features on dedicated branches.

Step-by-Step Feature Branch Workflow

# 1. Make sure you are on main and up to date
git switch main
git pull

# 2. Create and switch to a descriptive feature branch
git switch -c feature/contact-form-validation

# 3. Write your code in VS Code, test in Chrome, then stage & commit
git status
git add index.html contact.html styles/main.css
git commit -m "Build accessible contact form with HTML5 validation"

# 4. Push your feature branch to GitHub
git push -u origin feature/contact-form-validation

Opening a Pull Request (PR) for Mentor Review

1. Open your repository on GitHub.com — you will see a yellow banner saying feature/contact-form-validation had recent pushes with a green Compare & pull request button. Click it.
2. Write a short summary of what you built, how you tested it (e.g., "Validated with W3C HTML Validator — 0 errors; tested at 375px and 1280px"), and paste a screenshot if visual.
3. Share the Pull Request link in your cohort submission portal or review channel.
4. Your Tech Minds mentor leaves inline comments on specific lines of code. If changes are requested, simply edit the files locally on that same branch, run git add ., git commit -m "Address review feedback", and git push — the Pull Request updates automatically!
5. Once approved, click Merge pull request on GitHub (or merge locally via git switch main && git merge feature/contact-form-validation), then pull the clean main branch locally:

   git switch main
   git pull

---

5. Undoing Mistakes Safely

Every engineer makes mistakes — staging the wrong file, breaking a layout experiment, or typo-ing a commit message. Git gives you safe undo buttons as long as you choose the right tool:

Case 1: Discard Unsaved/Uncommitted Edits in a Single File (git restore)

You experimented with styles.css, broke the layout, have not committed yet, and want styles.css back to how it looked at your last commit:

git restore styles.css

Case 2: Unstage a File You Added by Accident (git restore --staged)

You ran git add . and realized you accidentally staged a draft notes file, without wanting to delete your edits:

git restore --staged draft-notes.txt

Case 3: Undo Your Last Commit While Keeping All Your Code (git reset --soft)

You just ran git commit -m "..." locally (before pushing) and realized you forgot to save one file or committed on the wrong branch:

git reset --soft HEAD~1

Your commit is undone, and 100% of your code changes remain safely staged in VS Code!

Why You Must Be Extra Careful With git reset --hard

Destructive Command Warning: git reset --hard

Running git reset --hard permanently wipes out all uncommitted changes in your Working Directory and Staging Area with no Recycle Bin.

• Always run git status and git diff first before touching git reset --hard.
• If you want to set unfinished changes aside temporarily without losing them, use git stash instead (and bring them back later with git stash pop).
• Never rewrite history (git push --force) on main or shared branches.

---

6. .gitignore Best Practices (Protecting Secrets & Bandwidth)

Some files must never be committed to GitHub:

1. Secret API keys, database passwords, and JWT secrets (.env): Bots scrape public GitHub repositories within seconds for leaked OpenAI, AWS, or database credentials!
2. Heavy dependency folders (node_modules/, .venv/): A single node_modules/ folder can contain 40,000 files (300 MB). Committing it wastes your mobile data and breaks cross-OS builds. Simply commit package.json and pnpm-lock.yaml / package-lock.json instead.
3. OS junk files (.DS_Store, Thumbs.db).

Create a file named exactly .gitignore in the root of every project before your first git add .:

# Environment variables & secrets — NEVER COMMIT!
.env
.env.local
.env.*.local

# Node.js dependencies & build output
node_modules/
dist/
build/

# Python virtual environments & cache
.venv/
venv/
__pycache__/
*.pyc

# Operating system & editor clutter
.DS_Store
Thumbs.db
*.log

What if you already committed .env or node_modules/ by mistake? Adding a file to .gitignore later does not untrack an already-tracked file until you remove it from Git's index (while keeping it on your laptop disk):

# Untrack from Git while keeping the file on your computer
git rm -r --cached node_modules
git rm --cached .env
git commit -m "Stop tracking node_modules and .env"
git push

(Note: If you ever push a real API key in .env to a public repo, immediately revoke/rotate that API key in the provider dashboard first!)

---

7. Free Live Hosting: GitHub Pages & Vercel

Code sitting only on localhost:5500 cannot be shared on WhatsApp, LinkedIn, or your CV. Every Tech Minds student deploys live public URLs for free.

Deploying Static HTML & CSS Sites With GitHub Pages

Used in HTML Mastery and CSS Mastery:

1. Ensure your home page is named index.html (all lowercase!) in the root of your repository and pushed to the main branch on GitHub.
2. Check that all image and CSS paths are clean relative paths (e.g., styles/main.css or ./images/hero.webp, never C:\Users\hp\Desktop\...!).
3. On GitHub, open your repository -> click Settings -> Pages (in the left sidebar).
4. Under Build and deployment -> Source, select Deploy from a branch.
5. Choose branch main and folder / (root), then click Save.
6. Wait 60 seconds and refresh — your website is now live worldwide at: https://your-username.github.io/your-repo-name/

Deploying Modern Web & React Apps With Vercel

Used in JavaScript Fundamentals, React.js Mastery, and full-stack frontends:

1. Sign up free at vercel.com using Continue with GitHub.
2. Click Add New... -> Project and import your GitHub repository.
3. Vercel automatically detects Vite, React, Next.js, or static HTML sites and configures the build command.
4. Click Deploy. Within ~30 seconds you receive an instant HTTPS production URL (https://your-project.vercel.app) — and every future git push to main redeploys your live site automatically!

---

Quick Git Cheat Sheet

Goal	Command
Check current branch & modified files	git status
View exact line-by-line edits before staging	git diff
View compact commit history graph	git log --oneline --graph --decorate
Stage all changed files	git add .
Save a snapshot with a message	git commit -m "Your imperative message"
Upload commits to GitHub	git push
Download latest changes from GitHub	git pull
Create & switch to a new branch	git switch -c feature/branch-name
Switch back to main branch	git switch main
Discard uncommitted changes in one file	git restore filename.html
Unstage a file without losing edits	git restore --staged filename.html
Undo last local commit, keeping edits staged	git reset --soft HEAD~1

---

Next Step: Start Building!

Your laptop is configured and your GitHub workflow is ready. Jump into HTML Mastery (12 Weeks) or select your enrolled programme from All Courses & Pathways.