git add is how you tell Git: "Include these changes in my next commit." It moves files from modified (or untracked) into the staged state.
Add a Single File
The most common form:
git add index.html
After running this, git status shows index.html under "Changes to be committed."
For a brand-new file, this also starts tracking it. Git will notice future edits automatically.
Add Multiple Files
Stage several files one at a time:
git add index.html
git add styles.css
git add about.html
Or stage everything in the current directory and subdirectories:
git add .
The . means "this folder and everything inside it." This is convenient but be careful — it stages all changes, including files you might not have meant to include. When learning, prefer adding files individually so you stay aware of what's going into each commit.
Add by Pattern
Stage all CSS files:
git add *.css
Stage all HTML files:
git add *.html
The shell expands *.css to matching filenames before Git sees the command.
Unstaging a File
Staged something by mistake? Remove it from the staging area without deleting your edits:
git restore --staged index.html
Your file changes remain on disk — they're just no longer staged. On older Git versions the command was git reset HEAD index.html; both work on modern Git.
Common Mistakes
Forgetting to save in your editor. Git reads files from disk. If VS Code shows a dot on the tab (unsaved changes), git add won't pick them up. Save first (Ctrl+S / Cmd+S).
Assuming git add commits. It doesn't. Adding only stages. You still need git commit to save the snapshot — covered in the next lesson.
Adding secrets. Never git add files containing passwords, API keys, or .env files. More on ignoring files later — for now, only add source files you intentionally want in history.
Full Example
Let's walk through a complete cycle. Start in your my-git-practice folder.
Create styles.css:
body {
font-family: sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: #2563eb;
}
Link it in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Git Practice Site</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello, Git!</h1>
<p>This is my first version-controlled project.</p>
</body>
</html>
Now in the terminal:
git status
# Both files show as untracked (or modified if index.html was already tracked)
git add index.html
git status
# index.html is staged; styles.css may still be untracked
git add styles.css
git status
# Both files staged — ready to commit
Quick Reference
| Command | What it does |
|---|---|
git add filename |
Stage one file |
git add . |
Stage all changes in this folder |
git add *.css |
Stage all CSS files |
git restore --staged filename |
Unstage a file |