Javajam coffee house case study chapter 7

CSWB 110 Christina Cutts

Home
Hobbies
About Me
Contact

Chapter 1
Web Research Assignment
Chapter 2
JavaJam and Fishcreek Case Studies
Chapter 3
JavaJam and Fishcreek Case Studies
Chapter 4
JavaJam and Fishcreek Case Studies
Chapter 5
JavaJam and Fishcreek Case Studies
Chapter 6
JavaJam and Fishcreek Case Studies
Chapter 7
JavaJam and Fishcreek Case Studies
Chapter 8
JavaJam and Fishcreek Case Studies
Chapter 9
JavaJam and Fishcreek Case Studies
Chapter 10
Browser Case Study Chapter 11
JavaJam and Fishcreek Case Studies
Chapter 12
JavaJam and Fishcreek Case Studies
Chapter 13
JavaJam Case Study and JavaJam description.
Fishcreek Case Study and Fish Creek description.
Chapter 14
JavaJam and Fishcreek Case Studies

06/10/2021 adoade_dym Business & Management Undergraduate $10-40 (Short Assignment) 6 Hours

web development and design foundations with html5 9th edition javajam Chapter 7 THE CODE SO FAR Code for index.html: <!DOCTYPE html> <html lang="en"> <head> <title>JavaJam Coffee House</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial=scale1.0"> <link rel="stylesheet" href="javajam.css"> </head> <body> <div id="wrapper"> <header> <h2>JavaJam Coffee House</h2> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="music.html">Music</a></li> <li><a href="jobs.html">Jobs</a></li> </ul> </nav> <main> <div id="heroroad"></div> <h2>Follow the Winding Road to JavaJam</h2> <p>We&rsquo;re a little out of the way, but take a drive down Garrett Bay Road to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You&rsquo;ll feel right at home at JavaJam!</p> <h3>JavaJam Coffee House features:</h3> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Gluten-free Pastries</li> <li>Organic Salads</li> <li>Music and Poetry Readings</li> <li>Open Mic Night</li> </ul> <div> …

web development and design foundations with html5 9th edition javajam Chapter 7

THE CODE SO FAR

Code for index.html:

<!DOCTYPE html>

<head>

<title>JavaJam Coffee House</title>

</head>

<body>

<h2>JavaJam Coffee House</h2>

</header>

<nav>

<ul>

<li><a href="music.html">Music</a></li>

</ul>

</nav>

<main>

<h2>Follow the Winding Road to JavaJam</h2>

<p>We’re a little out of the way, but take a drive down Garrett Bay Road to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You’ll feel right at home at JavaJam!</p>

<h3>JavaJam Coffee House features:</h3>

<ul>

<li>Specialty Coffee and Tea</li>

<li>Bagels, Muffins, and Gluten-free Pastries</li>

<li>Organic Salads</li>

<li>Music and Poetry Readings</li>

<li>Open Mic Night</li>

</ul>

<div>

12010 Garrett Bay Road<br>

Ellison Bay, WI 54210<br>

</div>

</main>

</footer>

</div>

</body>

</html>

Code for menu.html:

<!DOCTYPE html>

<head>

<title>JavaJam Coffee House Menu</title>

</head>

<body>

<h2>JavaJam Coffee House</h2>

</header>

<nav>

<ul>

<li><a href="music.html">Music</a></li>

</ul>

</nav>

<main>

<h2>Coffee at JavaJam</h2>

<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma, the smooth taste, the caffeine! Join our Mug Club and get a

10% discount on each cup of coffee you purchase — ask the barista for details.</p>

<dl>

<dd>Regular house blend, decaffeinated coffee, or flavor of the day.<br>Endless Cup $3.00</dd>

<dd>House blended coffee infused into a smooth, steamed milk.<br>Single $3.00 Double $4.00</dd>

<dt><strong>Iced Cappuccino</strong></dt>

<dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br>Single $4.75 Double $6.00</dd>

</dl>

</main>

</footer>

</div>

</body>

</html>

Code for music.html:

<!DOCTYPE html>

<head>

<title>JavaJam Coffee House Music</title>

</head>

<body>

<h2>JavaJam Coffee House</h2>

</header>

<nav>

<ul>

<li><a href="music.html">Music</a></li>

</ul>

</nav>

<main>

<h2>Coffee at JavaJam</h2>

<p>The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music you won’t want to miss!</p>

<h4>January</h4>

Melanie Morris entertains with her melodic folk style.

</div>

<h4>February</h4>

Tahoe Greg is back from his tour. New songs. New stories.

</div>

</main>

</footer>

</div>

</body>

</html>

Code for javajam.css:

* { box-sizing: border-box; }

header, nav, main, footer { display: block; }

body { background-color: #FCEBB6;

color: #221811;

font-family: Verdana, Arial, sans-serif;

}

header { background-color: #D2B48C;

height: 150px;

background-repeat: no-repeat;

}

h2 { padding-top: 45px;

padding-left: 220px;

font-size: 3em;

}

h4 { background-color: #D2B48C;

font-size: 1.2em;

padding-left: .5em;

padding-bottom: .25em;

text-transform: uppercase;

border-bottom: solid 2px #231814;

padding-bottom: 0;

clear: left;

}

nav { text-align: center;

font-weight: bold;

font-size: 1.5em;

padding-top: 10px;

float: left;

width: 200px;

}

nav a { text-decoration: none; }

nav a:link { color: #FEF6C2; }

nav a:visited { color: #D2B48C; }

nav a:hover { color: #CC9933; }

nav ul { list-style-type: none;

padding-left: 0; }

main { padding: 0 0 2em 0;

margin-left: 200px;

background-color: #FEF6C2;

display: block;

}

main h2, main h3, main h4, main p, main div, main ul, main dl { padding-left: 3em; padding-right: 2em; }

footer { background-color: #D2B48C;

font-size: .60em;

font-style: italic;

text-align: center;

}

#wrapper { width: 80%;

margin-right: auto;

margin-left: auto;

background-color: #231814;

min-width: 900px;

max-width: 1280px;

box-shadow: 3px 3px 3px #666666;

}

.details { padding-left: 20%;

padding-right: 20%;

overflow: auto;

}

img { padding-left: 10px;

padding-right: 10px;

}

#heroroad { background-image: url(heroroad.jpg);

background-size: 100% 100%;

height: 250px; }

#heromugs { background-image: url(heromugs.jpg);

background-size: 100% 100%;

height: 250px; }

#heroguitar { background-image: url(heroguitar.jpg);

background-size: 100% 100%;

height: 250px; }

.floatleft { float: left;

padding-right: 2em;

padding-bottom: 2em;

}

#mobile{display: none;}

#desktop{display: inline;}

