Styling for Responsive Design:

Instructions: In this exercise, you will use your text editor to apply responsive design

principles to an existing webpage. You will make all images flexible, change the layout

to a fluid layout, and add a viewport meta tag. The completed webpage is shown in

 Figure 5–55. You will also use professional web development practices to indent, space,
comment, and validate your code. 

Perform the following tasks:
1. Open apply05.html in your browser to view the webpage. Adjust the browser window

     to view the fixed layout.
2. Open apply05.html in your text editor and modify the comment at the top of the page

    to include your name and today’s date.

3. Remove the width and height attributes from the image elements and save your changes.
4. Open the styles05.css file from the apply\css folder. Modify the comment at the top

    of the styles05.css page to include your name and today’s date.
5. In the styles05.css file, add a max-width property with a value of 100% to the

     img selector.
6. Locate the #container selector and change the width value to use
     a relative measurement and take up the full width of the page.
7. Save the styles05.css file and refresh the apply05.html file in your browser.

    Resize the browser to make sure that a fluid layout has been applied and that the

     images are flexible.
8. In apply05.html, add the following meta tag within the head section of the document:

        <meta name="viewport" content="width=device-width, initial-scale=1">

10. Use the developer tools in Google Chrome to view the page in an emulator.
11. Select a device and refresh the page. The page should look similar to Figure 5–55.
12. Validate your HTML document using the W3C validator found at validator.w3.org and
      fix any errors that are identified.
13. Validate your CSS file using the W3C validator found at
       http://jigsaw.w3.org/css-validator/ and fix any errors that are identified.
14. Submit the apply05.html and styles05.css files in a format specified by your instructor.
      Your instructor may also ask you to submit the images folder used with apply05.html.
15. In step 5, you changed the value to use a percentage (%) measurement.
      Explain how the  percentage unit of measurement makes a buid layout more

     flexible as compared to px.