chapter 7 focus on web design path of yoga light studio(felke morris web development and design foundation with html5)

See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure 2.42 shows a site map for the Path of Light Yoga Studio website. In this case study, you will configure the website to display on 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, Classes, and Schedule pages. Use the Chapter 6 Path of Light Yoga Studio website as a starting point for this case study. When you are finished, the website will look the same (see Figure 6.58) in desktop browsers. The mobile display should be similar to Figure 7.45 or 7.46. You have seven tasks in this case study: 1. Create a new folder for this Path of Light Yoga Studio case study. 2. Modify the Home page to include a viewport meta tag and an updated header area. 3. Modify the Classes page to be consistent with the Home page. 4. Modify the Schedule page to be consistent with the Home page. 5. Modify the desktop styles in yoga.css. 6. Modify yoga.css and code a media query for tablet device display. 7. Modify yoga.css and code a media query for smartphone device display.

Hands-On Practice Case Study Task 1: Create a Folder. Create a folder called yoga7. Copy all of the files from your Chapter 6 yoga6 folder into the yoga7 folder. 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. Wouldnt it be handy if a person using a smartphone could click on the phone number to call the company? 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: 888-555-5555 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: 888-555-5555 Dont worry about the two phone numbers that are now on the page. Youll 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 6.58 (except for temporarily displaying two phone numbers) 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. Task 3: Modify the Classes Page. Open classes.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Remove the height and width attributes from the img tag. Save and test your new classes.html page in a browser. Use the HTML validator to help you find syntax errors. Task 4: Modify the Schedule Page. Open schedule.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Remove the height and width from the img tag. Save and test your new schedule.html page in a browser. Use the HTML validator to help you find syntax errors. Task 5: Modify the Desktop CSS. Open yoga.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 yoga.css file. Use the CSS validator to help you find syntax errors. Task 6: Configure the Tablet CSS. Open yoga.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) { } 368 Chapter 7 More on Links, Layout, and Mobile 2. Code the following new styles within the media query: a. Configure a body element selector with margin and padding set to 0. b. Configure a wrapper id selector. Set the width to 100%, min-width to 0, margin to 0, and padding to 0. c. Configure the header element selector. Set top padding to 1px. d. Configure the nav element selector. The mobile layout uses a single column. Set the float to none, width to auto, and left padding to 2em. e. Configure the nav a selector. Set padding to 0.2em, left margin to 0.3em, float to left, and width to 23%. f. Configure the main element selector. Set top and bottom padding to 2.5em, left and right padding to 1em, margin to 0, 90% font size, and clear all floats. g. Configure the #hero img selector. Code a style declarations to set the width to 100% and the height to auto. h. Configure the h2, h3, p, and dl element selectors. Set the left and right padding to 2em. i. Configure the main ul selector. Set left margin to 2em. j. Configure the floatleft class with 2em left margin and 1em bottom margin. k. Configure the clear class with 2em left padding. Save the yoga.css file. Use the CSS validator to help you find syntax errors. Task 7: Configure the Mobile CSS. Open yoga.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 all and (max-width: 768px) { } 2. Code the following new styles within the media query: a. Configure an h1 element selector. Set the font size to 2em, top padding to 0.25em, left padding to 1.5em and width to 85%. Also configure centered text. b. Configure the anchor tags in the navigation area. Configure a style rule for the nav a selector. Set padding to 0.5em, width to 45%, float to left, minimum width to 6em, and left margin to 0.5em. c. Configure the main element selector. Set top padding to 0. d. Configure the floatleft class selector. Set the float property to none. Set display to none. e. Configure the #hero selector. Set display to none. f. Configure the footer element selector. Set padding to 0.5em and margin to 0. g. 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 yoga.css file. Use the CSS validator to help you find syntax errors. Website Case Study 369 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.58). Next, test the mobile display. Display your page and reduce the width of the browser. Your mobile display should be similar to Figure 7.45 or 7.46. Select the hyperlinks to view the Classes and Schedule pages. They should be similar to the home page. Path of Light Yoga Studio is mobile!