Creating Media Queries
Instructions: In this exercise, you will use your text editor to add tablet and desktop media
queries to a style sheet. You will create style rules for a tablet viewport and a desktop viewport.
You then add a style rule for an image element to style the pictures in two columns for a tablet
viewport and three columns for a desktop viewport. The completed webpage is shown in
Figure 6–53 for a tablet viewport and Figure 6–54 for a desktop viewport. You will also use

professional web development practices to indent, space, comment, and validate your code.

Perform the following tasks:
1. Open apply06.html in your browser to view the webpage.
2. Open apply06.html in your text editor, review the page, and modify the comment
    at the top of the page to include your name and today’s date.
3. Open the applystyles06.css file from the apply\css folder. Modify the comment at
    the top of the style sheet to include your name and today’s date.
4. In the applystyles06.css file, add a media query to target a tablet viewport.
    Use min-width: 481px and include the following comment, Styles for tablet layout.
5. Create a new style rule for the img element to set the width to 45% within the tablet
     media query.
6. In the applystyles06.css file, add a media query to target a desktop viewport. 
    Use min-width 769px and include the following comment, Styles for desktop layout.
7. Create a new style rule for the img element to set the width to 30% within the desktop
    media query.
8. Save all of your changes and open the apply06.html in Google Chrome.

9. Use the developer tools in Google Chrome to view each viewport’s dimensions and
    determine a better viewport size for the desktop viewport.
10. Modify the desktop media query with the new value in the applystyles06.css file.
11. Validate your HTML document using the W3C validator found at validator.w3.org and fix any
      errors that are identified.
12. Validate your CSS file using the W3C validator found at
      http://jigsaw.w3.org/css-validator/ and fix any errors that are identified.
13. Submit the files in a format specified by your instructor.
14. In steps 4 and 6, you created media queries to target tablet and desktop viewports
      by using min-width and a value. Describe how you could use max-width and provide
      the value you would use for each media query.