ah teaches information design


Over the past couple weeks you have worked on a series of exercises to practice working with HTML and CSS. To complete the exercise you will be finishing rebuilding your wireframe and making it responsive.

This project is to be completed individually.


Before your lab time on Nov 19.


10% of your final grade (includes the exercises).


You are only given one week to complete this project. Please make sure to take into consideration any feedback you receive from the exercises you have completed.

Starting Nov 5

Over the time leading up to the submission of this project you will be getting back grades and comments (if necessary) on the earlier exercises associated with this project. Use the grades and the comments as a reference point for what needs to be readdressed in your final submission.

Continuing to work with the HTML and CSS you built as part of the P3 Layout Exercise, the final step for this exercise is to completely recreate your wireframe. This should include:

  • Recreating the layout shown in your wireframe.
  • Clear visual interaction cues for interactive elements in your wireframe.
  • A responsive version of your pictured wireframe — it should work on mobile and desktop resolutions.

Final Delivery

Please upload your files to your SFU filespace without over-writing your earlier submissions and submit the URL to the Canvas assignment before your lab time on Nov 19.

Grading Rubric

Your project will be graded on the following criteria:

Process (6 points)

Each of the three exercises are graded individually for 2 points each (for a total of 6 points).

Layout (0.5 points)

Layout resembles the wireframe.

Interaction Cues (0.5 points)

All interactive elements provide clear visual cues when interacted with (either by hover or keyboard focus).

Responsive (1 point)

The wireframe effectively reorganizes itself at mobile and desktop resolutions.

Valid HTML (1 point)

The markup is valid and appropriately semantic HTML5.

Valid CSS (1 point)

The styling is valid CSS3.