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 file, create a link to the external style sheet screenstyles.css. Add this link to
the template fille 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 fille 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 to help create flexible images:
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 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.x 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'.