2. Applying Additional Responsive Design Techniques to the WebDevPros Webpages
Professional
Part 1: In Chapter 5, you created a mobile layout for WebDevPros. In this exercise, you will update
the site to include media queries for tablet and desktop viewports.
1. Open the external style sheet you created in Chapter 5 and save it with the name
    webdevstyles06.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 webdevstyles06.css
    file.
3. Open the files you created for WebDevPros in Chapter 5 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:
    a. Apply a class named mobile to elements that should only be displayed on a mobile viewport,
        such as the telephone link.
    b. Apply a class named desktop to elements that should only be displayed on a tablet or
        desktop viewport.

5. Update the CSS file to:
   a. Create a media query for tablet and desktop viewports.
    b. Create style rules for tablet and desktop viewports.
    c. Create style rules for pseudo-classes within the desktop media query.
    d. Hide the mobile class for the tablet and desktop viewports.
    e. Display the desktop class for tablet and desktop viewports.
    f. Refine your style sheet as desired.
    g. Adjust viewport widths if necessary.
    h. Add comments to note all changes and updates.

6. Save and test your files.
7. 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?