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
Web Design with HTML & CSS3: Comprehensive, 8th Edition
Jessica Minnick; Lisa Friedrichsen
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
Cengage Learning Australia
(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 [Link] template file in the week7 tutorial
material folder in moodle and use it to create the [Link] file.
2. In the [Link] document, update the comment at the top of the page to include today’s
date, then create an h2 element within the main element:
<h2>We have several opportunities for you to help your fellow community members.</h2> .
3. Create the following div element below the h2 element.
<div class="mobile">
<p>Our Volunteer Opportunities include:</p>
<ul>
<li>Pantry Organizer</li>
<li>Food Package Assembly</li>
<li>Food Transporter</li>
<li>Food Server</li>
</ul>
<p>Please contact us at <a href="[Link] 555-9987</a> for more details.</p>
</div>
4. Create a div element with a class=”desktop” after the mobile class div and then add the following
table:
<table>
<caption>Volunteer Opportunities</caption>
<tr>
<th>Position</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
</tr>
<tr>
<td>Pantry Organizer</td>
<td>Every Friday</td>
<td>9:00am - 12:00pm</td>
<td>Main Warehouse</td>
</tr>
<tr>
<td>Food Package Assembly</td>
<td>Every Monday</td>
<td>9:00am - 12:00pm</td>
<td>Main Warehouse</td>
</tr>
<tr>
<td>Food Transporter</td>
<td>Every day</td>
<td>12:00pm - 4:00pm</td>
<td>Various locations</td>
</tr>
<tr>
<td>Food Server</td>
<td>Every Tuesday, Wednesday, and Thursday</td>
<td>12:00pm - 2:00pm</td>
<td>Various locations</td>
</tr>
</table>
5. In the [Link] file, modify the comment at the top of the page to include today’s date.
6. In the [Link] 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 [Link] 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 [Link] 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 [Link] template file in the week7 tutorial folder
in moodle. Use the template to create the [Link] file.
10. In the [Link] 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:
<h4>Please complete the form below for more information about
our volunteer opportunities.</h4>.
11. Create the following form below the h4 element within the main element:
<form>
<label for="fName">First Name:</label>
<input type="text" name="fName" id="fName">
<label for="lName">Last Name:</label>
<input type="text" name="lName" id="lName">
<label for="email">Email Address:</label>
<input type="email" name="email" id="email">
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone">
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="3" cols="25">
</textarea>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
12. In the [Link] 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 [Link] 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 [Link] 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.