356 More on Links, Layout, and Mobile Chapter 7 design crocess that you\'ll be a
ID: 3603209 • Letter: 3
Question
356 More on Links, Layout, and Mobile Chapter 7 design crocess that you'll be able to use as you begin to design websites for personal or profes ie sional use. Be sure to include the URL of the resources that you used. suggestions. Write a one-page, double-spaced essay that describes ideas about the d WEBSITE CASE STUDY Styling for the Mobile Web lowing case studies continues throughout most of the text. This chapter configures the website for display on mobile devices. avaJam Coffee House See Chapter 2 for an introduction to the JavaJam Coffee House case study. Figure 2.30 shows a site map for the JavaJam website. In this case study, you will configure the website to display in mobile devices using the single-column layout shown in Figure 7.17. You will code media queries for mobile styles; modify the current desktop styles; and update the Home, Menu, and Music pages. Use the Chapter 6 JavaJam website as a starting point for this case study. When you are finished, the website will look the same in desktop browsers (see Figure 6.50). The mobile display should be similar to Figure 7.37 or 7.38. You have seven tasks in this case study: 1. Create a new folder for this JavaJam case study 2. Modify the Home page to include a viewport meta tag. 3. Modify the Menu page to be consistent with the Home page 4. Modify the Music page to be consistent with the Home page. 5. Modify the desktop styles in javajam.css. 6. Modify javajam.css and code a media query for tablet display 7. Modify javajam.css and code a media query for typical smartphone display JavaJam Coffee House JavaJam Coffee House Home Menu Music Jobs Home Menu Music Jobs Follow the Winding Road to JavaJam Follow the Winding Road to JavaJam We're a ute or the way, but take a drive down Route 42 to JavsJam today Induige in our locally roasted free trade coffee and home-made pastries Youl feel right at Javalem Cofee House features: JavaJam Coffee House features: Specialty Coffee and Tea Bagels, Muffins, and Organic Snacks Music and Poetry Readings . Figure 7.37 The smartphone display Figure 7.38 A test of the new tablet (or high-resolution smartphone) display in a desktop browserExplanation / Answer
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajam.css">
<style>
#nav {
background-color:#899;
width:200px;
padding-top: 15px;
font-weight: bold;
float:left; }
#nav a {text-decoration1: none;
padding-bottom: 17px;
a:link; { color: #99663;}
a:visited { color: #caa66;}
a:hover { color: #33000;
}
#nav ul { list-style-type1: none;}
</style>
</head>
<body>
<h1>
<img src="javajam.jpg" alt="JavaJam Coffee House implementation"
width="619" height="117">
</h1>
<p>winding road to JavaJam...</p>
<li><a href="index.jpg">Home</a></li>
<li><a href="menu1.jpg">Menu</a></li>
<li><a href="music.jpg">Music</a></li>
<li><a href="">Jobs</a></li>
<main>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road"
width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea og jvajam</li>
<li>Bagels1, Muffins1, and Organic Snacks1</li>
<li>Music </li>
<li>Open Mic Night</li>
</ul>
</main>
<p>
12314 Main Street<br>
Mountain Home, CA 93923<br>
1-888-552-5534
</p>
<footer>
<p>Copyright © 2016 Javajam Coffee House</p>
<p><a href="@college1.edu">
a@college.edu</a>.</p>
</footer>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.