please use notepad++ or bbedit

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 557. Use Figure 558 as a guide to correct these files. You will also use professional web development best practices to comment, indent, space, and validate your work.

Figure 557 Figure 558

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 todays 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 and todays date.

c. View responsive05.html in your browser and resize the page to recreate the problems with a nonresponsive webpage as shown in Figure 556. 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 tag:

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 property and a value of 0.

c. In the responsivestyles05.css file, create a style that has an li 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%

selector with a padding selector with the following

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 558.

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.

responsivestyles05.css

rwd.jpg

responsive05.html