Skip to main content
Version: WIP

✏️ 1.1.2.9 Practice: Branching and Merging

Goal: Now that you have spent some time learning about branching and merging, let’s practice! The goal of this exercise is to work on branching and merging along with your new CSS skills.

Warm Up​

  • What is the benefit of branching?
  • How do we create a new branch of a project?
  • Why would we want to merge back into the main branch?

AI Support: Confused by branch or merge commands? After trying the steps below, you can ask AI to explain a Git term or error in plain language. Do not ask AI to complete this exercise or run Git commands for you.

Example prompts:

  • Weak: "Do my branching exercise."
  • Strong: "I created a branch for a different CSS theme. Can you explain the steps to merge that branch into main and what branch I need to be on first—without running commands for me?"

Before asking AI, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "Why would a developer create separate branches for different CSS styles instead of editing main directly? Can you explain the benefit—without building my project for me?"

After reading AI's response, explain the concept back in your own words before moving on.

Code​

Resort Website​

You are hired by an investor to create a website for a private island resort that they are building.

Your website should have:

  • A main home page
  • Pages for:
  • accommodations
  • activities
  • travel arrangements
  • pictures, etc.
  • contact information

The investor doesn't know exactly what style they want for the website, so they have asked you to use your best judgement and provide them with at least two options for styling so they can make their decision later.

Make a branch for each style and when you are done, ask your "investor" (a instructor)to see the options and decide which style they would prefer. Once they have made their selection, merge that branch into main.

Further Exploration​

When you finish, make a website for your favorite restaurant or food cart. Include a page to display the menu, a page with contact information and hours, and a homepage describing the cuisine, or restaurant's history. Add styles using CSS.

Peer/Instructor Code Review​

  • Has a custom CSS stylesheet been included?
  • Is the indentation and spacing of HTML and CSS accurate?
  • Have commits been made regularly with clear messages that finish the phrase "It will…"?
  • What worked well? What would you do differently next time?

Checkpoint​

Before moving on, you should be able to:

  • Create at least two branches with different CSS styles
  • Merge your chosen branch into main
  • Explain why branching is useful before merging
  • Make regular commits with descriptive messages throughout the exercise

If you're unsure, re-read the section above or ask AI: "I created a branch for a different CSS theme. Can you explain the steps to merge that branch into main and what branch I need to be on first—without running commands for me?"