Skip to main content

Git & GitHub Basics

Master version control and collaboration with Git and GitHub.

What You'll Learn

  • Core Git concepts (repos, commits, branches)
  • Commit best practices
  • Branching and merging
  • Pushing to GitHub
  • Pull requests and code review
  • Using Claude for Git workflows

Prerequisites

  • Completed Start Here setup
  • Git and GitHub configured

Git Core Concepts

What is Git?

Git is a version control system that tracks changes to your files over time. Think of it as "Track Changes" for code, but much more powerful.

Key Terms

  • Repository (repo): A project tracked by Git
  • Commit: A snapshot of your project at a point in time
  • Branch: A parallel version of your project
  • Remote: A version of your repo hosted elsewhere (like GitHub)
  • Clone: Download a copy of a remote repo
  • Push: Send your commits to a remote
  • Pull: Get commits from a remote

Your First Repository

Initialize a New Repo

Bash
# Create a project folder
mkdir my-project
cd my-project
 
# Initialize Git
git init
 
# Create a README
echo "# My Project" > README.md
 
# Check status
git status

You'll see README.md is "untracked".

Make Your First Commit

Bash
# Stage the file
git add README.md
 
# Commit with a message
git commit -m "Initial commit: Add README"
 
# View history
git log

Best Practice: Commit messages should be clear and descriptive.

Commit Best Practices

Good Commit Messages

Use the format:

Bash
type: brief description
 
Optional detailed explanation

Types:

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation
  • refactor: Code restructuring
  • test: Adding tests
  • chore: Maintenance

Examples:

Good:

Bash
feat: add user authentication
fix: resolve login redirect loop
docs: update installation guide

Bad:

Bash
stuff
fixed
wip
asdf

Using Claude for Commit Messages

Ask Claude:

Bash
I changed [describe changes]. Write a good commit message.

Claude can analyze your git diff and suggest a message!

Working with Branches

Why Branches?

Branches let you work on features without affecting the main code.

Create and Switch Branches

Bash
# Create a new branch
git branch feature/new-feature
 
# Switch to it
git checkout feature/new-feature
 
# OR do both at once
git checkout -b feature/new-feature
 
# List branches
git branch
 
# See current branch
git branch --show-current

Merge a Branch

Bash
# Switch to main
git checkout main
 
# Merge your feature
git merge feature/new-feature
 
# Delete the branch (optional)
git branch -d feature/new-feature

Easier Ways to Use Git & GitHub

Terminal vs GUI Tools

You don't have to use terminal commands! Many developers find visual tools easier, especially when starting out.

GitHub Website (Easiest for Beginners)

What you can do directly on GitHub.com:

  1. Create and edit files - Click "Add file" → "Create new file"
  2. Upload files - Drag and drop files directly into browser
  3. Edit existing files - Click any file → pencil icon to edit
  4. Commit changes - GitHub auto-commits when you save
  5. Create branches - Dropdown at top left
  6. Review changes - Visual diff view shows what changed
  7. Merge pull requests - Click "Merge pull request" button
  8. Manage collaborators - Settings → Collaborators
  9. View history - Click "commits" to see all changes

Perfect for:

  • Quick fixes and typos
  • Editing documentation
  • Learning Git concepts visually
  • Small projects
  • Non-technical team members

Example: Edit a file on GitHub

  1. Navigate to your file on github.com
  2. Click the pencil icon (top right)
  3. Make your changes
  4. Scroll down, add commit message
  5. Click "Commit changes" - Done!

VS Code Integration (Best for Developers)

VS Code has Git built-in! No terminal needed.

Setup VS Code Git

  1. Install VS Code: code.visualstudio.com
  2. Open your project: File → Open Folder
  3. Source Control Panel: Click icon on left (looks like branching diagram)

Using Git in VS Code

Make commits:

  1. See changed files in Source Control panel
  2. Hover over file → click "+" to stage
  3. Type commit message at top
  4. Click checkmark to commit

Push to GitHub:

  1. Click "..." menu in Source Control
  2. Select "Push"
  3. Done!

Create branches:

  1. Click branch name in bottom-left corner
  2. "Create new branch"
  3. Enter name
  4. Start coding!

Merge changes:

  1. Switch to target branch (bottom-left)
  2. Click "..." → "Branch" → "Merge Branch"
  3. Select branch to merge
  4. Resolve any conflicts in visual editor

View history:

  • Install "GitLens" extension (highly recommended!)
  • See who changed what, when, and why
  • Visual commit history
  • Inline blame annotations

