Git Branches

In this session, we'll learn how to make changes to a repo in a branch!

Housekeeping

  • Early dismissal: Once you’ve completed today’s Activity, feel free to complete any pending javascript learning or assignments.

  • CPNT-262 Mini Activity 3

    • Weight: 5%
    • Due: Sunday February 18

  • Homework for Monday has been posted.

Daily Standup

In the same groups as last class

Each person takes a turn to answer the following questions:

  1. What did you do yesterday?
  2. What will you do today?
  3. Anything blocking your progress?

Using Git Branches

Slides: Git workflows

Javascript Review

Git any questions about any Javascript you’ve covered so far?

Today's Achievement

Making changes in a Branch

Scenario: You are working on developing a simple index.html website for a personal project. Your task is to add a navigation bar, header/hero section and footer section to the website by creating and merging branches into the main codebase.

Instructions:

  1. Setup:

    • Clone the repository for the simple website project from a remote repository.
    • Ensure Git is installed on your system and set up your local environment.

  2. Create Feature Branches:

    • Create feature branches for each of the following features you’ll be adding to the website:

      • Add a navigation bar (201-ach-5-feature/navigation)

    • Use the following command to create a new branch:

      $ git checkout -b 201-ach-5-feature/navigation

  3. Implement Features:

    • Work on your assigned feature in your feature branch by editing the index.html file.
    • Each feature might include adding HTML elements, styling with CSS, or adding JavaScript functionality.
    • Add and commit changes to this branch.
    • Push this branch to GitHub.
    $ git push --set-upstream origin 201-ach-5-feature/navigation

  4. Testing and Review:

    • Once your feature is implemented, test it locally to ensure it works as expected.
    • Review your code and commit messages to ensure clarity and readability.

  5. Merge Feature Branches into Main:

    • After completing the development and testing phase, it’s time to merge your feature branch into the main codebase.
    • Switch to the main branch:
    $ git checkout main
    • Merge your feature branch into the main branch:
    $ git merge 201-ach-5-feature/navigation

  6. Resolve Conflicts (if any):

    • If there are any conflicts during the merge process, resolve them by carefully reviewing the conflicting files and making necessary adjustments.
    • Use git status and git diff to identify conflicting files and resolve conflicts manually.

  7. Push Changes to Remote Repository:

    • After resolving conflicts and successfully merging your feature branch into the main branch, push the changes to the remote repository:
    $ git push origin main

  8. Create a header section (201-ach-5-feature/header)

    • Create feature branches for each of the header feature you’ll be adding to the website:
      • Use the following command to create a new branch:
        $ git checkout -b 201-ach-5-feature/header
    • Repeat steps 2-7 with the “201-ach-5-feature/header” branch

  9. Implement a footer section (201-ach-5-feature/footer)

    • Create feature branches for each of the footer feature you’ll be adding to the website:
      • Use the following command to create a new branch:
        $ git checkout -b 201-ach-5-feature/footer
    • Repeat steps 2-7 with the “201-ach-5-feature/footer” branch

Submission Instructions

Publish the main branch to GH Pages and submit the following to Brightspace:

  • GH repo

  • GH Pages link

  • Links to the 3 branches that you pushed

    • You can select the branch in a drop-down menu on your repo home page.

Lesson Prep