ah teaches information design


This project has you completing the HTML and CSS exercises by rebuilding a wireframe and making it responsive.

This project is to be completed individually.


Before your lab time on Mar 12.


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 thus far.

Cite any knowledge that is not yours in a comment in the code. The internet is a glorious repository of information and you are welcome to draw on it, but you must let us know when something does not originate from your own knowledge. If work has been copied without citation the entire project grade is forfeit. A simple solution to this potential problem is to just note where your knowledge is coming from.

Starting Mar 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 — in other words, it should work on mobile and desktop resolutions.
  • Clear commenting of any resources drawn upon to complete this project.

Final Delivery

Please upload your file to your SFU filespace without over-writing your earlier submissions and submit the URL to the Canvas assignment before your lab time on Mar 12.

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). These grades have already been assigned.

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 mouse hover or keyboard focus).

Responsive (0.5 points)

The wireframe effectively reorganizes itself at mobile and desktop resolutions.

Clear Commenting (0.5 points)

Clear commenting of resources used is included within the code.

Valid & Semantic HTML (1 point)

The markup is valid and appropriately semantic — using elements to wrap content as they were defined to be used — HTML5.

Valid CSS (1 point)

The styling is valid CSS3.