Courses | Arish – Full Stack Ruby on Rails & React Developer

Project Task 6: Advanced Branching Practice

Practice merging and rebasing with your portfolio project.

Part 1: Merge Practice

Step 1: Create Feature Branch

bash

1cd portfolio-project
2git checkout main
3git pull origin main
4git checkout -b feature/testimonials

Step 2: Add Testimonials Section

Add to index.html:

html

1<section id="testimonials">
2    <h2>Testimonials</h2>
3    <div class="testimonial">
4        <p>"Great work and attention to detail!"</p>
5        <cite>- Happy Client</cite>
6    </div>
7</section>

Add to css/style.css:

css

1#testimonials {
2    padding: 2rem;
3    background: #f0f0f0;
4}
5
6.testimonial {
7    border-left: 4px solid #333;
8    padding-left: 1rem;
9    margin: 1rem 0;
10}

bash

1git add .
2git commit -m "Add testimonials section"

Step 3: Create Conflict Situation

While on feature branch, switch and make conflicting change:

bash

1# Make change on main
2git checkout main
3echo "/* Main branch update */" >> css/style.css
4git add css/style.css
5git commit -m "Update styles on main"
6
7# Go back to feature
8git checkout feature/testimonials

Step 4: Merge with Conflict Resolution

bash

1git merge main
2# CONFLICT in css/style.css
3
4# Resolve the conflict manually
5# Keep both changes
6
7git add css/style.css
8git commit -m "Merge main into feature/testimonials"

Part 2: Rebase Practice

Step 5: Create Another Feature Branch

bash

1git checkout main
2git checkout -b feature/contact-info

Step 6: Make Multiple Commits

bash

1# Commit 1
2echo "<section id='contact'><h2>Contact</h2></section>" >> index.html
3git add index.html
4git commit -m "Add contact section"
5
6# Commit 2
7echo "#contact { padding: 2rem; }" >> css/style.css
8git add css/style.css
9git commit -m "Add contact styles"
10
11# Commit 3
12echo "// Contact form validation" >> js/main.js
13git add js/main.js
14git commit -m "Add contact form JS"

Step 7: Interactive Rebase to Squash

bash

1git rebase -i HEAD~3

Change to:

pick abc123 Add contact section
squash def456 Add contact styles
squash ghi789 Add contact form JS

New commit message:

Add complete contact section

- HTML structure
- CSS styling
- JavaScript validation

Step 8: Rebase onto Updated Main

bash

1git checkout main
2# Make a new commit
3echo "/* Another update */" >> css/style.css
4git add . && git commit -m "Style update"
5
6git checkout feature/contact-info
7git rebase main

Part 3: Complete the Project

Step 9: Merge Feature to Main

bash

1git checkout main
2git merge feature/testimonials
3git merge feature/contact-info
4git push origin main

Step 10: Clean Up

bash

1git branch -d feature/testimonials
2git branch -d feature/contact-info

Verification Checklist

Congratulations! You've completed all project tasks!