Essential Git Commands: A Visual Guide for Developers

Git is the most widely used version control system in software development. Whether you're working solo or with a team, mastering Git commands is essential for efficient code management. This visual guide covers the most important Git commands you'll use daily.

Getting Started with Git

Initial Setup

Before using Git, configure your identity:

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

Visual Output:

✓ Successfully configured Git user identity
  Name: Your Name
  Email: your.email@example.com

Repository Initialization

Create a new Git repository:

git init

What happens:

Creates a .git folder (hidden)
Initializes empty repository
Sets up Git tracking

Visual Feedback:

Initialized empty Git repository in /path/to/your/project/.git/

Core Workflow Commands

1. Checking Repository Status

git status

git status shows the active branch and separates staged, unstaged, and untracked paths. Run it before a commit or recovery command to confirm the repository state.

Sample Output:

On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   src/components/Header.tsx

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   README.md

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        src/utils/helpers.ts

Color depends on terminal and Git configuration. Read the section labels rather than relying on a particular color scheme.

2. Adding Files to Staging Area

# Add specific file
git add filename.js

# Add all files
git add .

# Add all JavaScript files
git add *.js

Before git add:

Working Directory → Staging Area → Repository
     [Changes]    →     [Empty]   →   [Clean]

After git add:

Working Directory → Staging Area → Repository
     [Clean]      →   [Changes]  →   [Clean]

3. Committing Changes

git commit -m "Add user authentication feature"

Commit Message Best Practices:

# Good examples
git commit -m "Fix login validation bug"
git commit -m "Add password reset functionality"
git commit -m "Update API documentation"

# Bad examples
git commit -m "fix"
git commit -m "changes"
git commit -m "updated stuff"

Visual Timeline After Commit:

* 2f3a1b8 (HEAD -> main) Add user authentication feature
* 8c7d4e2 Fix navigation menu styling
* 1a5b9c3 Initial project setup

4. Viewing Commit History

git log

Sample Output:

commit 2f3a1b8d9e7c6f5a4b3c2d1e0f9a8b7c6d5e4f3a (HEAD -> main)
Author: John Doe <john@example.com>
Date:   Mon Jan 20 14:30:25 2024 +0100

    Add user authentication feature

    - Implement login/logout functionality
    - Add JWT token validation
    - Create protected routes

commit 8c7d4e2f1a5b9c3d7e6f0a9b8c7d6e5f4a3b2c1d
Author: John Doe <john@example.com>
Date:   Mon Jan 20 10:15:10 2024 +0100

    Fix navigation menu styling

Compact View:

git log --oneline

Output:

2f3a1b8 (HEAD -> main) Add user authentication feature
8c7d4e2 Fix navigation menu styling
1a5b9c3 Initial project setup

Branch Management

Creating and Switching Branches

# Create new branch
git branch feature/user-profile

# Switch to branch
git switch feature/user-profile

# Create and switch in one command
git switch -c feature/user-profile

Visual Branch Representation:

main    *---*---*---*
                  \
feature/profile    *---*

Listing Branches

git branch

Output:

* feature/user-profile
  main
  develop

The * indicates your current branch.

Merging Branches

# Switch to main branch
git switch main

# Merge feature branch
git merge feature/user-profile

Before Merge:

main           *---*---*
                     \
feature/profile       *---*---*

After Merge:

main           *---*---*-------*
                     \         /
feature/profile       *---*---*

Deleting Branches

# Delete merged branch
git branch -d feature/user-profile

# Force delete unmerged branch
git branch -D feature/user-profile

Remote Repository Operations

Adding Remote Repository

git remote add origin https://github.com/username/repository.git

Verify Remote:

git remote -v

Output:

origin  https://github.com/username/repository.git (fetch)
origin  https://github.com/username/repository.git (push)

Pushing Changes

# Push to main branch
git push origin main

# Push new branch and set upstream
git push -u origin feature/new-feature

Visual Push Process:

Local Repository  →  Remote Repository (GitHub)
     [Commits]    →     [Updated]

Success Message:

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 842 bytes | 842.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/username/repository.git
   8c7d4e2..2f3a1b8  main -> main

Pulling Changes

# Fetch and merge changes
git pull origin main

# Fetch without merging
git fetch origin

Visual Pull Process:

Remote Repository → Local Repository
    [New Commits] →   [Updated]

Undoing Changes

Unstaging Files

# Unstage specific file
git reset filename.js

# Unstage all files
git reset

Visual State Change:

Before: Working Dir → [Staging Area] → Repository
After:  Working Dir → [Empty]        → Repository

Discarding Local Changes

# Discard changes to a specific file
git restore filename.js

Warning Message:

This will permanently discard the selected working-tree changes.

Reverting Commits

# Revert last commit
git revert HEAD

# Revert specific commit
git revert 2f3a1b8

Visual Revert Process:

Before: *---*---*---[Bad Commit]
After:  *---*---*---[Bad Commit]---[Revert Commit]

Working with Differences

Viewing Changes

# See unstaged changes
git diff

# See staged changes
git diff --staged

# Compare branches
git diff main feature/new-feature

Sample Diff Output:

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1a2b3c4..5d6e7f8 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -10,7 +10,7 @@ const Header = () => {
   return (
     <header className="bg-blue-500 text-white">
-      <h1>Old Title</h1>
+      <h1>New Amazing Title</h1>
     </header>
   );
 };

Legend:

Lines prefixed with + were added.
Lines prefixed with - were removed.
Unprefixed lines provide surrounding context.

