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.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.