Homework 2 - Static Web Page

Due: Thursday, February 15, 2024 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 work on a static web page. 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).

Choose from one of the following options around which to design your website:

Create your personal website or web page (if you choose this option, you should do it individually)
- You are encouraged to explore and experience with HTML to design your own page and layout.
Create a static page of a website of your choice (be creative!)
- This could be a website around a shared hobby, a new business idea, etc!

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

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

Create a Static Web Page

Design your web page — you are recommended to draw the UI without coding or implementation.
Transform your drawing into an HTML file.
- Create an HTML file ( index.html not index.htm ).
- A few design decisions:
  - If you decide to use this HTML file as the main/first page of your site, save it as index.html.
  - Q: What exactly is index.html for?

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>

Add Open Graph metadata to your page. You should at least include the following metadata elements:
- og:title - The title of the object (i.e., page)
- og:type - The type of object (likely “website”)
- og:image - An image to represent your object (page)
- og:url - The URL that will be used
- og:description - A short description of your object
- og:site_name - The larger web site name
Inside the <head> element, Add <title> element containing the title of the page.
```
 <title>Your Title Here</title>
```
Inside the <body> element, add at least the following elements:
- <header> element to help semantically structure the web page.
  - Include a heading <h1> with the title or a strong heading.
  - A smaller subheading <h2> element containing tagline or some important phrase.
    - Note: observe how content in <h1> and <h2> are displayed by default.
  - A <nav> element to include and organize your navigation menu.
    - You should create 4 links to other pages in your navigation menu. For each link, create a minimal HTML page to maintain look-and-feel and navigation (and avoid HTTP 404 errors).
- <section> element containing a group of content about your website.
  - An <h2> element containing a specific phrase about this web page/site.
  - A paragraph <p> giving a brief intro or few sentences about you or your web page.
  - Include an image using the <img ... /> tag with an alt alternate text attribute.
- <section> element containing a group of 3 highlights about you or your site.
  - Each highlight will be a <section> element containing an image <img>, a highlight title <h3>, and a brief paragraph <p>.
  - Add an anchor <a> tag to link the content of the <h3> to another page in your site. This could be one of the other 4 pages linked in your navigation or another page.
  - Note: this is a design decision. How many highlights should be on this home page? Two — may leave too much space, four — may become crowded, three — seems about right. However, this depends on the content of your page. The most important factor is “balance.”
- Add a <footer> element at the end of the page.
  - Include copyright information about your site inside a <small> element so that it will be rendered in small print.
  - Add the same navigation menu from the header to the footer. Q: Why should you provide navigation at the top and bottom of the page?
For each of the links in your navigation (and highlights) above, create HTML pages (i.e., contact.html).
- 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

We’ll be discussing Responsive Design on Tuesday, but you are encouraged to start designing your page before then! If you’d like to get a head start on this portion of the assignment, please review the following documentation:

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

You may choose to either use a grid model to create a responsive view or use Flexbox.

Flexbox

If you choose to use Flexbox, you should create a responsive view for the <section> containing your highlights as defined below:

Style the <section> element containing your 3 highlights as a flexbox container, wrapping the contents to display as a list on mobile and as a row on larger displays.
Set an initial flex basis for each of your highlight <section> elements to 300px. On a laptop, they should display horizontally across the page in a row, but on mobile (and narrower screens), they should display vertically in one column.

Grid System

If you choose to use the grid system, which we will experience with Bootstrap, you should create a responsive view by updating your page as follows:

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:

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