2. Applying Responsive Design to the WebDevPros Webpages
Professional
Part 1:

In Chapter 4, you created an external style sheet for WebDevPros website. In this
exercise, you will update site to respect the principles of responsive design.
1. Open the external style sheet you created in Chapter 4 and save it with the name
    webdevstyles05.css in the styles folder within the your_turn_2 folder.
2. Add your name and the current date as a comment to the first line of the
    webdevstyles05.css file.
3. Open the files you created for WebDevPros in Chapter 4 in your HTML editor and
     make sure your name and the current date are added as a comment to the first line

     of all files.
4. Update the HTML files to do the following:
       a. Modify the link to the external style sheet to reference webdevstyles05.css.
       b. Add the viewport meta tag.
       c. Delete the height and width attributes from all img tags.
5. You will use a mobile-first strategy that hides images and the top navigation system
     by default. To do this, add a class="desktop" attribute and value to all images on your
     pages and to the top navigation system. Review the content on each page and apply

     the desktop class to nonessential content for a mobile viewport.
6. If you have not already done so, add an unordered list within the <footer> section
    of each webpage to provide a navigation system at the bottom of each page.

7. Update the CSS file to do the following:
    a. Measure all width properties in %.
    b. Change the measurements of all textual styles to ems or %.
    c. Create flexible images.
    d. Add the following style for the desktop class to remove the images and
        upper navigation system for mobile users:
                   .desktop { display: none; }
    e. Set the width of the #outer-wrapper to 100% for mobile users. (Hint: You may
        have a different class name for the <div> that surrounds the entire webpage.)
     f. Determine the essential content for each page to be displayed for a mobile viewport.
     g. Style the navigation links within the footer and remove the default padding from
         unordered list within the footer.
8. Refine your style sheet as needed to add margins and padding using flexible units

    of measure.
9. Save and test your files.

10. Validate and correct your HTML and CSS files, and submit your assignment in
      the format specified by your instructor.
Part 2:

In step 6, you added a navigation system to the bottom of each page and in step 7d, you
removed images and the upper navigation system for a mobile-first strategy. Why is a
navigation system at the bottom of each page a good consideration for a mobile-first strategy?