Homework 2 - Bootstrap and CSS

Due: Tuesday, September 28, 2021 at 11pm

Purpose:

Overview

Similar to homework 1, you are tasked with creating a site containing 6 pages (a main landing page and 5 additional pages) to avoid broken links. You may use your Homework 1 as a starting point for this assignment, create a new site based around a different topic. You may work alone or with another student in the course and you may share your code publicly on GitHub (after the homework due date).

This assignment consists of 5 components:

  1. Experiment with our browser’s web developer tools
  2. Create a static HTML page with Bootstrap elements
  3. Deploy your web page
  4. Validate your HTML document
  5. Check accessibility of your HTML document

Getting Started: Review the Bootstrap documentation and examples. In this assignment, we will inspect an HTML page that makes use of Bootstrap elements. Then, you will be asked to choose and incorporate Bootstrap components together—and customize them to your design—to produce a website.

Experiment with Web Developer Tools

The first portion of this homework will guide us through using the web developer tools built into our browsers. These tools are powerful; they allow us to view and modify the browser’s current version of the DOM, view the applied CSS stylings to any individual element on the page, and modify the CSS at the element and page level.

To begin, we have provided an example home page that includes some Bootstrap components. Open this example home page in a new browser tab and notice that some things don’t seem quite right. We will further investigate in the web developer console. The page should look similar to the following:
Problematic design

  1. Open the web developer console for your browser. This can be achieved through the menu or by right-clicking anywhere on the page and choosing “Inspect.” (Exact terminology may differ per browser.) Once open, you should be presented with a tool view similar to the ones depicted below.
    Google Chrome Tools
    Mozilla Firefox Tools
    Google Chrome Tools (top) and Mozilla Firefox Tools (bottom)
  2. The developer tools provide a few key ways to interact with the current page. On the left-hand side, we can see the HTML-like view of the browser’s DOM. We are also able to edit the DOM and view the effects live in the browser. If we move our mouse over any element displayed in the DOM, the browser will highlight that element on the page itself, showing the bounding box, padding, and margin. An example is shown below with the mouse hovering over the div element
    Highlighted div element
  3. If we click the element in the DOM, notice that the pane to the right updates. The right-side pane (Chrome) or middle pane (Firefox) as seen above show the styles currently applied to the selected element. If we modify any of the styles here, we can see the immediate effects on the page.
  4. Note: These tools only affect the currently displayed page and are made for debugging our code. If we want to persist these changes, we must also make them to our HTML or CSS files.
  5. Interact with the elements on the page using the DOM and style tools until you are familiar with their options. Be sure to right-click on elements in the DOM view to notice options such as deleting a node, duplicating a node, and editing a node as HTML. If you change any elements in the DOM or styles in the CSS, please refresh the page before continuing.

Now let us troubleshoot this problematic page.

  1. First we note that the navigation is not visible. Click the <nav> element in the DOM to see what styles are being applied. In Chrome, click the “Computed” tab to see the current box model and applied styles. In Firefox, the “Computed” tab may already be open in a third pane. Note that the background-color is set to white. Now open the contents of the <nav> by using the arrow beside it, also opening the <div> tag to reveal the <a> tag with class “navbar-brand”. Click that element and note that the current color is set to white. White text on a white background! We must investigate where the colors are being set!
    • While viewing the styles of the <a> tag, review the “Styles” tab (Chrome) and note that the current prevailing style is in the css rule:
       .navbar-dark .navbar-brand {
        color: #fff;
       }
      

      This style overrules some others that have been set for <a> tags in other contexts. Note that there are other color: rules shown that have a line through them denoting that they have been overridden. If we uncheck the box that appears next to the current color color: #fff, we can disable that style and the next rule with second-highest specificity will be used (the blue color #0d6efd) and the word “Logo” will be displayed in the navbar. Re-check the box.

    • Now click back on the <nav> element in the DOM view. Which style is producing the background color? Which background-color declaration is currently prevailing?
    • Fixing the issue: It looks like the navbar-dark class is producing the white text display and the bg-light class is producing the white background. Let’s change the class on the <nav> tag by double-clicking inside the value of the class attribute and replacing “bg-light” with “bg-dark”. Now we can see our nav bar!
  2. Next we note that the gray background appears to be running into our other elements. Drop down the arrow on the <div> element in the DOM that is the sibling to our <nav>. Hover over that <div> and its children to note their placement on the page.
    • It appears we meant to wrap only the top child in the gray background (a “jumbotron”)—this div even has a script tag that we likely meant to include at the end of the <body>.
    • Right-click the outer <div> element and edit it as HTML. That will open a textbox inside the DOM view with inline HTML. Add an additional closing </div> tag just before the <div> with class container. It looks like we might have forgotten this closing tag earlier!
    • Click off of the textbox. The browser will read and apply our changes to the DOM. That’s better! We now can see the footer!
  3. Last, let’s look at the buttons below the “Web Design” and “Photography” sections. Neither looks like a button.
    • You can either open arrows next to the elements in the DOM or right-click the link itself in the page view and choose “Inspect”. This will highlight the <a> tag used for the link.
    • For the “Web Portfolio” link, notice that the link has class “btn” but doesn’t include the additional Bootstrap classes needed to complete the look and feel. Add the class btn-info by double-clicking in the value of the class attribute and adding it. Remember: we can include multiple classes on an element by giving them as a space-separated list.
    • For the “Photography” link, notice that we also need more classes for Bootstrap’s CSS to style it appropriately. We first need the button class btn as well as the color-styling class. Try adding both btn and btn-danger.

