n I LAN> Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter. Lab 1: Creating a Mobile Design for the New Harvest Food Bank Problem: You volunteer at a local food bank called New Harvest Food Bank that collects com- munity food donations and provides food and other services to those in need. The organization has asked you to create a responsive website. With a growing mobile market, you decide to implement a mobile-first strategy. Style the webpage shown in Figure 5-59 with an external style sheet. Instructions: Perform the following tasks: 1. Open your text editor and then open the index.html file in the labl folder and the fbstyles.css file in the labl\ess folder from the Data Files for Students. 2. In the index.html document, modify the comment at the top of the page to include your name and today's date. Make sure the title>... tags contain the text New Harvest Food Bank 81305545113/ch/264./4/400.00.7.74 3. In the fbstyles.css file, modify the comment at the top of the page to include your name and today's date. 4. In the index.html file, modify the link to the external style sheet to reference fbstyles.css. 5. Add the following viewport meta tag to the chead> section of the index.html file: 6. Delete the width and height attributes from all img elements. 7. In the main element, create a new div element with a class="mobile" attribute and value. Add the following content to the new div element:

New Harvest is proud to help and support our local community

Volunteer Opportunities Available

Call Us Today to Inquire, (555) 823-5555

8. In the fbstyles.css file, add the following comment and style after the style for the body element to help create flexible images: /* Style to create a fluid image */ img { max-width: 100%; New our Volt Ava Call 9. In the fbstyles.css file, add the following comment and style after the style for element to style the unordered list in the nav: /* Style specifies padding and margins for unordered lis 45113/cfi/264!/4/4@0.00:48.6 max-width: 100%; Figure 9. In the fbstyles.css file, add the following comment and style after the style for the nav element to style the unordered list in the nav: /* Style specifies padding and margins for unordered list */ nav ul { padding: 0; margin-top: 0.5em; margin-bottom: 0.5em; 10. In the fbstyles.css file, add the following comment and style after the one you added for th ul selector to style list items within the nav: /* Style for nav li specifies the background color, rounded corner removes bullet style, and applies margins and padding for list ite within the navigation */ nav li { background-color: #FF6600; border-radius: 1em; list-style-type: none; margin: 0.3em; padding: 0.4em; Condom 5113/01/265/4/420.000.00 L 248 HTML Chapter 5 Responsive Design Part 1: Designing for Mobile Devices In the Labs continued 11. In the fbstyles.css file, add the following comment and style after the one you added for the na li selector to style the nav links: /* Style changes navigation link text color to white and removes the underline / nav li a { color: #FFFFFF; text-decoration: none; 12. In the fbstyles.css file, add the following comment and style to the end of the style sheet to style the mobile class: /* Style displays the mobile class .mobile display: inline; 13. Validate your HTML code and fix any errors. 14. Validate your CSS code and fix any errors. 15. Save all files and open the index.html page within a browser as shown in Figure 559. 16. Submit your assignment in the format specified by your instructor 17. In step 12, you created a class named mobile. Use your favorite search engine to find an article that discusses popular or appropriate class and id names. Document the website and be prepared to explain or write a short paragraph on what you learned