Git Branching for Feature Development

1. What is a Git Branch?

In simple terms, a branch is an independent line of development. Think of your project's history as the trunk of a tree. When you want to add a new feature, you create a branch that sprouts from the trunk. You can then add new commits (your work) to this new branch without affecting the main trunk.

This allows you to work on new features, bug fixes, or experiments in isolation. Once your work on the branch is complete and tested, you can merge it back into the main trunk.

This workflow, known as the Feature Branch Workflow, is a fundamental practice in professional software development. It ensures that the main branch (main or master) always contains stable, working code.

2. Creating a Feature Branch in VS Code

Since you're working in VS Code, let's use its built-in Git tools to manage our branches. This provides a great visual way to see what's happening.

The following video demonstrates this process clearly. You'll see how to create a branch, make changes, and see how those changes are isolated from the master branch.

3. Hands-On: Building the "About" Page on a New Branch

Now, let's apply this to your personal-profile-site project. You're going to create a new branch to build the "About" page.

Step 1: Create a New Branch

A common convention is to name feature branches with a prefix like feature/.

1. In the bottom-left corner of VS Code, you should see the name of your current branch, likely main or master. Click on it.
2. A dropdown will appear at the top. Click on + Create new branch....
3. Enter the name for your new branch: feature/about-page and press Enter.

You have now created a new branch and automatically switched to it. Notice the name in the bottom-left corner has changed to feature/about-page.

Step 2: Develop the New Feature

You are now "on" the feature/about-page branch. Any work you do here will be isolated.

1. Create the "About" page: In the VS Code Explorer, create a new file named about.html.

2. Add content to about.html: Add the basic HTML structure and some placeholder content. Be sure to include the full navigation bar.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>About Me - Personal Profile</title>
   </head>
   <body>
       <header>
           <h1>About Me</h1>
           <nav>
               <ul>
                   <li><a href="index.html">Home</a></li>
                   <li><a href="about.html" aria-current="page">About</a></li>
                   <li><a href="contact.html">Contact</a></li>
               </ul>
           </nav>
       </header>
       <main>
           <section>
               <h2>My Background</h2>
               <p>I am an IT professional with an interest in programming and graphic design.</p>
           </section>
       </main>
       <footer>
           <p>&copy; 2024 Your Name</p>
       </footer>
   </body>
   </html>
   

3. Update Navigation on Other Pages: Your new "About" page needs to be in the navigation menu on the existing pages.

   • Open index.html. Add the "About" link to the navigation <ul>. Remember to move aria-current="page" to the correct <a> tag!

     <!-- In index.html -->
     <nav>
         <ul>
             <li><a href="index.html" aria-current="page">Home</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html">Contact</a></li>
         </ul>
     </nav>
     

   • Open contact.html and do the same.

     <!-- In contact.html -->
     <nav>
         <ul>
             <li><a href="index.html">Home</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html" aria-current="page">Contact</a></li>
         </ul>
     </nav>
     

Step 3: Commit the Changes to the Feature Branch

You've created one new file (about.html) and modified two others (index.html, contact.html). Let's commit this work.

1. Open the terminal in VS Code (Ctrl + ~).
2. Stage all your changes:

   git add .
   

3. Commit them with a descriptive message:

   git commit -m "feat: create about page and update navigation"
   

Your new feature is now safely saved as a commit on the feature/about-page branch.

4. Verifying Isolation

This is the "magic" of branching. Let's prove that your main branch is untouched.

1. Switch back to main: In the bottom-left corner, click on feature/about-page. From the dropdown, select main (or master).
2. Observe your files: Look at your file explorer in VS Code. The about.html file has vanished! If you open index.html or contact.html, you'll see the navigation is back to the way it was before, with only "Home" and "Contact" links.

Your project has instantly reverted to its last stable state on the main branch. Your new, potentially unfinished work is safely tucked away.

Now, switch back to your feature branch by clicking main in the corner and selecting feature/about-page. Your about.html file will reappear, and the navigation links will be updated again.

5. Understanding the Commands

While the VS Code UI is convenient, it's important to understand the terminal commands it runs for you. This knowledge is crucial for more complex situations and reinforces what's happening under the hood.

The official Git documentation provides a fantastic, straightforward walkthrough of a real-world branching scenario.

Conclusion

You have successfully adopted one of the most important workflows in modern software development. By creating a feature branch, you've ensured that your main codebase remains stable while you develop new functionality in an isolated environment.

Key Takeaways:

• A branch is an independent line of development.
• The Feature Branch Workflow involves creating a new branch for every new feature or bug fix.
• In VS Code, you can create and switch branches using the UI in the bottom-left status bar.
• The command git checkout -b <name> creates and switches to a new branch.
• The command git checkout <name> switches to an existing branch.
• Changes made on one branch do not affect others until you explicitly merge them.

In the next lesson, your "About" page will be complete and ready to go live. We will learn how to merge your feature/about-page branch back into your main branch, integrating the new feature into the main project.