Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160c/exercises/ex08.php

Exercise 8: Responsive Web Design


Resources for this exercise:


In this exercise you will download and modify a responsive Web design template.

Step 1 - Download a responsive Web design template

1.1 See this demo in action at:
http://teacherjohn.com/demos/ResponsiveWebDesignDemo/responsive.html

Note the changes in layout that occur as you change the window width of your browser.

1.2) Go to this link to download the template:
http://teacherjohn.com/cabrillo/dm160c/exercises/ResponsiveWebDesignDemo.zip

1.3) If all goes correctly, the zipped file will automatically expand into a folder called ResponsiveWebDesignDemoi" after the file downloads. If it doesn't, you may need to manually open the zipped file with your decompression software.

1.4) You should now have two files: the Web page and the style sheet. You will be modifying both files before they become your exercise 8 page and style sheet.

1.5) Examine the Web page code. Note that it contains four columns of content. Also note that it uses the HTML 5 containers of header, nav, section, article, and footer.

1.6) Examine the style sheet code. Note that it contains floats that allow the containers to stack when they don't fit in a narrow-width window. Also note that it contains two "@media" rules with breakpoints at 600 pixels and 480 pixels in width. These rules come into play only when the window is narrowed to those breakpoints.

Step 2 - Modify the HTML to become your exercise page

2.1) Open the Web page template. This will become your exercise 8 page. You will need to make several changes to this file.

2.2) Replace all the generic content, including the menu, with your own custom content. Do not use any generic content.

2.3) You may choose to eliminate the third article container. If you do this, you will need to make changes to the widths of the other containers. This page must have a minimum of three columns (a menu and at lteat two columns of content).

2.4) This page must have a minimum of three menu items.

2.5) Add an image to this page. Make sure this image does not break to responsive nature of the design; see the CSS section for the styling tip. (This is not a background image).

2.6) This page must contain the HTML5 DocType, and the character encoding meta tag for UTF-8.

2.7) 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.)

2.8) Because this page is using the HTML 5 DocType, make sure you change the validator button image (if you are using an image insted of a text link) so that it says HTML, not XHTML.

2.9) This page must display your name and say "Exercise 8."

2.10) This page's <title> must indicate that this is your exercise 8 page, so it should say something like "John Sky's DM62 Exercise 8".

2.11) This page must contain a relative link to your home page.

Step 3 - Modify the CSS

3.1 Open the style sheet. Note that it contains minimal styling; it only has enough to create a responsive layout, and visible borders to see the containers.

3.2) Customize this style sheet to your liking. Make sure to customize the following:

3.3) To insure that images stay the right size for responsive layout, use this rule:

img { max-width: 100%; }

Step 4 - Upload and test

4.1) Upload the page to your folder, and upload the style sheet to your CSS folder.

4.2) Test your page to make sure it changes the number of columns down to one column in the smallest possible window width.

4.3) Make sure the HTML on this page validates (using the XHTML 5 DocType) with no errors, according to the W3C's online HTML Validator. 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.

4.4) Make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator.

4.5) If there are any errors, fix them, re-upload the page, and validate it again.

4.6) 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.

4.7) 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 3/24/14. 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 03/26/14.