ahandrewh teaches IAT-235information design

P3: HTML/CSS (due November 12)

On this page:

Introduction

This project has you practicing building out a component for your final project using HTML and CSS.

This project is completed individually.

P3: HTML/CSS is worth 10% of your final grade.

This term's context

For P3 you will be building out one of the grant listing pages (one row from the spreadsheet) using HTML and CSS to help get started on what will be built out in full in P4.

You are not expected to work within Embark's branding for this project.

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully.

From November 5 to November 12

This week is for building out the HTML and CSS for one page.

Please complete the following:

  1. Build out the HTML structure for the page. Strive for semantic markup as much as possible:
    • Think about how the HTML elements can best define the meaning of the content.
    • Do not worry about 'how things look' while building out the HTML.
    • Remember to sequence the heading elements correctly.
  2. Style the content using CSS to make it resemble your mobile wireframe. Keep in mind:
    • You can override what the default styling of the HTML element looks like using CSS.
    • Use rem units for font sizing, and text-related pieces (i.e. margins and paddings around text).
    • Do interactive elements change when we hover and focus on them using the keyboard?
    • Focus on making it look like your mobile wireframe only for now.
  3. Make your page responsive using CSS. Your page should work between mobile sizes (320px) up to desktop size (1920px). Use your wireframes as reference for how things should reorganize to desktop size from where you left off last week.
  4. Upload your project to your filespace. We will have generated filespaces for you over the week and provided instructions on how to upload your project to the filespace. If you are unsure how to do so please reach out to .
  5. Validate your code. We have made a full-featured validator available to you. Please use it to check your code once uploaded as locally saved code cannot be tested by the validator.
Bring to your November 12 lab and lecture

Your draft of the page for review. We will get you support and feedback on the project in lab and lecture.

Grading rubric

Your project will be graded on the following criteria:

A B C D

Code (8 points):

  • Is HTML mark-up semantically appropriate?
  • Does CSS use responsive units? Are they applied appropriately?
  • Does the code follow modern best practices as taught?
  • Are there any HTML and CSS errors identified by a validator?
  • Is the file and folder structure organized and web appropriate?
  • There is little to no room for improving the semantics of the HTML.
  • The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
  • The code follows modern best practices as taught or discovered.
  • The code is valid HTML5 and CSS3.
  • File/folder structure is clean and web appropriate.
  • Semantic HTML elements are used appropriately but there are missed opportunites for improving the semantics.
  • The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
  • There are up to 4 minor errors (things we have not taught you) in following modern best practices.
  • The code is valid HTML5 and CSS3.
  • File/folder structure is clean and web appropriate.
  • There is a semantically inappropriate use of HTML elements.
  • The CSS is using responsive units appropriately for sizing fonts but not for adjusting media queries.
  • There is 1 major error (a thing we have taught you directly) and up to 4 minor errors in following modern best practices.
  • The code is valid HTML5 and CSS3.
  • There are some minor concerns with the cleanliness or web appropriateness of the file and folder structure.
  • There is a semantically inappropriate use of HTML elements or old non-semantic elements continue to be used.
  • There is little use of responsive units in the CSS for sizing fonts and adjusting media queries.
  • There are up to 4 major errors (things we have taught you directly) and up to 8 minor errors in following modern best practices.
  • The code is not valid HTML5 or CSS3.
  • There are major concerns with the cleanliness or web appropriateness of the file and folder structure.

Design (2 points):

  • Does the page effectively reorganize at different browser sizes?
  • Do interactive elements provide clear feedback on mouse hover and keyboard focus?
  • The page reorganizes effectively to make use of space in the browser window.
  • Interactive elements clearly change visual states on mouse hover and keyboard focus.
  • The page reorganizes at different window sizes, but could use the space more effectively.
  • Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
  • The page does not reorganize at different window sizes or a horizontal scrollbar appears at some browser sizes.
  • Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
  • The page does not reorganize at different window sizes and a horizontal scrollbar appears at some browser sizes.
  • Interactive elements do clearly change visual states on mouse hover, but not keyboard focus.

Final submission requirements (November 12)

The final submission for P3 is a URL to your HTML and CSS version of your wireframe page.

Your project submission is due to Canvas before your November 12 lab.

Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.