ahandrewh teaches IAT-235information design

Introduction

The development portion of the final project requires responsive layouts. This exercise has you practicing working with CSS grids to practice that structure.

Instructions

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. The process:

1. Set the meta viewport tag to ensure your page scales appropriately on mobile devices.
2. Set every element to use the border-box model.
3. Set the .grid class to display as a grid.
4. Set the .column elements to organize into three columns when the window is above 40rems in width.
5. Set the .column elements to organize into six columns when the window is above 60rems in width.

Once done making the layout responsive

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 stylesheets.
3. Please collect all your files into a ZIP file for submission to the Canvas assignment.

Your submission is due to Canvas before 8:00am on November 12.

Recommended resources

• CSS Reference (Mozilla Developer Network): An overview of available CSS properties and selectors as well as links to their definitions.
• CSS Validator (W3C): A CSS validator to help you find errors in your stylesheet.
• A Complete Guide to Grid (CSS Tricks): A very in-depth explanation of all the available CSS grid properties.

Grading rubric

This code exercise is worth 1% (1 point) of your final grade.

• 0.75 points for completing the exercise.
• 0.25 points for validated code.

Exercise rules reminder

Please remember that the exercise rules still apply:

1. AI use is not permitted for code exercises. These are your opportunity to practice some of the basics we will need to progress through the course.
2. You can use other 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;
3. Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
4. If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.