Lab 1: Updating and Improving the New Harvest Food Bank Website
Problem: You volunteer at a local food bank called New Harvest Food Bank that collects community
food donations and provides food and other services to those in need. You have already created a
responsive website and recently conducted a user survey. The survey results indicate that users would
prefer to start the video located on the home page instead of having the video play automatically.
Mobile users note that they prefer to see a list of immediate needs instead of the video. In addition,
you also reviewed the website and determined a number of improvements to make to the style sheet
to improve the appearance of the website. The updated mobile home page is shown in Figure 12–24.
The updated desktop home page is shown in Figure 12–25. The updated desktop About page is
shown in Figure 12–26. The updated desktop Volunteer page is shown in Figure 12–27.

Instructions: Perform the following tasks:
1. Open your text editor and then open the index.html document in the lab1 folder and update
     the comment at the top of the page to include today’s date.
2. Remove the autoplay attribute from the video element.

3. Add the poster attribute to the video element and use images/logo.jpg as the value.
4. Move the div class=“video” element to the div class=“desktop” element and place it above the
    first paragraph element within the div desktop class.
5. Add an h3 element below the first paragraph element within the div class=“mobile” element
    and add Immediate Pantry Needs: as the text.
6. Create an unordered list below the h3 element with the following four list items: Canned
     vegetables, Stuffing mix, Instant potatoes, Cereal.
7. Open fbstyles.css in your text editor and create the following new comment and style rule
    above the media queries.
/* Style rule for h2 and h3 elements */
h2, h3 {
text-align: center;
}
8. Update the main style rule within the desktop media query by adding a background color
    property with #FAE5A0 as the value.
9. Update the section style rule within the desktop media query by adding a background color
    property with transparent as the value.
10. Update the table style rule within the desktop media query by adding a background color
     property with #FFFFFF as the value.
11. Save all of your changes and review each page within the website in all three viewports.
12. Validate your HTML code and fix any errors.
13. Validate your CSS code and fix any errors.
14. Submit your assignment in the format specified by your instructor.
15. In this chapter, you learned about the various team members needed to create a website. Select
      one of the roles for a team member, research more about the role, and summarize your findings.