E34A: Five Bootstrap Navbars

Before you attempt this WOD be sure to have gone through the Bootstrap 5 Hello World reading.

In this WOD, you will use Bootstrap 5 to create five different Navbars. When finished, it should look like this (click to see full size):

The goal of this exercise is to help you learn how to create different types of Navbars using Bootstrap 5. This capability is useful, since it enables you to incorporate Navbars from sites you find attractive into your own projects.

To help you learn this more easily, I will create the page incrementally in five WODs. Each will only take you a few minutes to complete.

Read through the problem statement and understand the requirements. Then come up with an estimate for the time it will take to complete the task. Record your estimate in your Estimation Log.

If you plan to use any AI assistance (LLMs, Copilot, code generation), briefly note the tool and plan for verification in your Estimation Log. Record prompt/verification time separately so your estimates reflect where effort is spent.

Start your timer.
Create a GitHub repository called bootstrap-navbars and clone it to your local file system.
Open your bootstrap-navbars repo in VSCode, and create two files within it: index.html and style.css.
Download sample.gitignore into the project directory, and rename it to .gitignore.
Load the Bootstrap 5 files into index.html following the instructions in Bootstrap 5 Hello World.
Load the Bootstrap icons using: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
Load the (currently empty) style.css file in index.html.
Create the first Navbar inspired by The Boardroom Kailua. Hints:
- Create a container-fluid px-0 to create a full-width navbar. Style the container with background-color: #133B40;. Style the links with color: white;.
- Use navbar navbar-expand-lg bg-gradient for the navbar.
- Wrap the menu in a container to create margins.
- Create a ul class="nav justify-content-start" to hold the Instagram icon in a link with the class navbar-brand.
- Create a second ul class="nav justify-content-center" for The Boardroom Logo. Save the image to your project directory.
- Create a third ul class="nav justify-content-end" for the menu button. The button should have the text “Menu” the class btn btn-dark.
Check to see that your page’s top-level menu looks similar to the one in the screen image above.
Now commit your main branch to GitHub, and check to see that it’s there.
Stop your timer and record your time for this attempt in your Estimation Log. Compare your estimate with the actual time taken. Did you underestimate or overestimate? Why do you think that is? What can you do to improve your estimation skills in the future? Add your reflections to your Estimation Log.

Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <20 min Av: 20-25 min Sd: 25-30 min DNF: 30+ min

If you need to repeat WOD 1, just delete your repo and start over from scratch.

Once you’ve finished doing WOD 1 a single time, watch me do it. Note that this video was developed when the Boardroom site had a slightly different design, but the idea remains the same:

Read through the problem statement and understand the requirements. Then come up with an estimate for the time it will take to complete the task. Record your estimate in your Estimation Log.

Start your timer.
Create a new branch from main called navbar2 and switch to it. Do your work in this branch.
Create the second Navbar inspired by Morning Brew. Hints:
- Create a div to contain the two row navbar.
- Use navbar navbar-expand-lg bg-light for the navbar.
- Wrap the menu in a py-2 container to create margins.
- Create a div class="mx-auto navbar-nav" to hold the Morning Brew logo in an img.
- Create a second div class="navbar navbar-expand-lg bg-light sticky-top" for the menu items.
- Create a div class="container" for the padding.
- Create a div class="mx-auto navbar-nav" to hold the menu items.
- Create seven div class="nav-item border-1 border-top border-dark" for the menu items: Home, Order Online, Menus, Locations, About, Shop, Contact. The Home item should have the class active border-3.
- Style the .nav-items with padding-left: 1rem; padding-right: 1rem; padding-top:2px; padding-bottom: 0.5rem; color: #E33E19; font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 300; font-size: 18px; cursor: pointer!important;
- Style the .active with padding-top: 0px; color: black;
Check to see that your page’s second menu looks similar to the one in the screen image above.
Now commit your branch to GitHub, and check to see that it’s there.
Stop your timer and record your time for this attempt in your Estimation Log. Compare your estimate with the actual time taken. Did you underestimate or overestimate? Why do you think that is? What can you do to improve your estimation skills in the future? Add your reflections to your Estimation Log.

Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <20 min Av: 20-25 min Sd: 25-30 min DNF: 30+ min

If you need to repeat WOD 2, just revert to the main branch and start over with a new branch called navbar2-1.

Once you’ve finished doing WOD 2 a single time, watch me do it:

Read through the problem statement and understand the requirements. Then come up with an estimate for the time it will take to complete the task. Record your estimate in your Estimation Log.

Start your timer.
Create a new branch from navbar2 called navbar3 and switch to it. Do your work in this branch.
Create the third Navbar inspired by Buzz’s. Hints:
- Create a container-fluid px-0 to create a full-width navbar. Style the container with background-color: rgb(48,73,95); color: white;.
- Use navbar navbar-expand-lg bg-gradient for the navbar.
- Wrap the menu in a py-3 container to create margins.
- Create a ul class="nav justify-content-start" to hold the left menu items: LUNCH, DINNER, DRINKS & PUPU. The items should be in h4 tags and px-2 padding.
- Create a second ul class="nav justify-content-center" to hold the Buzz’s logo in an img with a height of 70.
- Create a third ul class="nav justify-content-end" to hold the right menu items: ABOUT, LOCATION, SHOP, and the Cart Bootstrap Icon. The items should be in h4 tags.
Check to see that your page’s third menu looks similar to the one in the screen image above.
Now commit your branch to GitHub, and check to see that it’s there.
Stop your timer and record your time for this attempt in your Estimation Log. Compare your estimate with the actual time taken. Did you underestimate or overestimate? Why do you think that is? What can you do to improve your estimation skills in the future? Add your reflections to your Estimation Log.

Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <20 min Av: 20-25 min Sd: 25-30 min DNF: 30+ min

