Question
Lab 2: Creating a Responsive Website for Steve’s Screen Services
Problem: You work for a screening company called Steve’s Screen Services that specializes
in screening, cleaning, and repairing screened patios, decks, and porches. The company has
asked you to create a responsive website. Style the webpage shown in Figure 5–60 with an
external style sheet.
Instructions: Perform the following tasks:
1. Open your text editor and then open the index.html file in the lab2 folder and the
screenstyles.css file in the lab2\css folder from the Data Files for Students.
2. In the index.html file, 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 Steve’s Screen
Services. Add this title to the template file as well.
3. In screenstyles.css, modify the comment at the top of the page to include your name
and today’s date.
4. In the index.html fi le, create a link to the external style sheet screenstyles.css.
Add this link to the template file as well.
5. Add the following viewport meta tag to the <head> section of the index.html file and the
template file:
<meta name="viewport" content="width=device-width, initial-scale=1">
6. Delete the width and height attributes from all image elements in the index.html file and
the template file.
7. In the index.html and template files, code each set of navigation links as an unordered
list.
8. In the index.html file, 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:
<h3>Need your patio screened or just a small repair?</h3>
<p><a href="tel:5558235555">Call us today</a>
for a FREE estimate and use the reference code
Mobile Offer to receive a 10% discount</p>
9. In the screenstyles.css file, add the following style after the style for the body element
images: to help create flexible
img {
max-width: 100%;
}
10. In the screenstyles.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;
}
11. In the screenstyles.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: #000066;
list-style-type: none;
margin: 0.4em;
padding: 0.5em;
}
12. In the screenstyles.css file, add the following comment and style after the style for
nav li 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;
}
13. In the screenstyles.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;
}
14. Validate your HTML code and fix any errors.
15. Validate your CSS code and fix any errors.
16. Save all files and open the index.html page within a browser as shown in Figure 5–59.
17. Submit your assignment in the format specified by your instructor.
18. In steps 7 and 11, you created and styled the navigation element to use an unordered
list. Use your browser to research trends in navigation design for responsive web design.
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'.