Why VS Code is great:

  • See all changes visually
  • Stage individual lines (not just files!)
  • Syntax highlighting in diffs
  • Integrated with your coding workflow
  • Extensions like GitLens add superpowers
  • Preview changes before committing
  • Built-in merge conflict resolver

GitHub Desktop (Easiest Desktop App)

Download: desktop.github.com

Features:

  • Visual commit interface
  • Drag-and-drop files to stage
  • Branch switcher with visual diagram
  • One-click push/pull
  • Conflict resolution wizard
  • Works offline

Perfect for: Anyone who prefers GUI over terminal, beginners, designers, project managers.

Workflow:

  1. Open GitHub Desktop
  2. Select your repository
  3. See changes in left panel
  4. Check boxes to stage files
  5. Write commit message at bottom
  6. Click "Commit to main"
  7. Click "Push origin" - Done!

Other GUI Tools

GitKraken (Most Visual)

  • gitkraken.com
  • Beautiful graph of branches
  • Drag-and-drop branch merging
  • Interactive rebase
  • Free for public repos

Sourcetree (Free & Powerful)

  • sourcetreeapp.com
  • Advanced features in simple UI
  • Good for large repositories
  • Windows and Mac

Tower (Professional)

  • git-tower.com
  • Undo almost anything
  • Pull request management
  • Paid but very polished

VS Code + Claude = Magic

