Homework 2 - Responsive Web Page

Due: Monday, February 10, 2025 at 11:59pm

Purpose:

Hands-on experience with HTML and CSS
Understand responsive web design and apply it to improve the usability of the web page
Get ready to work on Sprint 2

Overview

For this assignment, we will update our initial static web pages that we began in class. You may work alone or with another student in this course and you may share your code publicly on GitHub (after the homework due date).

Once you have chosen a topic, this assignment has three components:

Style a web page (CSS)
Create a responsive view (CSS)
Deploy and test your website

Create Second-Level Pages

For each of the links in your navigation (i.e., inside the <nav>) and highlights in your index.html, create additional HTML files (i.e., contact.html) with a minimal HTML page to maintain look-and-feel and navigation (and avoid HTTP 404 errors). - Include a similar <head> to your index.html page, with updated title for the current page. - Copy the <nav> section from index.html to each of these pages so that each may link back to the home page.

Style your Web Page

Create a folder styles inside a folder where you save your HTML file. This will be where you store all of your .css files.
Create a CSS file, main.css.
Add <link> element to the <head> section of your each of your HTML files.
```
 <link rel="stylesheet" href="styles/main.css">
```

Now let’s add some styles! At a minimum, please incorporate these styles: (however, you are strongly encouraged to completely style your page)

Create a class that will serve as a container for your elements, set margin, padding, and width.
Apply the container class throughout your HTML to each of these sections: <header>, <footer>, <section>.
Add vertical space between elements; for example, set bottom margin to 22 pixels.
Add padding to the sections. You may want to try adjusting the padding to find the numbers that work for your ideal design.
Set the copyright footer to float left: create a copyright class and set the float property to be left. Add the copyright class to the <small> tag.
Create a primary-footer class to further specify the look-and-feel of the footer and set top and bottom padding. Then, add the class to the <footer>.

Create a Responsive View

Your web page should be responsive; that is, it should adjust its display based on the screen size of the user’s device. Specifically, you should provide CSS that responds to the user’s screen size, displaying a mobile-friendly version of the page on a cell phone and a full version on a desktop or laptop. And, of course, if you have a smart toaster, make your design responsive on that display, too! (Just kidding on that last part!)

Grid System

Assuming the viewport has been set using the <meta> tag, create a grid view. Make sure that the padding and border are included in the total width and height of the elements by adding the following CSS rule:
```
* {
 box-sizing: border-box;
}  
```
Define column width. Typically, we want a responsive grid-view with 12 columns. Therefore, each column’s width is 100% / 12 = 8.33%.
Add a breakpoint, use @media (a media query is a CSS technique introduced in CSS3) rule to include a block of css property only if a certain condition is true
- Design for mobile first. Add the following CSS rule
```
  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
  }  
```
- Additionally, we may decide to handle all screens smaller than 768px the same way; e.g., each column should have a width of 100%.
```
  @media only screen and (max-width: 768px) {
      /* For mobile phones and tablets: */
      [class*="col-"] {
          width: 100%;
      }
  } 
```
- Add CSS rules to adjust screen bigger than 768px (for example, desktop)
```
  @media only screen and (min-width: 768px) {
      ... rules ...
  } 
```
- Optional: add CSS rule to hide portions of content when the screen is smaller than 600px (phones: 576px, tablets: 768px, desktops: 992px, large desktops 1200px). For example, consider the following snippet, which will hide the element with id “fadeshow” if the screen with is under 600px.
```
  @media only screen and (max-width: 600px) {
      #fadeshow {
          display: none;
      }
  } 
```
Apply the grid system to the web page

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. Please see the deployment instructions for more information. Create a directory, hw2, 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/

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. Note: For this homework, you only need 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/hw2/
- 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.

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.

Install the ANDI tool: the quickest way to install ANDI is to add the “ANDI” button to your bookmarks toolbar. To use the tool, open your website in your browser and click the new “ANDI” bookmark to load the JavaScript application that tests the site. ANDI provides a report at the top of the page
Run ANDI on your index.html page. Turn on the “tab order” view to see how users may interact with page elements by using the tab key. It will number the links and inputs on the page based on focus from the tab key.
- If your page does not have any issues, great! Please try ANDI on some other pages to sample some of the issues it can detect. For example, view it on our Sprint 2 Project page.
- If your page does have issues, address them and re-run the tool until your page passes the test.
Once your document has passed accessibility testing, screenshot the window and save the screenshot as a document named accessibility.pdf or accessibility.png. Your screenshot may be either a PDF or image. You must submit this file with your code to Gradescope.

You may also consider running the Lighthouse accessibility testing on your site. More information about Lighthouse can be found on its documentation pages.

Submission

The submission will consist of two parts:

Submit your code (HTML, CSS, etc), Validation PDF, and ANDI screenshot 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. If you work with a partner, each person should upload the submission to Gradescope independently.
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 50 points, based on the following rubric:

5 points - HTML pages (completed in our Activity)
5 points - Metadata and Open Graph Metadata (on index.html, completed in our Activity)
10 points - CSS styles
10 points - HTML validation (of index.html)
10 points - ANDI accessibility report (of index.html)
10 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 48 hours 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>
    ...