Question
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
community 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 lab1 folder and the
fbstyles.css file in the lab1\css 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>…</title> tags contain the text
New Harvest Food Bank.
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 <head> section of the index.html file:
<meta name="viewport" content="width=devicewidth, initial-scale=1">
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:
<p>New Harvest is proud to help and support our local community</p>
<h3>Volunteer Opportunities Available</h3>
<p>Call Us Today to Inquire, <a href="tel:5558235555">(555) 823-5555</a></p>
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%;
}
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 the nav ul selector to style list items within the nav:
/* Style for nav li specifies the background color, rounded corners,
removes bullet style, and applies margins and padding for list items
within the navigation */
nav li {
background-color: #FF6600;
border-radius: 1em;
list-style-type: none;
margin: 0.3em;
padding: 0.4em;
}
11. In the fbstyles.css file, add the following comment and style after the one you
added for the nav 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 stylethe 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 5–59.
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.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.