If you need to repeat WOD 3, just revert to the navbar2 branch and start over with a new branch called navbar3-1.

Once you’ve finished doing WOD 3 a single time, watch me do it:

Read through the problem statement and understand the requirements. Then come up with an estimate for the time it will take to complete the task. Record your estimate in your Estimation Log.

Start your timer.
Create a new branch from navbar3 called navbar4 and switch to it. Do your work in this branch.
Create the fourth Navbar inspired by Aloha Beer. Hints:
- Use navbar navbar-expand-lg navbar-light bg-light for the navbar.
- Wrap the menu in a container to create margins.
- Create a navbar-brand to hold the Aloha Beer logo in an img with a width of 110.
- Create a div class="nav justify-content-center" to hold the center menu nav-links: Locations & Menus, Events, Brewery, and Shop. The Shop link should have the color #EDC601.
- Create another div class="nav justify-content-end" to hold the right menu nav-links: Account, Search, and Cart. The Search link should have a bi-search icon. The Cart link should have a bi-cart3 icon.
Check to see that your page’s fourth menu looks similar to the one in the screen image above.
Now commit your branch to GitHub, and check to see that it’s there.
Stop your timer and record your time for this attempt in your Estimation Log. Compare your estimate with the actual time taken. Did you underestimate or overestimate? Why do you think that is? What can you do to improve your estimation skills in the future? Add your reflections to your Estimation Log.

Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <20 min Av: 20-25 min Sd: 25-30 min DNF: 30+ min

If you need to repeat WOD 4, just revert to the navbar3 branch and start over with a new branch called navbar4-1.

Once you’ve finished doing WOD 4 a single time, watch me do it:

Read through the problem statement and understand the requirements. Then come up with an estimate for the time it will take to complete the task. Record your estimate in your Estimation Log.

Start your timer.
Create a new branch from navbar4 called navbar5 and switch to it. Do your work in this branch.
Create the fifth Navbar inspired by Duke’s Waikiki. Hints:
- Create a container-fluid to create a full-width navbar. Style the container with background-color: #017574; color: white;.
- Use navbar for the navbar.
- Wrap the menu in a container to create margins.
- Create a ul class="nav justify-content-start" to hold the navbar-brand, which should be the Duke’s Waikiki logo in an img with a width of 200.
- Create a second ul class="nav justify-content-end" to hold the right menu items nav-item nav-link: MENUS, DUKE, SHOP, JOIN OUR TEAM, CONTACT, and ORDER TAKEOUT & DELIVERY. ORDER TAKEOUT & DELIVERY should be styled with the color #F1A228.
Check to see that your page’s fourth menu looks similar to the one in the screen image above.
Now commit your branch to GitHub, and check to see that it’s there.
Stop your timer and record your time for this attempt in your Estimation Log. Compare your estimate with the actual time taken. Did you underestimate or overestimate? Why do you think that is? What can you do to improve your estimation skills in the future? Add your reflections to your Estimation Log.

Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <20 min Av: 20-25 min Sd: 25-30 min DNF: 30+ min

If you need to repeat WOD 5, just revert to the navbar4 branch and start over with a new branch called navbar5-1.

Once you’ve finished doing WOD 5 a single time, watch me do it:

By the time and date indicated in Lamaku, submit this assignment via Lamaku.

You must grant read access to this repo to the TA for your section. To do this:

Retrieve your repository in a browser, then click on “Settings”. Depending upon the GitHub UI you are provided, you’ll then click on either “Collaborators” or “Manage Access”. Let us know if you can’t find either of these.
Search for “kaylamarietorres”, then click “Add collaborator”.
Search for “samrosereed”, then click “Add collaborator”.

Your submission should contain:

A link to the GitHub repository created as a result of your latest attempt at this practice WOD. Make sure you include the complete URL so that I can click on it in my mailer. Note: the final commit to this repo must have been made before the submission time and date, otherwise you will not receive credit for this assignment.
The number of times you have attempted this practice WOD so far, and for each time, how long it took you.

You will receive full credit for this practice WOD as long as you have attempted it at least once and submitted your work on Lamaku with all required data before the due date. Your code does not have to run perfectly for you to receive full credit. However, if you do not repeat each practice WOD until you can finish it successfully in at least AV time, you are unlikely to do well on the in-class WOD. To reduce the stress associated with this course, I recommend that you repeat each practice WOD as many times as necessary to achieve at least AV before its due date.

E34A: Five Bootstrap Navbars

WOD 1: The first Navbar

WOD 2: The second Navbar

WOD 3: The third Navbar

WOD 4: The fourth Navbar

WOD 5: The fifth Navbar