Week7 Lab: Creating a Table and a Form for the Montana Food

Week 7 Tutorial
This tutorial includes Week7 Lab. This tutorial is part of your assessment task 1. Please submit your
completed work in ZIP format onto moodle.
Note: Submit your ZIP file in your respective lecturer’s tutorial submission link for marking and
feedback.
Week7 Lab: Creating a Table and a Form for the Montana Food
Bank Website
Problem: You volunteer at a local food bank called Montana Food Bank that collects community food
donations and provides food and other services to those in need. The company has asked you to
create a responsive website. You have already created the website but now need to create the
Volunteer page and insert a table. You also need to create the Contact Us page and insert a form.
Create and style the table on the Volunteer page as shown in Figure 7.1 for the mobile, tablet, and
desktop viewports.
Create and style the form on the Contact Us page as shown in Figure 7.2 for the mobile, tablet, and
desktop viewports.
(a) Mobile viewport (b) Tablet viewport
(c) Desktop viewport
Figure 7.1
(a) Mobile viewport (b) Tablet viewport
(c) Desktop viewport
Figure 7.2
Instructions: Perform the following tasks:
1. Open your text editor and then open the foodbank.html template file in the week7 tutorial
material folder in moodle and use it to create the volunteer.html file.
2. In the volunteer.html document, update the comment at the top of the page to include today’s
date, then create an h2 element within the main element:

We have several opportunities for you to help your fellow community members.

.
3. Create the following div element below the h2 element.

Our Volunteer Opportunities include:

  • Pantry Organizer
  • Food Package Assembly
  • Food Transporter
  • Food Server

Please contact us at (555) 555-9987 for more details.

4. Create a div element with a class=”desktop” after the mobile class div and then add the following
table:

Volunteer Opportunities
Position Date Time Location
Pantry Organizer Every Friday 9:00am – 12:00pm Main Warehouse
Food Package Assembly Every Monday 9:00am – 12:00pm Main Warehouse
Food Transporter Every day 12:00pm – 4:00pm Various locations
Food Server Every Tuesday, Wednesday, and Thursday 12:00pm – 2:00pm Various locations

5. In the fbstyles.css file, modify the comment at the top of the page to include today’s date.
6. In the fbstyles.css file, create the following new style rules within the tablet media query and
include comments for each:
table, th, td {
border: solid 0.1em #FF6600;
border-collapse: collapse;
padding: 1em;
}
caption {
font-size: 1.5em;
padding-bottom: 1em;
}
7. In the fbstyles.css file, create the following new style rules within the desktop media query and
include a comment:
table {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
8. Save all files and open the volunteer.html page within a browser and view the page in all three
viewports, as shown in Figure 7.1.
9. Open your text editor and then open the foodbank.html template file in the week7 tutorial folder
in moodle. Use the template to create the contact.html file.
10. In the contact.html document, update the comment at the top of the page to include today’s
date, and then create an h4 element within the main element:

Please complete the form below for more information about
our volunteer opportunities.

.
11. Create the following form below the h4 element within the main element:













12. In the fbstyles.css file, create the following new style rules above the media queries and include
comments for each:
input, textarea {
display: block;
margin-bottom: 1em;
}
label {
display: block;
}
13. In the fbstyles.css file, create the following new style rules within the tablet media query and
include a comment:
label {
float: left;
padding-right: 0.5em;
text-align: right;
width: 8em;
}
14. Save all files, open the contact.html page within a browser, and view the page in all three
viewports, as shown in Figure 7.2.
15. Validate your HTML code and fix any errors.
16. Validate your CSS code and fix any errors.
17. Submit your assignment in the format specified by your lecturer.