The goal of this exercise is the practice Desktop First Design.
Due Date and Time
Exercise 6 is due by 12:59pm on October 30th, 2018. I will disable submission at the start of class.
Instructions
Setup
- Download the exercise files from the Box Folder named CS0134-Exercise-6-<username> that I shared with you.
- Unzip and copy the ‘CS0134-Exercise-6-<username>’ folder onto your flash drive.
- Open VSCode and open the ‘CS0134-Exercise-6-<username>’ folder.
- ‘File’ -> ‘Open Folder…’
- Open the ‘CS0134-Exercise-6-<username>’ folder on your flash drive.
Goals
Each goal is worth 1 point. Total of 12 points.
Place all style rules in the style.css file. Make all chanages in style.css
- At the end of the style.css file, add a media query with a max-width of 959px
- At the end of the style.css file, add a media query with a max-width of 767px
- At the end of the style.css file, add a media query with a max-width of 497px
- Within the media query for max-width of 959px:
- set display to none for #top-menu
- set display to block for #hamburger-button
- Within the media query for max-width of 767px:
- set float to none for the main and aside elements
- set width to 96.25% for the main and aside elements
- Within the media query for max-width of 497px:
- set width to 100% for they body element
- set float to none for the header image and #title-subtitle
- set width to 90px for the header img
- set margin to 10px for top and bottom and auto for left and right for the header image
- set display to block for the header img
Testing your changes
Refer to section 8-1 in the book for how to test.
Results
When at the smallest size, your site should look similar to the following.
How to Submit Your Work
Upload your style.css file to the ‘CS0134-Exercise-6-<username>’ Box folder.
Note: When you want to upload a new version of one of your exercise files, click on the file in box and select “Upload New Version”.
I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.