Use Claude Code directly in VS Code!

  1. Install Claude Code: docs.claude.com/claude-code
  2. Open terminal in VS Code: Ctrl+` (or View → Terminal)
  3. Ask Claude to handle Git:
    Bash
    Claude, commit my changes with a good message
    Claude, create a new branch for this feature
    Claude, help me resolve this merge conflict

Claude can:

  • Write commit messages by analyzing your changes
  • Create and manage branches
  • Resolve merge conflicts
  • Write PR descriptions
  • Explain git errors
  • Suggest workflow improvements

Example conversation:

Bash
You: "I made changes to 3 files, help me commit them"
 
Claude: [Analyzes changes]
- auth.ts: Added password validation
- api.ts: Fixed rate limiting bug
- README.md: Updated installation steps
 
Suggested commits:
1. "fix: implement password strength validation"
2. "fix: resolve rate limiting edge case"
3. "docs: clarify installation requirements"
 
Shall I create these commits?

Recommended Setup for Beginners

Start simple, add complexity as needed:

  1. Week 1: Use GitHub website only

    • Create repos, edit files, make commits
    • Learn concepts visually

  2. Week 2: Add GitHub Desktop

    • Clone repos locally
    • Make bigger changes offline
    • Practice branches

  3. Week 3: Switch to VS Code Git

    • Integrate with coding workflow
    • Install GitLens extension
    • Learn staging individual lines

  4. Week 4: Learn terminal basics

    • Use Claude to help with commands
    • Keep GUI as backup
    • Mix and match tools

You can use all these tools on the same repository! Edit on GitHub, commit in VS Code, push with GitHub Desktop - whatever feels easiest.

Integrating with Other Apps

Notion:

  • Link GitHub issues in Notion databases
  • Embed GitHub widgets
  • Use Notion API to create issues

Slack:

  • Install GitHub app for Slack
  • Get notified of commits, PRs, issues
  • /github subscribe owner/repo to follow repos

Jira:

  • Link commits to Jira tickets
  • Use commit message format: "ABC-123: add feature"
  • Auto-update Jira status from commits

Linear:

  • Similar to Jira integration
  • Cleaner UI, better GitHub sync

Figma:

  • Link designs to GitHub issues
  • Add Figma links in PR descriptions
  • Track implementation status

Discord:

  • GitHub webhook notifications
  • Show commits in dev channel
  • Community involvement tracking

Connecting to GitHub

Create a GitHub Repository

  1. Go to github.com
  2. Click "+" → "New repository"
  3. Name: my-project
  4. Don't initialize with README (you already have one)
  5. Click "Create repository"

Connect Your Local Repo

Bash
# Add GitHub as remote
git remote add origin git@github.com:yourusername/my-project.git
 
# Push your code
git push -u origin main
 
# View remotes
git remote -v

Daily Git Workflow

The Basic Cycle

Bash
# 1. Check what changed
git status
 
# 2. Stage files
git add file1.txt file2.txt
# Or stage everything
git add .
 
# 3. Commit
git commit -m "feat: add new features"
 
# 4. Push to GitHub
git push

Pull Before You Push

Bash
# Get latest changes from GitHub
git pull
 
# Then make your changes and push
git add .
git commit -m "your message"
git push

Working with Claude on Git

Ask Claude to Plan Commits

Bash
I made these changes:
[describe changes]
 
How should I organize these into commits?

Get Help with Conflicts

If you have merge conflicts:

Bash
I have a merge conflict in [file]. Here's the content:
[paste conflict markers]
 
Help me resolve it.

Review Before Committing

Bash
Here's my git diff:
[paste diff]
 
Review the changes and suggest a commit message.

Pull Requests

What is a Pull Request?

A pull request (PR) asks to merge your branch into another branch (usually main).

Creating a PR

  1. Push your branch to GitHub:

    Bash
    git push -u origin feature/my-feature

  2. Go to your repo on GitHub

  3. Click "Compare & pull request"

  4. Add title and description:

    Markdown
    ## What
    [Brief description]
     
    ## Why
    [Reason for changes]
     
    ## Changes
    - [Change 1]
    - [Change 2]
     
    ## Testing
    - [How you tested]

  5. Click "Create pull request"

Using Claude for PR Descriptions

Bash
I'm creating a PR for these changes:
[describe changes]
 
Write a good PR description.

Common Git Commands

Status and Info

Bash
git status              # See what changed
git log                 # View commit history
git log --oneline       # Compact history
git diff                # See unstaged changes
git diff --staged       # See staged changes
git show COMMIT_ID      # View a specific commit

Staging and Committing

Bash
git add FILE            # Stage specific file
git add .               # Stage all changes
git commit -m "message" # Commit with message
git commit --amend      # Fix last commit

Branches

Bash
git branch              # List branches
git branch NAME         # Create branch
git checkout NAME       # Switch branch
git checkout -b NAME    # Create and switch
git merge NAME          # Merge branch
git branch -d NAME      # Delete branch

Remote Operations

Bash
git clone URL           # Clone repository
git remote -v           # List remotes
git push                # Push to remote
git pull                # Pull from remote
git fetch               # Get remote changes (don't merge)

Undo Changes

Bash
git restore FILE        # Discard changes to file
git restore --staged FILE # Unstage file
git reset HEAD~1        # Undo last commit (keep changes)
git reset --hard HEAD~1 # Undo last commit (delete changes!)

Git Ignore

.gitignore tells Git which files to ignore.

Common Patterns

Bash
# Node.js
node_modules/
npm-debug.log
 
# Python
__pycache__/
*.pyc
venv/
 
# OS
.DS_Store
Thumbs.db
 
# IDE
.vscode/
.idea/
 
# Environment
.env
.env.local
 
# Build outputs
dist/
build/
*.log

Troubleshooting

Forgot to Pull Before Committing

Bash
git pull --rebase
# Resolve any conflicts
git push

Want to Undo Last Commit

Bash
# Keep changes, undo commit
git reset HEAD~1
 
# Delete changes and commit
git reset --hard HEAD~1

Committed to Wrong Branch

Bash
# Note the commit ID
git log
 
# Switch to correct branch
git checkout correct-branch
 
# Cherry-pick the commit
git cherry-pick COMMIT_ID
 
# Go back and remove from wrong branch
git checkout wrong-branch
git reset --hard HEAD~1

Merge Conflicts

Bash
# Pull causes conflicts
git pull
 
# Fix conflicts in files (look for <<<<<<, ======, >>>>>>)
# Then:
git add .
git commit -m "Resolve merge conflicts"
git push

Best Practices

Commit Often

  • Small, focused commits are better than large ones
  • Commit complete, working changes
  • Don't commit broken code

Write Good Messages

  • Clear, concise, descriptive
  • Explain why, not just what
  • Follow conventional commits

Use Branches

  • main should always work
  • Create branches for features and fixes
  • Delete branches after merging

Pull Before Push

  • Always git pull before starting work
  • Reduces merge conflicts
  • Keeps you in sync with team

Review Before Committing

Bash
git diff              # See what you changed
git status            # Confirm what you're committing

Working with Teams

Collaboration Workflow

  1. Clone the repo:

    Bash
    git clone git@github.com:team/project.git

  2. Create branch for your work:

    Bash
    git checkout -b feature/my-work

  3. Make changes and commit:

    Bash
    git add .
    git commit -m "feat: add feature"

  4. Push branch:

    Bash
    git push -u origin feature/my-work

  5. Create PR on GitHub

  6. Code review with team

  7. Merge PR after approval

  8. Pull main and repeat:

    Bash
    git checkout main
    git pull

Next Steps

You now know Git basics! Apply this knowledge:

Additional Resources

Practice makes perfect! The best way to learn Git is to use it daily.