Homework 3 - Bootstrap and LESS

Due: Thursday, February 22, 2024 at 11:59pm

Purpose:

Use the Browser’s built-in developer tools to troubleshoot design problems
Gain experience with Bootstrap, CSS, and LESS

Overview

This assignment consists of 4 components:

Experiment with our browser’s web developer tools
Create and deploy static HTML page with Bootstrap elements
Add LESS styles to your HTML page
Validate your HTML document

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).

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

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 (top) and Mozilla Firefox Tools (bottom)
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
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.
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.
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.

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!
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!
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 and LESS

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. For this assignment, you are tasked with designing a home page for the site of your choice. You may re-design your page from Homework 2.

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.
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.

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>

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:
- A navigation bar. Since this is an example site, you may include broken links or links to your other pages if you are redesigning Homework 1. You should have example items on your navigation bar that are relevant to your site topic.
- 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.
In a comment at the top of your index.html page, list the Bootstrap elements that you have added to your pages.
Modify the Bootstrap styles by writing your own rules in LESS. You may use these to override the default Bootstrap styles or styling additional elements in your page. Include a separate LESS style file custom.less at the end of your home page’s <head>. This file must reside in a styles/ subdirectory from your index.html page. You must also include the LESS JavaScript to parse the LESS; see the LESS homepage for the code to include in your browser. Your LESS code should incorporate at least the following:
- One variable that is used in two or more rules
- One mixin that is used in two or more rules
- One set of rules containing nested selectors

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 Docker development 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. Create a directory, hw3, under the public_html directory in your web space on cs4640 and upload all of your HTML, CSS, LESS, and any image files. Once you have copied up your content, your page should be available at:

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

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.

Open the HTML Validator service. From here, you will have a few options to validate your index.html file.
- Check by address: If you have already published your site to our cs4640 server, you may enter the URL for your site: https://cs4640.cs.virginia.edu/yourid/hw3/
- Check by file upload: Upload your index.html file directly.
- Check by text input: Copy and paste your code from your IDE/text editor.
Review the outputs available within the checker. At the top of the “Checker Input” box, check the outline and image report boxes to include additional information in the validation report.
- The image report shows all images used within your document. It breaks them into two categories: images that will be represented in text-only displays (with alt tags) and those that will not. Ensure that only decorative images are listed in the “No textual alternative available” section.
- The outline reports the structure of the document and whether it follows the heading hierarchy. For example, if you have used a <h2> without an <h1>, it will note that there are missing high-level headings in the heading-level outline. However, it also displays the structural outline based on the hierarchy of the headings available in your document.
Once your document has passed validation, print the page to PDF and save the document as validation.pdf. You must submit this file with your code to Gradescope.

Submission

The submission will consist of two parts:

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

Grading Rubric

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

20 points - Use 5 different Bootstrap components (4 pts each)
15 points - LESS styles
10 points - HTML validation
5 points - Publishing your site to the cs4640 server

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>
    ...