objective: Recreate a layout with the basic orientation and responsive qualities shown in the following wireframes (click to enlarge):

requirements:

1. Your layout should use the assignment05/index.html file as a starting point, but feel free to alter it as needed (Note: the assignment can be completed without adding any additional HTML to the file - focus on your style sheet).

   Download assignment files archive.

2. Attention should be paid to proper styling using CSS and ensuring that the site works well at various viewport sizes (note the screenshots above for your max-width values):
   1. at full-width, the page should have four columns
   2. at medium width and under (1175px), the page should have three columns
   3. at thin-most width and under (650px), the page should have one column
   4. note in the screenshots that at medium width, some of the items will not fit evenly into three columns
3. Publish the completed website to your web space.

tips:

• First, plan out your strategy for the structure of the HTML, keeping in mind the capabilities of the linear flexbox and two-dimensional grid.
• Second, make an effort to style the semantic elements themselves as much as possible. Having said that, a semantic-free div container can be very useful for reorganizing parent/child relationships for flex/grid layouts.
• Use your browser tools to help you measure the various breakpoints for your media queries. Test the original site thoroughly.
• Work with live preview turned on so that you can see the effect of your style changes as you make them.
• You do not need to populate this layout with actual content – not even images. Basic place holder text is fine to demonstrate your layout works.

Check your work using the online HTML Validator.

Email the URL of your finished assignment to your instructor.

Exercise is due before the start of the next session. Your instructor will not hunt you down to hand this in - no email sent to your instructor equals zero marks.

assigned: session 9
due: session 10
weight: 5% of final grade