ah teaches web design and dev

Layout Exercise (Sept 21)

This exercise is required.

As part of your styleguide, you are expected to include layout of your grid structure. This task has you practicing working with flexbox on that structure.


For this coding task you will be working with an existing set of HTML and CSS files. Please download the starter files. When you open up the index.html file, you will note that there are already number of grey and black blocks for you to apply the grid structure to. Please add classes to the existing structure as necessary to make it behave as a responsive grid. Our suggested process:

  1. Set every element to use the border-box model.
  2. Set the .container class to display as a flexbox, and to wrap flexbox items responsively.
  3. Set the .block class to grow as needed, as well as to have a flex-basis of 15em.
  4. Set block #5 to be the first of all the blocks when the window is above 30ems in width.
  5. Set the meta viewport tag to ensure your page scales appropriately on mobile devices.

If you are looking for assistance on this particular exercise — the Flexbox Cheatsheet (Joni Trythall) provides a good overview of flexbox properties.

Once done styling the guide, please:

  1. Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
  2. Validate the page using the CSS Validator (W3C) to find any errors or potential problems in your markup.
  3. Please upload your file to your SFU filespace and submit the URL to the Canvas assignment.

Your submission is due before the end of your lab time.

The Rules

Please remember the rules for this exercse:

  1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
  2. 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.
  3. If work has been copied without citation the entire exercise portion of the final grade is forfeit (it totals to 5% of the final grade). A simple solution to this potential problem is to just note where your knowledge is coming from.

Recommended Resources