DEV Community

Latchu@DevOps
Latchu@DevOps

Posted on

🌿 Git Feature Branching Strategy — Beginner-Friendly Hands-On Guide Using EC2 + HTML Project

#github #git #tutorial #devops

🎯 If you're a DevOps beginner or fresher learning Git workflows, this guide is for you. We’ll create a simple project and practice Feature Branching step-by-step on an Ubuntu-based EC2 instance.

🧰 What You’ll Learn:

  • How Feature Branching works
  • How to use Git to isolate feature development
  • How to merge cleanly into main
  • A real-world example using a simple HTML app

🖥️ Environment Setup

I'm running this on a Ubuntu EC2 instance that has Git installed.

You can follow along from:

  • EC2 or Your local machine
  • Git Bash or Linux terminal

📁 Step 1: Create a Project Directory 

mkdir myshop-demo
cd myshop-demo
Enter fullscreen mode Exit fullscreen mode

Create a basic index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>MyShop Demo</title>
</head>
<body>
    <h1>Welcome to MyShop</h1>
    <p>Your favorite online store!</p>

    <div class="product">
        <h2>Product Name</h2>
        <p>$19.99</p>
        <button>Add to Cart</button>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Save the file inside myshop-demo/.

🌿 Step 2: Initialize a Git Repository 

git init
Enter fullscreen mode Exit fullscreen mode

✅ Step 3: Add and Commit Initial Code 

git add index.html
git commit -m "Initial commit - MyShop homepage"
Enter fullscreen mode Exit fullscreen mode

🌱 Step 4: Create a Feature Branch

Let’s say we want to add a "Wishlist" button.

git checkout -b feature/add-to-wishlist
Enter fullscreen mode Exit fullscreen mode

This creates a new branch for the feature — safely isolated from main.

✏️ Step 5: Make Your Feature Change

Edit index.html and add the Wishlist button after Add to Cart

<button>Add to Wishlist</button>
Enter fullscreen mode Exit fullscreen mode

💾 Step 6: Save and Commit the Change 

git add index.html
git commit -m "Added Add to Wishlist button"
Enter fullscreen mode Exit fullscreen mode

🔁 Step 7: Merge Back to Main

Once your feature is done and tested:

git checkout main
git merge feature/add-to-wishlist
Enter fullscreen mode Exit fullscreen mode

🎉 Feature successfully merged into production code!

🧠 What You Learned

✅ How to isolate features
✅ How to prevent breaking main
✅ How to merge safely after testing

📌 Why Use Feature Branching?

✅ Pros 🚫 Cons
Easy to manage individual features Too many branches if not cleaned
Safe from breaking main Might create merge conflicts if team doesn’t sync often
Perfect for small teams Can slow down big, fast-moving teams

🧪 What’s Next?

Now that you've nailed Feature Branching, try the next one:

➡️ [Gitflow Branching Strategy — Hands-On With HTML Project]

(https://dev.to/latchudevops/master-gitflow-branching-strategy-step-by-step-guide-with-hands-on-html-project-2m5e)

💬 Have questions or want to practice together? Drop a comment!

🧡 If this helped you, give it a ❤️ or 🦄 so other beginners can find it too!

Top comments (0)