Stashing Changes

Save Work Temporarily

# Stash current changes
git stash

# Stash with message
git stash push -m "WIP: working on user profile"

Visual Stash Process:

Working Directory → Stash Stack → Clean Working Directory
    [Changes]     →    [Saved]   →       [Clean]

Managing Stashes

# List stashes
git stash list

Output:

stash@{0}: WIP: working on user profile
stash@{1}: On main: quick navigation fix
stash@{2}: WIP on feature-branch: 1a2b3c4 initial work

# Apply latest stash
git stash pop

# Apply specific stash
git stash apply stash@{1}

# Delete stash
git stash drop stash@{0}

Advanced Git Commands

Interactive Rebase

git rebase -i HEAD~3

Interactive Editor Opens:

pick 1a2b3c4 First commit message
pick 5d6e7f8 Second commit message
pick 9g0h1i2 Third commit message

# Commands:
# p, pick = use commit
# r, reword = edit commit message
# e, edit = edit commit
# s, squash = combine with previous commit

Cherry-picking Commits

git cherry-pick 2f3a1b8

Visual Cherry-pick:

Source Branch:  *---*---[Target Commit]---*
                       \
Target Branch:  *---*---*---[Copied Commit]

Tagging Releases

# Create lightweight tag
git tag v1.0.0

# Create annotated tag
git tag -a v1.0.0 -m "Release version 1.0.0"

# Push tags
git push origin --tags

Tag List:

git tag

Output:

v0.1.0
v0.2.0
v1.0.0

Git Best Practices

1. Commit Message Convention

# Format: type(scope): description

git commit -m "feat(auth): add password reset functionality"
git commit -m "fix(ui): resolve navigation menu overlap"
git commit -m "docs(readme): update installation instructions"

Types:

feat: New feature
fix: Bug fix
docs: Documentation
style: Formatting
refactor: Code restructuring
test: Adding tests

2. Branch Naming Convention

# Feature branches
feature/user-authentication
feature/payment-integration

# Bug fix branches
bugfix/login-validation
hotfix/security-patch

# Release branches
release/v1.2.0

3. Regular Workflow

# Daily workflow
git pull origin main          # Get latest changes
git switch -c feature/xyz     # Create feature branch
# ... make changes ...
git add .                     # Stage changes
git commit -m "descriptive message"  # Commit
git push -u origin feature/xyz       # Push branch
# ... create pull request ...

Common Git Scenarios

Scenario 1: Forgot to Create Branch

# You're on main but made changes
git stash                     # Save changes
git switch -c feature-branch   # Create new branch
git stash pop                 # Apply changes

Scenario 2: Wrong Commit Message

# Change last commit message
git commit --amend -m "Correct message"

Scenario 3: Merge Conflicts

When conflicts occur:

<<<<<<< HEAD
Your current changes
=======
Incoming changes
>>>>>>> feature-branch

Resolution Steps:

Edit files to resolve conflicts
Remove conflict markers (<<<<<<<, =======, >>>>>>>)
git add conflicted-files
git commit

Troubleshooting Common Issues

Authentication Problems

# Check remote URL
git remote -v

# Switch to SSH (if using HTTPS)
git remote set-url origin git@github.com:username/repo.git

Large File Issues

# Check repository size
git count-objects -vH

# Find large files
git rev-list --objects --all | git cat-file --batch-check='%(objecttype) %(objectname) %(objectsize) %(rest)' | grep '^blob' | sort -nr -k3

Accidentally Deleted Files

# Restore deleted file
git restore --source=HEAD -- deleted-file.js

# Find when file was deleted
git log --oneline --follow -- deleted-file.js

Git Aliases for Efficiency

Add these to your ~/.gitconfig:

[alias]
    st = status
    co = checkout
    br = branch
    ci = commit
    unstage = reset HEAD --
    last = log -1 HEAD
    visual = !gitk
    lg = log --oneline --graph --decorate --all

Usage:

git st        # Instead of git status
git co main   # Instead of git checkout main
git lg        # Beautiful log graph

Conclusion

These essential Git commands form the foundation of effective version control. Practice them regularly to build muscle memory and confidence. Remember:

Commit often with descriptive messages
Use branches for features and experiments
Pull before pushing to avoid conflicts
Review changes before committing
Keep commits focused on single changes

Master these commands, and you'll be well-equipped to handle any Git workflow scenario that comes your way.

Getting Started with Git

Initial Setup

Repository Initialization

Core Workflow Commands

1. Checking Repository Status

2. Adding Files to Staging Area

3. Committing Changes

4. Viewing Commit History

Branch Management

Creating and Switching Branches

Listing Branches

Merging Branches

Deleting Branches

Remote Repository Operations

Adding Remote Repository

Pushing Changes

Pulling Changes

Undoing Changes

Unstaging Files

Discarding Local Changes

Reverting Commits

Working with Differences

Viewing Changes

Stashing Changes

Save Work Temporarily

Managing Stashes

Advanced Git Commands

Interactive Rebase

Cherry-picking Commits

Tagging Releases

Git Best Practices

1. Commit Message Convention

2. Branch Naming Convention

3. Regular Workflow

Common Git Scenarios

Scenario 1: Forgot to Create Branch

Scenario 2: Wrong Commit Message

Scenario 3: Merge Conflicts

Troubleshooting Common Issues

Authentication Problems

Large File Issues

Accidentally Deleted Files

Git Aliases for Efficiency

Conclusion

References