Things now seem to be back in order. The final version of the page is depicted below. Continue exploring the web developer tools, but note the changes we’ve made so that we can update our page’s HTML and CSS. The changes we made in the developer tools will be lost if we reload the page!

Fixed page

Note: If you wish to download and use this starter page, you may save the HTML or “View Page Source” and copy/paste the HTML into a local file for testing.

Create HTML with Bootstrap

Now that we’ve troubleshooted a page that was styled with Bootstrap, it’s time to design our own. Review the Bootstrap documentation, if you haven’t already.

  1. Design your web application’s home page. You are encouraged to first draw the UI without coding or implementation to plan the site’s organization.
  2. Transform your drawing into HTML by creating an HTML file ( .html not .htm ) named index.html.
    • You may download and use our Bootstrap Example Starter File.
    • You are also welcome to begin with the starter file we looked at in the first part of the assignment, but you should fix the errors we found before continuing.
  3. Include the following <meta> tags in the <head> section of this index.html.
     <!DOCTYPE html>
     <html lang="en">
         <head>
             <meta charset="utf-8">
             <meta http-equiv="X-UA-Compatible" content="IE=edge">
             <meta name="viewport" content="width=device-width, initial-scale=1"> 
    
             <meta name="author" content="define author of the page -- your name">
             <meta name="description" content="define a description of this page">
             <meta name="keywords" content="define keywords for search engines">        
         </head>  
         <body>
    
         </body>
     </html>
    
  4. For each of the links in your navigation or on your page, create HTML pages (i.e., “about.html”) so that your site does not contain broken links.
    • Copy and paste your <head> content and <nav> to each page to ensure a constant look-and-feel across the pages. Update them as appropriate. *For example, the Bootstrap navigation has a class “active” in the navbar on the link for the currently-shown page. You may want to update which link has the “active” class applied.
  5. Include a minimum of 5 additional Bootstrap components across the pages in your site. If you start with our example home page, choose 5 additional components to add for your design. As a subset of these components, you must have the following:
    • Card without an image.
    • Card with an image. Note that you will need to upload your image to the server or link to a published image.
    • Accordion. However, you are encouraged to use experiment with and include additional components.
  6. You may want to modify the Bootstrap styles using your own CSS rules to override the Bootstrap defaults. Include your own CSS file styles.css at the end of your home page’s <head> and override at least one Bootstrap rule. For example, you may wish to change the background-color of the .btn-danger class to be a nice shade of gray (“#575757”).
  7. In a comment at the top of your index.html page, list the Bootstrap elements that you have added to your pages.

Thought Question: How has designing with Bootstrap compared with our repsonsive design from Homework 1? Do you find using Bootstrap’s pre-defined classes helpful?

Deploy and Test your Web Page

You should deploy your website to verify that the design and layout matches your expectations. Therefore, you should deploy to your development XAMPP environment while actively developing. While HTML can be viewed directly in your browser, getting into a deployment habit will help as we begin to incorporate PHP, Javascript, and other languages into our web applications.

For this assignment, you are required to publish your website to our course server, cs4640. Please see the deployment instructions for more information. Create a directory, hw1, under the public_html directory in your web space on cs4640 and upload all of your HTML, CSS, and any image files. Once you have copied up your content, your page should be available at:

https://cs4640.cs.virginia.edu/yourid/hw2/

Optional: You may also publish your website to Google Cloud Platform.

Validate your HTML document

Producing valid HTML is helpful in ensuring a consistent view for all our users. For this homework, we will be using the W3C Nu HTML Checker.

Check the accessibility of your HTML document

Producing accessible HTML should be our top priority to ensure equal access to all users. For this course, we will be using the open-source ANDI Accessibility Testing Tool provided by the Social Security Administration.

Submission

The submission will consist of two parts:

  1. Submit your code (HTML, CSS, PDF, etc) to Gradescope in the “Homework 2” submission. You may choose to upload the files individually, upload a zip folder, or upload from a GitHub repository.
  2. Publish your web site to the cs4640 server under a folder titled “hw2”. Therefore, we should be able to access your work at https://cs4640.cs.virginia.edu/yourid/hw2. If you work with a partner, each person should publish the work to their web space.

Grading Rubric

This homework is worth 10 points, based on the following rubric:

Academic Integrity

For this assignment, you are welcome to share/publish your website! You’ll be doing that on our cs4640 server as well. We only ask that you not make any GitHub projects public until after the deadline.

Note: You must cite any sources you use in a comment at the top of your index.html file. For example:

<!DOCTYPE html>
<!--
Sources used: https://cs4640.cs.virginia.edu, ...
-->
<html lang="en">
    <head>
    ...