DEV Community

Cover image for GIT for Web Developers: The Dummy-Proof Guide
Stevie G
Stevie G

Posted on

GIT for Web Developers: The Dummy-Proof Guide

#git #beginners #webdev #programming

What is GIT?

Think of GIT as a supercharged time machine for your code. It lets you:

  • Go back to any moment in your project’s history.
  • Branch off to try new ideas, like exploring alternate realities.
  • Merge your best changes back in.
  • Work together with others (or just your future self) without mess or fear of breaking things.

Key Terms & Analogies

Term What It Means Analogy
Repository The database for your project’s history (“repo” for short) Project’s time capsule
Commit A saved snapshot of your project at a point in time “Save game” or photo in time machine
Branch A parallel universe to safely try changes Alternate timeline
Merge Combining changes from one branch into another Reuniting alternate realities
Clone Downloading a copy of a remote repo to your computer Copying a time capsule
Push Sending your commits up to the online repo (e.g., GitHub) Uploading new photos to the cloud
Pull Downloading changes from the remote repo Syncing cloud photos to your device
Remote The online version of your repo (e.g., GitHub, GitLab, Bitbucket) Cloud vault
Staging Area A waiting room for changes before you commit them Prepping photos before archiving
Checkout Switching to another branch or snapshot Hopping to another timeline
Conflict When two timelines have changes that clash A paradox that needs resolving

SOLO DEVELOPER WORKFLOW (Local Only)

1. Create a New Repository 

git init my-project
cd my-project
Enter fullscreen mode Exit fullscreen mode
  • You just made a time capsule for your web project.

2. Add Your First Files 

touch index.html
git add index.html
git commit -m "Initial commit: Add index.html"
Enter fullscreen mode Exit fullscreen mode
  • “Staged” (added) and “committed” (saved a snapshot).

3. Work in Branches (Optional but Powerful!)

  • By default, you’re on the main branch (think “main timeline”).
  • Want to try a new feature? 
git checkout -b feature-header
# Add header to index.html
git add index.html
git commit -m "Add header section"
Enter fullscreen mode Exit fullscreen mode
  • -b creates and switches you to the new branch.

4. Return to Main Timeline 

git checkout main
Enter fullscreen mode Exit fullscreen mode

5. Merge Your Changes Back to Main 

git merge feature-header
Enter fullscreen mode Exit fullscreen mode
  • Like merging alternate timeline changes into your main story.

6. See Your Project’s Timeline 

git log --oneline --graph --all
Enter fullscreen mode Exit fullscreen mode

7. Go Back in Time (Undo a Change) 

git checkout <commit-id> -- index.html
Enter fullscreen mode Exit fullscreen mode
  • Use git log to find the commit ID.

REMOTE DEVELOPMENT (with GitHub, etc.)

1. Create a GitHub Repo Online

  • Go to github.com, click “New”, name your repo, don’t initialise with a README.

2. Connect Local Project to Remote 

git remote add origin https://github.com/YOUR-USERNAME/my-project.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode
  • This links your “time capsule” to the cloud.

3. Working With Remote

Pull latest changes 

git pull
Enter fullscreen mode Exit fullscreen mode

Push your new work 

git push
Enter fullscreen mode Exit fullscreen mode

Clone a repo from GitHub 

git clone https://github.com/YOUR-USERNAME/my-project.git
Enter fullscreen mode Exit fullscreen mode

BRANCHING WORKFLOW (Solo or Team)

1. Main Branch (main)

  • The “official” story of your project.
  • Only finished, stable work should go here.

2. Develop Branch (develop)

  • Where ongoing development happens before it’s ready for main.
  • Good for teams; solo devs can skip or use if feeling fancy.

3. Feature Branches

  • For individual tasks or features: 
git checkout -b feature-login
# Work on feature
git add .
git commit -m "Add login form"
git checkout develop
git merge feature-login
Enter fullscreen mode Exit fullscreen mode

4. Release & Hotfix Branches

  • Use release/ branches to prep for new versions.
  • Use hotfix/ for urgent fixes off main.

TEAM WORKFLOW CHRONOLOGY

  1. Clone the repo
  2. Create a new branch for your feature
  3. Do your work, commit often
  4. Push branch to remote
  5. Create a pull request (on GitHub) to merge your branch into develop or main
  6. Get your work reviewed & merged
  7. Pull latest changes, repeat!

HANDY COMMANDS

Task Command
Check status git status
See commit history git log --oneline --graph --all
Add changed files git add .
Commit with message git commit -m "Message"
Create and switch to branch git checkout -b new-branch
Switch branches git checkout branch-name
Merge branches git merge branch-name
See all branches git branch
Delete a branch git branch -d branch-name
Set up remote git remote add origin <repo-url>
Push branch to remote git push origin branch-name
Pull latest from remote git pull

CHEAT SHEET: SOLO DEV FLOW

  1. git init
  2. Add files, commit (git add ., git commit -m "...")
  3. Create new branch for feature (git checkout -b feature-x)
  4. Work, commit, merge back to main
  5. Use git log to view/restore history
  6. Connect to GitHub, push/pull as needed

CHEAT SHEET: TEAM FLOW

  1. git clone <repo>
  2. git checkout -b feature-x
  3. git add .
  4. git commit -m "feature"
  5. git push origin feature-x
  6. Make a Pull Request on GitHub
  7. After merge, git pull to stay up to date

TOP TIPS FOR WEB DEVELOPERS

  • Commit often! Tiny snapshots = easier rollbacks.
  • Branches are cheap—make one for every new idea.
  • Write meaningful messages (not just “update”).
  • Don’t push secrets (API keys, passwords).
  • Use .gitignore to skip files like node_modules/, .env, vendor/.

.gitignore Example for Web Dev 

# Node modules
node_modules/
# PHP vendor
/vendor/
/.env
*.log
.DS_Store
*.sqlite
Enter fullscreen mode Exit fullscreen mode

ANALOGIES TO REMEMBER

  • Branches: Alternate timelines in a sci-fi show.
  • Commits: Save points in a game.
  • Merges: Combining two timelines.
  • Staging: Packing your bag before putting it in the time capsule.
  • Pull: Download new photos from the cloud to your phone.
  • Push: Upload your new photos from phone to the cloud.
  • GitHub: Your time capsule in the cloud, safe and shareable.

USEFUL VISUALS

  • Main Timeline (main)

    • Official, production-ready code.

  • Develop Timeline (develop)

    • Experimental, ready-for-testing code.

  • Feature Branches

    • Mini-adventures or experiments. 
main
 |
 +---- develop
         |
         +--- feature/login
         +--- feature/header
         +--- feature/footer
Enter fullscreen mode Exit fullscreen mode

SUMMARY

  • GIT is your code’s time machine.
  • Use branches for experiments.
  • Commit early and often.
  • Push to GitHub to back up and collaborate.
  • Don’t be scared to break things—GIT lets you go back!

Top comments (0)