6 min read
📦beginner

Making Commits — Snapshots of Your Code

Master the commit workflow: staging changes, writing good commit messages, and building a clean project history.

The Three Areas of Git

Git has three areas where your files live: 1. Working Directory — Your actual files that you can see and edit. This is just your normal project folder. 2. Staging Area — A 'waiting room' where you put files that are ready to be committed. Think of it as a packing area before shipping. 3. Repository — The database of all your committed snapshots. This is the permanent history. The flow goes: Edit files -> Stage them (git add) -> Commit them (git commit). This two-step process lets you choose exactly which changes to include in each snapshot.

The Commit Workflow

bash
# See what files have changed
git status

# Stage specific files
git add index.html
git add styles.css

# Or stage everything at once
git add .

# Commit with a descriptive message
git commit -m "Add navigation bar with responsive menu"

# See what you just committed
git log --oneline

Writing Good Commit Messages

Your commit messages are like diary entries for your project. Future you (or your teammates) will read them to understand what changed and why. Bad commit messages: - 'fixed stuff' - 'updates' - 'asdfasdf' - 'final changes' Good commit messages: - 'Fix login button not responding on mobile' - 'Add dark mode toggle to settings page' - 'Remove unused CSS classes to reduce file size' - 'Update homepage hero image and tagline' A good commit message starts with a verb and explains WHAT changed. Keep it under 50 characters if possible.
Pro Tip

Commit early and commit often! Each commit should be one logical change — not a whole day of work lumped together. Small, focused commits make it easy to find when a bug was introduced and undo just that one change without losing everything else.

Practice the Workflow

Create a small project (a simple HTML page) and practice the full Git workflow: 1) Initialize Git with 'git init'. 2) Create index.html and commit it. 3) Add some CSS in a new file and commit. 4) Change the HTML and commit. 5) Run 'git log --oneline' to see your beautiful commit history. Try writing clear, descriptive messages for each commit. Can someone reading just the messages understand what you built?

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free