ICS 314, Spring 2023

E35: Island Snow with Bootstrap 5

In this trilogy of WODs, you will use Bootstrap 5 to create a page similar to the home page for Island Snow. When finished, your page should look like this (click to see full size):

picture

As you can see, there are several differences between the “real” Island Snow site and the one you are creating:

The goal of this exercise is not to create a pixel-perfect replica of the Island Snow site in Bootstrap 5 (although that is certainly possible). Instead, the goal is to help you learn the process of reimplementing layouts using Bootstrap 5. This capability is useful, since it enables you to incorporate layouts from sites you find attractive into your own projects.

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

WOD 1: The top menubar

  1. Start your timer.

  2. Create a GitHub repository called islandsnow and clone it to your local file system.

  3. Create an IntelliJ project called islandsnow in your repo, and two files within it: index.html and style.css.

  4. Load the Bootstrap 5 files into index.html following the instructions in Bootstrap 5 Hello World.

  5. You will want to load the Bootstrap icons using: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

  6. Load the (currently empty) style.css file in index.html.

  7. Convert the navigation bar into a Bootstrap 5 Navbar. The menu elements should link to the appropriate places in the text as before. Hints:

    • Use navbar bg-light for the navbar.
    • Wrap the menu in a container to create margins.
    • Create a ul class="nav" to hold the icons on the left-hand side of the top menu. Add a p-1 padding to each of the icons.
    • Create a second ‘ul class=”nav justify-content-end”’ for the second set of icons on the right-hand side. Add a p-1 padding to each of the icons.
    • Use the Bootstrap 5 Dropdown module to create the My Cart menu item.

  8. Check to see that your page’s top-level menu looks similar to the one in the screen image above.

  9. Now commit your main branch to GitHub, and check to see that it’s there.

  10. Stop your timer and record your time. 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 Island Snow site had a slightly different design, but the idea remains the same:

WOD 2: The middle of the site

  1. Start your timer.

  2. Create a branch of your islandsnow repo called “middle-1”. Do your work in this branch.

  3. Wrap the Island Snow logo in a row div and a single col div to place the Island Snow logo underneath the menu. You can get a copy of the Island Snow logo here. The image should have the following class=”img-fluid rounded mx-auto d-block py-1”. We want the image to be fluid. The mx-auto and d-block center the image in the page. py-1 gives a little padding on the y-axis.

  4. Create the second menu in a manner similar to the first. This time the menu item are in five columns in a “row justify-content-center pt-4”.

  5. Use another “row justify-content-center” class to format the full-width photo of the model sitting on the bridge. Get this photo here.

  6. Check to see that the middle of your page looks similar to the one in the screen image above.

  7. Now commit your branch to GitHub, and check to see that it’s there.

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

Rx: <9 min Av: 9-12 min Sd: 12-15 min DNF: 15+ min

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

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

  1. Start your timer.

  2. Merge the final version of your “middle” branch back into main.

  3. Create a branch of your islandsnow main branch called “footer-1”. Do your work in this branch.

    • Add a “footer” to hold the contents.
    • Style the footer's background-color to #292929 and color white.
    • Use a “container” to add padding to the left and right of your grid.
    • Use a “row” to hold the three columns.
    • Each column has a capitalized title, a “hr”, then the text.
    • You can use an “input” type “text” and a “btn btn-dark” for the email input.

  4. Check to see that your page looks like the screen image above.

  5. Now commit your branch to GitHub, and check to see that it’s there.

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

Rx: <13 min Av: 13-16 min Sd: 16-20 min DNF: 20+ min

If you need to repeat WOD 3, just revert to the main branch and start over with a new branch called “footer-2”.

Once you’ve finished doing WOD 3 a single time, watch me do it. Note that the footer design in the video is a little more complicated at the time this video was developed. The current footer is actually more simple to create:

Submission Instructions

By the time and date indicated on the Schedule page, submit this assignment via Laulima.

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

Your submission should contain:

You will receive full credit for this practice WOD as long as you have attempted it at least once and submitted your work on Laulima 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.