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