CIS-2450 Lab #2: Bootstrap/Sass

Reading: Refer to the documentation for Bootstrap and Sass.

Part 1: Install Tools

Install Node.js on your development system using whatever method suits you.
Install Sass on your development system using npm.
(OPTIONAL) Install Bootstrap on your development system using npm.

Part 2: Create a Web Page

In this lab, you will be using Bootstrap and Sass to build and format a static webpage. You can test your page using your Apache instance that you installed last week. I recommend creating a lab-02 folder directly inside your htdocs folder and placing the *.html and *.scss files directly in the lab-02 folder.

The page must include several pieces in the following order (from top to bottom):

A sticky navigation bar with at least three links on it. The links do not need to actually go anywhere.
A carousel including at least three images. It should have the standard controls and indicators. It should pause when the cursor is over an image.
Following the carousel, you should have two rows which are responsive to the display width. These rows should take up the entire width of the page unless the page is very wide.
- The first row should have the tag date on the left-hand side and today's date on the right-hand side. The right-hand side should have a light blue background. These two columns should take up the first 2/3 of the row.
- The second row should have pale yellow middle two thirds with the words "Yes" and "No" centered on either side of that.
Choose one more Bootstrap component and add that to your page.
Create a lab-02.scss file and add some simple style information.
- Define a variable that holds a color and use that color for the text in a paragraph inside a carousel caption, for the columns that contain date, and for the date itself.
- Directly set a color for the heading in the carousel caption.
Generate lab-02.css from lab-02.scss and link it into lab-02.html.

Submission

For this lab, submit the contents of your lab-02 folder to Canvas. This should include lab-02.html, lab-02.scss, and the generated lab-02.css.