ahandrewh teaches IAT-339web design & development

Introduction

As part of your styleguide, you are expected to include responsive combinations of elements such as the main navigation and a product or service listing. This exercise has you practicing working with CSS grids on that responsiveness.

You may use your exercise submission within your project with no plagiarism concerns.

Instructions

For this coding task you will have to use your main navigation from the P1 styleguide to work on responsiveness. Our suggested process:

1. Make a copy of your P1 styleguide, but remove anything except for the main navigation from the styleguide.
2. Set the meta viewport tag on your HTML to ensure your page scales appropriately on mobile devices.
3. Set every element to use the border-box model.
4. Set the navigation items (buttons) to display as a columns in a CSS grid.
5. At the smallest display width — around 320 pixels — make sure your navigation stacks in one column.
6. Starting from the smallest width, resize the width of window to figure out when navigation items can be one next to another.
7. Using an @media query, change the grid structure so the navigation items are next to one another.

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. Please upload your files to your SFU filespace and submit the URL to the Canvas assignment.
3. Validate the page using the HTML, CSS and accessibility validator to find any errors or potential problems in your markup.

Your submission is due before lecture on Oct 6.

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.

Recommended resources

• CSS Reference (Mozilla Developer Network): An overview of available CSS properties and selectors as well as links to their definitions.
• An HTML, CSS, and Accessibility Validator: This validator will help you find errors across multiple pages of your website.
• A Complete Guide to Grid (CSS Tricks): A very in-depth explanation of all the available CSS grid properties.
• How to Upload to SFU Filespaces Using SFTP: Instructions on uploading files to your SFU filespace.

Exercise rules reminder

Please remember that the exercise rules still apply:

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 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.
3. 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.