Skip
Arish's avatar

22. Exercise - Staging Files

Exercise: Staging Files

Practice different ways to stage files in Git.

Setup

bash
1mkdir staging-practice
2cd staging-practice
3git init
4
5# Create initial structure
6echo "# Staging Practice" > README.md
7git add README.md
8git commit -m "Initial commit"

Exercise 1: Stage a Single File

Task

Create a file and stage it.

Steps

bash
1# Create a file
2echo "console.log('Hello');" > app.js
3
4# Check status
5git status
6# Untracked files: app.js
7
8# Stage the file
9git add app.js
10
11# Check status again
12git status
13# Changes to be committed: new file: app.js

Exercise 2: Stage Multiple Files

Task

Create multiple files and stage them together.

Steps

bash
1# Create multiple files
2echo "body { margin: 0; }" > style.css
3echo "<!DOCTYPE html>" > index.html
4echo "function test() {}" > utils.js
5
6# Check status
7git status
8# Untracked files: index.html, style.css, utils.js
9
10# Stage all at once
11git add style.css index.html utils.js
12
13# Verify
14git status
15# Changes to be committed: index.html, style.css, utils.js
16
17# Commit them
18git commit -m "Add initial project files"

Exercise 3: Stage All Changes

Task

Make changes to multiple files and stage all at once.

Steps

bash
1# Modify existing files
2echo "/* Updated */" >> style.css
3echo "<!-- Updated -->" >> index.html
4
5# Create a new file
6echo "config = {}" > config.js
7
8# Check status
9git status
10# Changes not staged: style.css, index.html
11# Untracked: config.js
12
13# Stage everything
14git add .
15
16# Verify
17git status
18# Changes to be committed: config.js, index.html, style.css

Exercise 4: Selective Staging

Task

Make changes to 3 files but only stage 2 of them.

Steps

bash
1# Make changes
2echo "// Feature A" >> app.js
3echo "// Feature B" >> utils.js
4echo "/* Theme update */" >> style.css
5
6# Check status
7git status
8
9# Stage only app.js and utils.js
10git add app.js utils.js
11
12# Verify
13git status
14# Staged: app.js, utils.js
15# Not staged: style.css
16
17# Commit staged files
18git commit -m "Add features A and B"
19
20# style.css is still unstaged
21git status
22# Not staged: style.css

Exercise 5: Unstage a File

Task

Stage multiple files, then unstage one.

Steps

bash
1# Stage the remaining change
2git add style.css
3
4# Make another change
5echo "// More code" >> app.js
6git add app.js
7
8# Check staged files
9git status
10# Staged: app.js, style.css
11
12# Unstage app.js
13git restore --staged app.js
14
15# Verify
16git status
17# Staged: style.css
18# Not staged: app.js

Exercise 6: View Staged Changes

Task

See exactly what you're about to commit.

Steps

bash
1# Make changes
2echo "// Debug code" >> utils.js
3git add utils.js
4
5# View staged changes
6git diff --staged
7
8# You'll see the exact lines added/removed
9
10# View unstaged changes
11git diff

Exercise 7: Stage by Pattern

Task

Stage files matching a pattern.

Steps

bash
1# Create several JavaScript files
2echo "// Module 1" > module1.js
3echo "// Module 2" > module2.js
4echo "// Module 3" > module3.js
5
6# Create a CSS file
7echo "/* styles */" > new-styles.css
8
9# Stage only JS files
10git add *.js
11
12# Check status
13git status
14# Staged: module1.js, module2.js, module3.js
15# Untracked: new-styles.css

Exercise 8: Interactive Staging

Task

Stage only parts of a file.

Steps

bash
1# Create a file with multiple sections
2cat > features.js << EOF
3// Section 1: Authentication
4function login() {}
5function logout() {}
6
7// Section 2: Dashboard  
8function showDashboard() {}
9
10// Section 3: Settings
11function updateSettings() {}
12EOF
13
14git add features.js
15git commit -m "Add features template"
16
17# Now modify multiple sections
18cat > features.js << EOF
19// Section 1: Authentication
20function login() { console.log('login'); }
21function logout() { console.log('logout'); }
22
23// Section 2: Dashboard  
24function showDashboard() { console.log('dashboard'); }
25
26// Section 3: Settings
27function updateSettings() { console.log('settings'); }
28EOF
29
30# Stage interactively
31git add -p features.js
32
33# You can choose which changes to stage
34# y = stage, n = skip, s = split

Challenge: Organize Commits

Task

You have changes for 2 different features. Create separate commits.

Setup

bash
1# Make changes for feature 1 (authentication)
2echo "// Auth logic" > auth.js
3echo "/* Auth styles */" > auth.css
4
5# Make changes for feature 2 (profile)
6echo "// Profile logic" > profile.js
7echo "/* Profile styles */" > profile.css

Solution

bash
1# Commit feature 1
2git add auth.js auth.css
3git commit -m "Add authentication feature"
4
5# Commit feature 2
6git add profile.js profile.css
7git commit -m "Add user profile feature"
8
9# Verify history
10git log --oneline

Summary

You've practiced:

  • ✅ Staging single and multiple files
  • ✅ Staging all changes with git add .
  • ✅ Selective staging
  • ✅ Unstaging files
  • ✅ Viewing staged changes
  • ✅ Staging by pattern
  • ✅ Interactive staging

Great work with staging!