Exercise: Pushing Changes
Practice pushing commits to remote repositories.
Prerequisites
- A repository with a remote configured
- Use your portfolio project from earlier tasks
Exercise 1: Basic Push
Task
Make a change and push it to the remote.
Steps
bash
1cd portfolio-project
2
3# Make a change
4echo "/* Footer styles */" >> css/style.css
5echo "footer { padding: 20px; }" >> css/style.css
6
7# Stage and commit
8git add css/style.css
9git commit -m "Add footer styles"
10
11# Push to remote
12git push origin main
13
14# Verify on GitHubExercise 2: Check Before Pushing
Task
Review what will be pushed before actually pushing.
Steps
bash
1# Make changes
2echo "// New utility function" >> js/main.js
3git add js/main.js
4git commit -m "Add utility function"
5
6# See commits that will be pushed
7git log origin/main..HEAD --oneline
8
9# See diff that will be pushed
10git diff origin/main..HEAD
11
12# Now push
13git push origin mainExercise 3: Push with Upstream
Task
Create a new branch and push it with upstream tracking.
Steps
bash
1# Create new branch
2git checkout -b feature/contact-form
3
4# Make changes
5echo "<form>Contact Form</form>" >> index.html
6git add index.html
7git commit -m "Add contact form placeholder"
8
9# Push with upstream (-u)
10git push -u origin feature/contact-form
11
12# Now you can just use 'git push' on this branch
13echo "<!-- Updated -->" >> index.html
14git add index.html
15git commit -m "Update contact form"
16git push # No need to specify remote/branchExercise 4: View Push Status
Task
Check which branches need to be pushed.
Steps
bash
1# See all branches with tracking status
2git branch -vv
3
4# Output shows tracking info:
5# feature/contact-form abc1234 [origin/feature/contact-form] Update contact form
6# * main def5678 [origin/main] Add footer stylesExercise 5: Push After Local Changes
Task
Make multiple commits locally, then push all at once.
Steps
bash
1# Switch to main
2git checkout main
3
4# Make multiple commits
5echo "/* Update 1 */" >> css/style.css
6git add css/style.css
7git commit -m "Style update 1"
8
9echo "/* Update 2 */" >> css/style.css
10git add css/style.css
11git commit -m "Style update 2"
12
13echo "/* Update 3 */" >> css/style.css
14git add css/style.css
15git commit -m "Style update 3"
16
17# Check commits to push
18git log origin/main..HEAD --oneline
19# Shows 3 commits
20
21# Push all at once
22git push origin mainExercise 6: Handle Push Rejection (Simulated)
Task
Understand what happens when push is rejected.
Explanation
When your push is rejected:
bash
1git push origin main
2# ! [rejected] main -> main (fetch first)
3# error: failed to push some refsSolution
bash
1# Pull first
2git pull origin main
3
4# Then push
5git push origin mainIf there are conflicts, you'll need to resolve them first.
Exercise 7: Clean Up Feature Branch
Task
After a feature branch is merged, clean up.
Steps
bash
1# Switch to main
2git checkout main
3
4# Pull latest (includes merged feature)
5git pull origin main
6
7# Delete local feature branch
8git branch -d feature/contact-form
9
10# Delete remote feature branch
11git push origin --delete feature/contact-formChallenge: Multi-Commit Push Workflow
Task
Practice a realistic workflow with multiple commits.
Steps
bash
1# 1. Start feature
2git checkout -b feature/about-section
3
4# 2. Add HTML structure
5cat >> index.html << 'EOF'
6<section id="about">
7 <h2>About Me</h2>
8 <p>Welcome to my portfolio!</p>
9</section>
10EOF
11git add index.html
12git commit -m "Add about section HTML"
13
14# 3. Add styles
15cat >> css/style.css << 'EOF'
16#about {
17 padding: 2rem;
18 background: #f5f5f5;
19}
20EOF
21git add css/style.css
22git commit -m "Add about section styles"
23
24# 4. Push feature branch
25git push -u origin feature/about-section
26
27# 5. Verify on GitHub and create PRSummary
You've practiced:
- ✅ Basic pushing
- ✅ Reviewing before pushing
- ✅ Setting upstream with
-u - ✅ Pushing multiple commits
- ✅ Handling push rejection
- ✅ Cleaning up after merge
Next: Learn how to pull changes!