webdev Tools

Git-GitHub

Last updated on

Git & GitHub: The Time Machine for Your Code

Welcome to the most important tool in a developer’s toolkit.

Have you ever worked on a project and created files like:

  • final.js
  • final_v2.js
  • final_final_REAL.js

If yes, you need Git.

Module 1: What is Git vs. GitHub?

This is the #1 confusion for beginners. Let’s clear it up.

1. Git (The Tool)

  • It is software installed on your local computer.
  • It tracks changes in your files.
  • It allows you to travel back in time to previous versions of your code.
  • Analogy: Think of it like a “Save Game” feature in a video game. You can save your progress and reload if you die (break your code).

2. GitHub (The Website)

  • It is a website (cloud storage) where you upload your Git history.
  • It lets you share your code with others and work together.
  • Analogy: Think of it like Google Drive or Cloud Saves for your code.

Module 2: The Setup

Before we code, we need to install Git and introduce ourselves to it.

Step 1: Install

  • Download Git from git-scm.com.
  • Install it (Just click “Next” through the setup).

Step 2: Configure (One-time setup) Open your terminal (or Git Bash) and run these commands. Git needs to know who you are so it can label your changes.

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Module 3: The Local Workflow (The 3 Stages)

This is the core concept. Understanding this makes you better than 80% of beginners.

Git has three “areas”:

  1. Working Directory: Your actual files where you are coding.
  2. Staging Area: A “waiting room” where you choose which files to save.
  3. Repository (Repo): The permanent history (the safe).

The Commands

1. Initialize (git init) Turn a normal folder into a Git repository.

git init

(You will see a hidden .git folder appear. Don’t touch it!)

2. Check Status (git status) This is your best friend. It tells you what is happening.

git status

3. Add to Staging (git add) Move files from Working Directory to the Staging Area.

# Add a specific file
git add index.html

# OR Add EVERYTHING (Most common)
git add .

4. Commit (git commit) Take a snapshot of the Staging Area and save it to the Repository.

git commit -m "Created the homepage layout"

Note: The -m stands for “message”. Make it meaningful!

Module 4: Going Online (GitHub)

Now let’s push our local code to the internet.

Step 1: Create a Repo on GitHub

  1. Go to GitHub.com and log in.
  2. Click the ”+” icon -> New Repository.
  3. Give it a name (e.g., my-portfolio) and click Create.

Step 2: Connect Local to Remote GitHub will give you a link (e.g., https://github.com/owais/repo.git). Copy it.

Run this in your terminal inside your project folder:

# Link your computer to the server (we call the server 'origin')
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git

Step 3: Push Upload your code!

# Send code to the 'main' branch on 'origin'
git push -u origin main

(You might need to sign in the first time).

Module 5: Branching (The Multiverse)

This is a superpower. Imagine you want to try a crazy new feature (like a Dark Mode), but you don’t want to break your working website.

You create a Branch. It creates a parallel universe of your code. You can mess up the branch, and your main code stays safe.

1. Create & Switch to a Branch

# Create a branch called 'dark-mode'
git checkout -b dark-mode

2. Work on the Branch Make changes, save files, git add ., and git commit as usual. These changes ONLY exist in the dark-mode universe.

3. Merge (Combine) Once the feature is perfect, you merge it back into the main code.

# 1. Go back to main
git checkout main

# 2. Merge the dark-mode changes into main
git merge dark-mode

Module 6: Good Practices (Pro Tips)

1. The .gitignore file You don’t want to upload everything to GitHub.

  • Large video files.
  • Passwords or API keys (NEVER upload these!).
  • The node_modules folder (it’s huge and can be re-installed).

Create a file named .gitignore and simply write the names of things to ignore:

node_modules/
.env
*.mp4

2. Meaningful Commits

  • Bad: git commit -m "fix"
  • Bad: git commit -m "updated"
  • Good: git commit -m "Fixed navigation bar bug on mobile"

Cheat Sheet (Summary)

Save this list!

  • git init: Start Git in a folder.
  • git status: Check what changed.
  • git add .: Stage all changes.
  • git commit -m "msg": Save changes.
  • git push: Upload to GitHub.
  • git pull: Download changes from GitHub.
  • git clone [url]: Download an entire project for the first time.

Next Steps

The best way to learn Git is to use it.

  1. Create a project.
  2. Push it to GitHub.
  3. Make a change locally.
  4. Push it again.

Happy Coding!