Skip to main content

Staging Your Changes (git add)

In the CodeHarborHub workflow, we don't just "save" everything at once. We use a professional two-step process. The first step is Staging.

The git add command tells Git: "Hey, look at these specific changes. I want them to be part of my next save-point (commit)."

info

Think of git add as the "Call to the Backdrop" in a photo shoot. You choose which people (files) you want to stand in front of the camera for the next photo (commit).

The "Photo Studio" Analogy​

Think of your project like a Group Photo:

  1. Working Directory (The Room): Everyone is hanging out in the room. Some people are ready, some are still fixing their hair.
  2. Staging Area (The Backdrop): You call specific people to stand in front of the camera. They are "Staged."
  3. Commit (The Photo): You click the shutter button. Only the people standing at the backdrop are in the photo.

How to Use git add​

You can choose exactly which changes you want to prepare.

If you only want to stage one specific file:

git add index.html
Important

Using git add . is a common practice, but be cautious! It will stage all changes, including those you might not want to commit (like temporary files or sensitive information). Always double-check with git status before running this command.

The Logic Flow​

Why not just save everything automatically?​

Beginners often ask: "Why can't I just commit directly?" At an Industrial Level, we use the Staging Area for Precision:

  • Scenario: You worked on a new Navbar (finished) and a Footer (half-finished).
  • The Pro Way: You only git add Navbar.js and commit it. Your half-finished footer stays safely in your "Working Directory" and doesn't break the main code!

Verification: Did it work?​

After running git add, always check your progress with:

git status

What you should see:

  • Files in Red: Changes that are NOT yet staged.
  • Files in Green: Changes that ARE staged and ready to be committed.

Oops! How to Unstage?​

If you accidentally added a file to the staging area that you didn't mean to, don't panic! You can "remove it from the backdrop" without deleting your code:

git reset index.html

This command unstages index.html but keeps your changes in the working directory. You can also unstage everything with:

git reset
info

At CodeHarborHub, we recommend running git status before and after every git add. It helps you avoid accidentally staging sensitive files like .env or node_modules!