@media only screen and (max-width: 1024px){

body{margin: 0;

#wrapper{min-width: 0;margin: 0; padding: 0; box-shadow: none; width: auto;}

header{border-bottom: 5px solid #fef6c2;}

h2{margin-top: 0;

margin-bottom: 1em;

padding-top: 1em;

padding-bottom: 1em;

font-size: 2em;}

nav {float: none; width: auto; padding-top: 0; margin: 10px; font-size: 1.3em;}

nav li{display: inline-block;}

nav a{padding: 1em; width: 8em; font-weight: bold; border-style: none;}

nav ul{padding: 0; margin: 0;}

#heroroad{margin: 0; padding: 0;}

#heromugs{margin: 0; padding: 0;}

#heroguitar{margin: 0; padding: 0;}

main{margin: 0; font-size: 90%;}

}

@media only screen and (max-width: 768px){

header{background-image:url(javajammini.jpg);

height: 128px;}

h2{font-size: 2em; text-align: center; padding-left: 0;}

nav{margin: 0;}

nav a{display: block; padding: 0.2em; width: auto; border-bottom: 1px; border-bottom-color: #fef6c2;}

nav li{display: block;}

main{padding-top: 1px;}

h2{padding-top: 0.5em; padding-right: 0; padding-bottom: 0; padding-left: 0.5em; margin-right: 0.5em;}

.details{padding-left: 0; padding-right: 0;}

#heroroad{background-image: none; height: auto;}

#heromugs{background-image: none; height: auto;}

#heroguitar{background-image: none; height: auto;}

.floatleft{padding-left: 0.5em; padding-right: 0.5em;}

#mobile{display: inline;}

#deskstop{display: none;}\

THE TASK AT HAND:

See Chapter 20 for an introduction to the JavaJam Coffee House case study. Figure 2.310 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.170. 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.490). The mobile display should be similar to Figure 7.430 or 7.440. You have seven tasks in this case study: Figure 7.43 JavaJam Coffee House Home Menu Music Jobs Follow the Winding Road to JavaJam We're a little out of the way, but take a drive down Garrett Bay Road to Javajam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at JavaJam! JavaJam Coffee House features: • Specialty Coffee and Tea • Bagels, Muffins, and Gluten-free Pastries • Organic Salads • Music and Poetry Readings • Open Mic Night 12010 Garrett Bay Road Ellison Bay, WI 54210 888-555-5555 Copyright 2018 Javajam Coffee House Figure 7.44 Lavalam Coffee House X + JavaJam Coffee House Home Menu Music Jobs Follow the Winding Road to JavaJam We're a little out of the way, but take a drive down Garrett Bay Road to Javajam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at Javalam! JavaJam Coffee House features: • Specialty Coffee and Tea • Bagels, Muffins, and Gluten-free Pastries • Organic Salads • Music and Poetry Readings • Open Mic Night 1 2010 Garrett Bay Road Elison Bay, WI 54210 888-555-5555 Copyright © 2018 Jawatam Coffee House yowi e .com A test of the new tablet (or high-resolution smartphone) display in a desktop browser 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. Hands-On Practice Case Study TASK 1: THE WEBSITE FOLDER. Create a folder called javajam7. Copy all the files from your Chapter 60 javajamo folder into the javajam7 folder. Copy the javajammini.jpg file from the chapter7/starters folder in the student files. TASK 2: MODIFY THE HOME PAGE. Open index.html in a text editor. Edit the code as follows: 1. Configure a viewport meta tag that configures the width to the device-width and sets the initial-scale to 1.0. 2. The home page displays a phone number in the contact information area. Wouldn't it be handy if a person using a smartphone could click on the phone number to call the coffee house? You can make that happen by using tel: in a hyperlink. Configure a hyperlink assigned to an id named mobile that contains the phone number as shown below: <a id="mobile" href="tel:888-555-5555">888-555-5555</a> But wait a minute, a telephone link could confuse those visiting the site with a desktop browser. Code another phone number directly after the hyperlink. Code a span element assigned to an id named desktop around the phone number as shown below: <span id="desktop">888-555-5555</span> Don't worry about the two phone numbers that are now on the page. You'll configure CSS in Tasks 5 and 7 to show the appropriate phone number (with or without the telephone link) to your website visitors. Save the index.html file. It should look similar to the web page shown in Figure 7.450 when displayed in a desktop browser. Remember that validating your HTML can help you find syntax errors. Test and correct this page before you continue. Figure 7.45 ox Javalam Coffee House X + JavaJam Coffee House Home Menu Music Jobs Follow the Winding Road to Javajam We're a little out of the way, but take a drive down Garrett Bay Road to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at JavaJam! JavaJam Coffee House features: • Specialty Coffee and Tea • Bagels, Muffins, and Gluten-free Pastries • Organic Salads • Music and Poetry Readings • Open Mic Night 12010 Garrett Bay Road Ellison Bay, WI 54210 888-555-5555 888-555-5555 Copyright 2018 Jawatan Cilee House Temporary desktop browser display before new styles are configured TASK 3: MODIFY THE MENU PAGE. Open menu.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Save and test your new menu.html page in a browser. Use the HTML validator to help you find syntax errors. TASK 4: MODIFY THE MUSIC PAGE. Open music.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Save and test your new music.html page in a browser. Use the HTML validator to help you find syntax errors. TASK 5: MODIFY THE DESKTOP CSS. Open javajam.css in a text editor. Remember the telephone number hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below: #mobile { display: none; } #desktop { display: inline; } Save the javajam.css file. Use the CSS validator to help you find syntax errors. TASK 6: CONFIGURE THE TABLET CSS. Open javajam.css in a text editor. Edit the style rules as follows: 1. Code a media query to select for typical tablet device viewport size, such as @media only screen and (max-width: 1024px) { 2. Code the following new styles within the media query: a. Configure a body element selector with margin set to 0. Set the background- image property to none. b. Configure a wrapper id selector. Set the width to auto, min-width to 0, margin to 0, padding to 0, and box-shadow to none. c. Configure the header element selector. Configure a 5px solid #FEF6C2 bottom border. d. Configure the h2 element selector. Set top margin to 0, bottom margin to 1em, top padding to lem, bottom padding to lem, and 2.5em font size. e. Configure the nav element selector. The mobile layout uses a single column. Set the float to none, auto width, 0 top padding, 10px margin, and 1.3em font size. f. Configure the nav li selector. Set display to inline-block. g. Configure the nav a selector. Set padding to lem, width to 8em, font weight to bold, and border-style to none. h. Configure the nav ul selector with 0 padding and margin. i. Configure the #heroroad, #heromugs, and #heroguitar selectors. Configure 0 margin and 0 padding. j. Configure the main element selector. Set margin to 0, and font size to 90%. Save the javajam.css file. Use the CSS validator to help you find syntax errors. TASK 7: CONFIGURE THE SMARTPHONE CSS. Open javajam.css in a text editor. Note that any device with a screen max-width of 1024 pixels or less will apply the styles you coded in Task 6. In this task you will code additional styles needed for smaller devices. Edit the style rules as follows: 1. Code a media query to select for typical smartphone device viewport size, such as @media only screen and (max-width: 768px) { 2. Code the following new styles within the media query: a. Configure the header element selector to display an image designed for small mobile devices. Set the background image to javajammini.jpg. Set the height to 128px. b. Configure the h2 element selector. Set 2em font size, centered text, and 0 left padding c. Configure the nav element selector. Set the margin to 0. d. Configure the anchor tags in the navigation area. Code a style rule for the nav a selector. Set the display to block, padding to 0.2em, and width to auto. Also configure a 1 pixel bottom border (use #FEF6C2 for the border color). e. Configure the nav li selector. Set the display to block. f. Configure the main element selector. Set top padding to 1px. g. Configure the h2 element selector. Set 0.5em top padding, 0 right padding, o bottom padding, and 0.5em left padding. Set the right margin to 0.5em. h. Configure the details class selector. Set left and right padding to 0. i. Configure the #heroroad, #heromugs, and #heroguitar selectors. Set the background image to none. Set the height to auto. j. Configure the floatleft class selector. Set left and right padding to 0.5em. k. Remember the telephone number hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below: #mobile { display: inline; } #desktop { display: none; } Save the javajam.css file. Use the CSS validator to help you find syntax errors. Display your pages in a desktop browser. The pages should look the same as they did before you started this case study (see Figure 6.499). Next, test the mobile display. Display your page and reduce the width of the browser. Your mobile display should be similar to Figure 7.430 or 7.440. Select the hyperlinks to view the Menu and Music pages. They should be similar to the home page. JavaJam is mobile!

javajam coffee house case study chapter