Changing a Nonresponsive Page into a Responsive Page
Instructions: Work with the responsive05.html file in the analyze folder and the
responsivestyles05.css file in the analyze\css folder from the Data Files for Students.
Several responsive web design resources are listed on the responsive05 webpage, 

but the HTML document and the style sheet are not coded for responsive design as

shown in Figure 5–57. Use Figure 5–58 as a guide to correct these files. You will also

use professional web development best practices to comment, indent, space,
and validate your work.

1. Correct

     a. Open the responsive05.html file in your editor from the Data Files for Students
         and then modify the comment at the top of the page to include your name and

         today’s date.
      b. Open the responsivestyles05.css file in your editor from the Data Files for
          Students and then modify and correct the comment at the top of the document
          to include your name andtoday’s date.
      c. View responsive05.html in your browser and resize the page to recreate the
          problems with a nonresponsive webpage as shown in Figure 5–56. The content
          and images are cut off as the browser width decreases.
     d. In the responsive05.html file, add the viewport meta tag right above the

          closing </head> tag:

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

     e. In the responsive05.html file, delete the height and width attributes from the

             img element.
     f. In the responsivestyles05.css file, make the following property value changes:
            main selector, width property, change from 960px to 100%
    g. In the responsivestyles05.css file, create a style that has an img selector with a

            max-width property and a value of 100%.

2. Improve

     a. In the responsive05.html file, add indents and spacing for improved readability.
     b. In the responsivestyles05.css file, create a style that has an ul selector with a padding
         property and a value of 0.
     c. In the responsivestyles05.css file, create a style that has an li selector with
          the following properties and values:
                  list-style-type property and a value of none
                 padding property and a value of 1%
                  margin property and a value of 1%
      d. In the responsivestyles05.css file, create a style that has an li a selector with
          the following properties and values:
                    color property and a value of #FFFFFF
                    text-decoration property and a value of none
                    list-style-type property and a value of none

      e. Save your changes and test your webpage. It should look like Figure 5–58.
       f. Validate your CSS file using the W3C validator found at
           http://jigsaw.w3.org/css-validator/ and fix any errors that are identified.
       g. Validate your HTML webpage using the W3C validator found at validator.w3.org
            and fix any errors that are identified.
       h. Review some of the resources listed on the Responsive Web Design Best
           Practices page,  and then comment on which of these practices you would like

          to understand better and why.