Part 1:

In Week 4, you styled the Dog Hall of Fame webpages. In this exercise, you will update

those pages to apply the principles of responsive design. Do the following activities

1. Open the external style sheet you created in Week 4 and save it with the name css in the styles folder within the your class folder.
2. Add your name and the current date as a comment to the first line of the dogstyles05.css file.
3. Open the files you created for the Dog Hall of Fame 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. Modify the link to the external style sheet to reference dogstyles05.css.
5. Decide what responsive design principles you want to employ. At a minimum, update the HTML and CSS files to do the following:
   1. Add the viewport meta tag.
   2. Create flexible images.
   3. Create a fluid layout.
   4. Determine the essential content for each page to be displayed for a mobile viewport.
   5. Design a navigation system suitable for a mobile viewport.
   6. Refine your style sheet as needed to add margins and padding using em units of measure.
6. Save and test your files.

Part 2:

In Part 1 of this week lab, you styled the Dog Hall of Fame webpages for a mobile viewport. In this this part, you will update those pages to apply media queries for tablet and desktop viewports. Do the following activities:

1. Open the external style sheet you created in part 1 and save it with the name css
2. Add your name and the current date as a comment to the first line of the dogstyles06.css file
3. Open the files you created for the Dog Hall of Fame in part 1 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. Modify the link to the external style sheet to reference dogstyles06.css.
5. Decide how you will design the tablet and desktop viewports. At a minimum, update the HTML and CSS files to do the following:
   1. Create a media query for tablet and desktop viewports.
   2. Create style rules for tablet and desktop viewports.
   3. Create style rules for pseudo-classes within the desktop viewport.
   4. Apply a gradient to the webpages in the tablet and desktop viewports.
   5. Hide the mobile class for the tablet and desktop viewports.
   6. Display the desktop class for the tablet and desktop viewports.
   7. Refine your style sheet as desired.
   8. Adjust viewport widths where necessary.
   9. Add comments to note all changes and updates.
6. Save and test your files.
7. Validate and correct your HTML and CSS files.