information design

P3: HTML/CSS (due November 12)

On this page:

Introduction

This project has you practicing building out a portion of your final project using HTML and CSS.

This project is completed individually. AI use is not permitted for this project and use of AI will result in a grade of zero.

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

This term's context

For P3 you will be building out one of your assistive device pages from P2 using HTML and CSS to help get started on what will be built out in full in P4.

Weekly instructions

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

From October 29 to November 5

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.
Bring to your November 5 class

Your draft of the page to class for support in building it out further.

From November 5 to November 12

This week is for making your page responsive.

Please complete the following:

  1. 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.
  2. Create a git repository on SFU GitHub. We will cover in-class how to set up SFU GitHub and collect all your files on it. If you are unsure how to do so please reach out to .
  3. Set up your pages to be published by Github. The class this week covers this but you can also follow steps 6-9 in this tutorial to publish your website.
  4. 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.
  5. Annotate your code. If you have drawn upon any resources outside of the in-class code tutorials please make sure you cite them in your code as a comment.

Note that final deliverables for this project are due the day before lecture. Depending on the content of your submission you may be requested to complete a code review in-class on November 12.

Grading rubric

Your project will be graded on the following criteria:

A B C D

Code (12 points):

  • Is HTML mark-up semantically appropriate?
  • Are headings sequenced appropriately?
  • Does CSS use responsive units 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 heading sequencing is appropriate.
  • 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 heading sequencing is appropriate.
  • 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 heading sequencing has a gap in steps.
  • 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.
  • The heading sequencing has multiple gaps in steps.
  • 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 (6 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 and 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.

Use of git (2 points):

  • Git has been used throughout?
  • The project is accessible through git pages?
  • Git has been used since its introduction in class
  • The project is visible as a published git page (i.e. pages.github.sfu.ca/...)
  • Git has been used since its introduction in class
  • The project is visible as a published git page (i.e. pages.github.sfu.ca/...)
  • There has been use of git starting from the two days before the project was due.
  • The project is visible as a published git page (i.e. pages.github.sfu.ca/...)
  • There has been little to no use of git in the project; i.e. the repository was created within the day before submission.
  • There is no published git page for the project.

Final submission requirements (November 12)

The final submission for P3 is a URL to your published HTML and CSS version of your wireframe page using SFU GitHub pages (pages.github.sfu.ca/...)

Your project submission is due to Canvas before 10:30am on November 12.

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.