Exercise 9: CSS Media Queries
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See Responsive Web Design, the landmark article by Ethan Marcotte, for an overall introduction to responsive design.
- See Use CSS media queries for responsiveness.
- See How to choose breakpoints.
- See CSS3 @media Query for a very quick look media queries.
- See Media Queries for Standard Devices for some code snippet examples.
In this exercise you will demonstrate the use of CSS3 media queries, using min-width and max-width. Do not use any Javascript polyfills in this exercise.
1) Create a new Web page for exercise 9. Save this file as "exercise9.html".
2) Create a background image and save it at three different sizes. Make sure each image is optimized for the Web.
3) Using CSS media queries and (a minimum of three) breakpoints, instruct the browser to display the appropriate background image (on the body based on the size of the viewport. Specify that the background image is horizontally centered and does not tile (does no repeat).
4) Using CSS media queries and (a minimum of three) breakpoints, instruct the browser to style the page, varying at least five different styles for each breakpoint range, based on the size of the viewport.
5) Test your page by resizing the browser window.
6) Upload "exercise9.html" to your public_html folder on webhawks (and the images to your images folder).
7) Test your exercise 9 page. Note that this CSS3 code will only work in a modern browser.
8) Remember that all of your images must be optimized for the Web. See How to Optimize Images for the Web to remind you how to optimize your images for the Web.
9) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
10) This page must include the character encoding meta tag (as explained
in Character Encoding for Web Pages).
Because this tag tells the browser how to interpret the characters used
in the document, it should be the first tag in the <head> section.
So right after the <head> tag, place this line of code:
<meta charset="utf-8">
11) This page's <title> must indicate that this is your
exercise 9 page, so it should say something like "John Sky's DM60 Exercise
9".
12) This page must contain a relative link to your home page.
13) Make sure the HTML on this page validates (using the HTML 5 DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
14) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
15) If there are any errors, fix them, re-upload the page, and validate it again.
16) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.
17) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on . Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on //.