NEED HELP with this in the next 2 hours PLEASE!! JavaJam Coffee House Case Study
ID: 3851919 • Letter: N
Question
NEED HELP with this in the next 2 hours PLEASE!!
JavaJam Coffee House Case Study In this chapter's case study you will use the exis starting point to create a new version of the websi display for mobile devices. Figure 8.35 displays wireframes ting JavaJam (Chapter 7) website as a for desktop browser, typical onfigure te that utilizes media queries to c t tablet screen, and typical smartphone screen display. When you have fin- Tablet Display Smartphone Desktop Browser Display wrapper header shed, the website will look the same in desktop browsers (see Figures 7.43 wrapper wrapper and 8.36). The mobile displays should Reade be similar to the screen captures in Figure 8.36. You have five tasks in this case study: header header main 1. Create a new folder for the Java Jam Coffee House website. Edit the javajam.css external style sheet to include media queries and styles needed for appropriate desk top, tablet, and smartphone display 2. fcoter URE 8.35 JavaJam wireframes 3. Edit the Home page (index.html) 4. Edit the Menu page (menu.html). 5. Edit the Music page (music.html). Tablet Display Smartphone Display Desktop Display duadam Coffee House FIGURE 8.36 Resize the browser window to approximate the new tablet and smartphone display Task 1: Create a folder called ch8javajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 7 Case Study ch7 javajam folder. Copy the file javalogomobile.gif from the student files chapter8/starters folder into the ch8javajam folder Task 2: Configure the CSS. Launch a text editor and open the javajam.css external style sheet file. a. Configure Support of HTML5. Add the following style rule to configure most older browsers to render HTML5 block display elements as expected header, main, nav, footer, figure, figcaption, aside, section, article display: block;Explanation / Answer
Answer:
1. Changes to be made to CSS: See the changes below
-----------------------------------------
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
/*Configure phone number desktop display*/
.mobile-id {display: none;}
.desktop-id {display: inline;}
/*Configure sections*/
section {
overflow: auto;
font-size: 90%;
}
/*Configure tablet display*/
@media only screen and (max-width: 64em){
body {
background-color: #D2B48C;
background-image: none;
margin: 0;
}
#wrapper {
min-width: 0;
width: auto;
box-shadow: none;
}
h1 {
margin: 0;
background-image: url("javalogomobile.gif");
}
main{
margin: 0;
}
nav{
float: none;
width: auto;
padding: 0;
}
nav ul{
text-align: center;
}
nav ul li{
display: inline;
padding-top: 0;
padding-bottom: 0;
padding-left: 0.75em;
padding-right: 0.75em;
}
}
/*Configure phone display*/
@media only screen and (max-width: 37.5em){
nav ul li{
display: inline-block;
width: 5em;
font-size: 120%;
text-align: center;
box-shadow: 2px #330000;
background-color: #F5F5DC;
margin: 1%;
padding: 2.5%;
}
nav a{
display: block;
:hover {color: #333300;}
}
nav a:link {color: #FFFFFF;}
nav a:visited {color: #EALAFA;}
nav a:hover {color: #FFD700;}
section{
margin: 0;
}
section img{
display: none;
}
.hero{
height: 0;
}
.mobile-id{
display: inline;
}
.desktop-id{
display: none;
}
}
-----------------------------------------
Add these changes to your css file.
2. Changes to home page (index.html): See the updated code below:
-----------------------------------------------
<xmp>
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="styles/javajam.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="images/javalogo.gif" alt="JavaJam Coffee House" width="619" height="117"></h1>
</header>
<nav>
<ul>
<b>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
</b>
</ul>
</nav>
<main>
<p>Follow the winding road to JavaJam</p>
<br>
<img src="images/windingroad.jpg" alt="JavaJam Coffee House" width="333" height="156" id="floatright">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
12312 Main Street <br>
Mountain Home, CA 93923 <br>
<a id="mobile-id" href="tel:888-555-5555">888-555-5555</a>
<span id="desktop-id">888-555-5555</span>
</div>
</main>
<br>
<br>
<footer>
Copyright © 2017 JavaJam Coffee House<br>
<a href="mailto:mail@examle.com">mail@example.com</a>
</footer>
</div>
</body>
</html>
</xmp>
-----------------------------------------
3. Changes made to menu page (menu.html): Add following code under <head> section of menu.html
-----------------------------------------------
<xmp>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</xmp>
-----------------------------------------
4. Changes made to music page (music.html): Update music.html as follows:
a) Add following under <head> section of music.html:
---------------------------------------
<xmp>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</xmp>
--------------------------------
b) Wherever <div> is used in music.html, replace it with <section> tag. Also replace corresponding </div> tag with </section> tag.
Note: Don't forget to remove enclosing <xmp></xmp> before applying html code.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.