You have four tasks in this case study Create a new folder for the Path of Light Yoga Studio website Configure the HTML and CSS needed for pleasing display of a single column (smartphone) display Configure the HTML and CSS needed for pleasing display of the web pages on medium sized mobile devices Configure the CSS needed for a pleasing display of the web pages on large mobile devices and desktops TASK 1 Create a folder called yoga7 to contain your Path of Light Yoga Studio website files Copy the files from the Chapter 6 Case Study yoga6 folder into the yoga7 folder Copy the sunrise jpg file from the chapter7 starters yoga folder TASK 2 CONFIGURE A SMALL SINGLE COLUMN LAYOUT First, you will edit the CSS Then you will edit each web page and test in a browser CONFIGURE THE CSS Launch a text editor and open the yoga css style sheet Edit the styles to achieve a layout that displays well on small devices using normal flow (no floats) with full width block elements Edit the styles for the body element selector Set margin to 0 Edit the styles for the wrapper id selector Remove all declarations associated with width and margin Configure 2em padding Edit the styles for the header element selector Change the background image to sunrise jpg Change the background color to 40407A Remove the background position, background repeat, and height declarations Set background size to 100 100 , text color to white, font size to 90 , top margin to 50px, and minimum height to 200px Edit the styles for hyperlinks in the header area Change the text color to FFF for both unvisited and visited hyperlinks Set the header a hover selectors text color to EDF5F5 Code styles for a home class selector and a content class selector Both selectors will start with the same property values Set the height to 20vh (20 of the viewport height), top padding to 2em, left padding to 10 Edit the styles for the nav element selector Remove the styles that configure float and bold text Set width to 100 , and padding top to 0 5em The navigation will be fixed at the top of the viewport Set position to fixed, top to 0 and left to 0 Also set right aligned text, white background color, 0 margin, 0 right padding, and 9999 z index Edit the styles for the nav ul selector Remove the declaration for left padding Configure this selector as a flex container which has rows that wrap Set 0 margin, 1 2em font size Code styles for the nav li selector Set 40 width, 0 top and bottom padding, 1em left and right padding, and inline display Edit the styles for the nav a selector Remove the style declarations for text alignment, border, padding, and margin Edit the styles for nav a hover selector Remove the declaration that sets the border Remove the style declarations for the main element selector, h1 element selector, onethird class selector, onehalf class selector, clear class selector, floatleft class selector and hero id selector The hero images will be treated differently in this new version of the website The home page will not display the hero image The content pages will only display hero images on medium and larger viewports Code styles for the mathero id selector Set the background image to yogamat jpg with no repeats Configure 300px height Set background size to cover Set display to none Code styles for the loungehero id selector Set the background image to yogalounge jpg with no repeats Configure 300px height Set background size to cover Set display to none Code styles for the section element selector Set left and right padding to 5em Edit the styles for the footer element selector Remove the styles for background color, and padding Configure styles for the telephone number to display a hyperlink when on the small display and display plain text otherwise Code a style rule for the mobile id selector Set display to inline Code a style rule for the desktop id selector Set display to none Save your yoga css file Use the CSS validator (http jigsaw w3 org css validator) to check your syntax Correct and retest if necessary CONFIGURE THE HTML Modify areas on the pages as indicated Launch a text editor and open index html Complete the following edits and save the file Using the wireframe in Figure 7 66 as a guide, move the opening div tag assigned to the wrapper id above the opening main tag Remove the img tag Assign the header element to the class named home 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 resort 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 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 888 555 5555 Code a viewport meta tag in the head section that configures the width to the device width and sets the initial scale to 1 0 Launch a text editor and open classes html Code a viewport meta tag in the head section in the same manner as the Home page Use the wireframe in Figure 7 66 as a guide, and move the opening div tag assigned to the wrapper id above the opening main tag Assign the header element to the class named content Locate the div assigned to the hero id Replace the value hero with mathero Remove the img tag Save the file Launch a text editor and open schedule html Code a viewport meta tag in the head section in the same manner as the Home page Use the wireframe in Figure 7 66 as a guide and move the opening div tag assigned to the wrapper id above the opening main tag Assign the header element to the class named content Locate the div assigned to the hero id Replace the value hero with loungehero Remove the img tag Save the file TEST THE WEB PAGES Display your index html file in a browser This layout is intended for narrow mobile screens Resize your browser to be narrower until your display is similar to the Small Display shown in Figure 7 66, which simulates mobile display Test the classes html and schedule html files in a similar manner TASK 3 CONFIGURE A MEDIUM LAYOUT Edit the CSS and web pages to configure a more pleasing display on a wider viewport, setting 600px as the breakpoint for the first media query You will configure flexbox layout for two areas the main navigation and the columns of information on the content pages When you test your web pages and trigger the media query, the layout in the Medium Display wireframe in Figure 7 66 will be implemented and your pages should look similar to the Medium Display in Figures 7 67, 7 68, and 7 69 Figure 7 68 The Classes page Figure 7 68 Full Alternative Text Figure 7 69 The Schedule page Figure 7 69 Full Alternative Text CONFIGURE THE CSS Launch a text editor and open the yoga css style sheet Place your cursor below the existing styles Configure a media query that is triggered when the minimum width is 600px or greater Code the following styles within the media query Code styles for the nav ul selector Configure the flex container with rows that do not wrap Also set justify content to flex end Code styles for the nav li selector Set width to 7em Code styles for the section element selector Set 2em left and right padding The hero images will display on medium and large displays Code styles for the mathero and loungehero id selectors Set display to block with 1em bottom padding Code styles for the flow id selector Configure a flex container The flex direction is row Code styles for the mobile id selector Set display to none Code styles for the desktop id selector Set display to inline Save your yoga css file Use the CSS validator (http jigsaw w3 org css validator) to check your syntax Correct and retest if necessary CONFIGURE THE HTML You need to rework the content area on the Classes and Schedule pages Launch a text editor and open classes html Locate the section elements and remove the class onethird code from each Code a div assigned to an id named flow that contains all section elements Save the file Launch a text editor and open schedule html Locate the section elements and remove the class onehalf code from each Code a div assigned to an id named flow that contains both section elements Save the file TEST THE WEB PAGES Display your index html file in a browser You should be able to resize your browser viewport and obtain a display similar to the Medium Display in Figure 7 66 Text the classes html and schedule html files in a similar manner TASK 4 CONFIGURE A LARGE LAYOUT Edit the CSS and web pages to configure a second media query with a 1024px breakpoint When you test your web pages and trigger the media query, the layout in the Large Display wireframe in Figure 7 66 will be implemented and your pages should look similar to the Large Display in Figures 7 67, 7 68, and 7 69 CONFIGURE THE CSS Launch a text editor and open the yoga css style sheet Place your cursor below the existing styles Configure a media query that is triggered when the minimum width is 1024px or greater Code the following styles within the media query Code styles for the header element selector Set font size to 120 Configure styles for the home class selector Set the height to 50 of the viewport height (50vh), 5em top padding, and 8em left padding Code styles for the content class selector Set the height to 30 of the viewport height (30vh), 1em top padding and 8em left padding Code styles for the wrapper id selector Set the area to be horizontally centered (hint margin auto ) with 80 width Save your yoga css file Use the CSS validator (http jigsaw w3 org css validator) to check your syntax Correct and retest if necessary TEST THE WEB PAGES Display your index html file in a browser You should be able to resize your browser viewport and obtain a display similar to the Large Display in Figure 7 67 Test the schedule html and classes html files in a similar manner

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 22, 2024

You have four tasks in this case study: Create a new folder for the Path of Light Yoga Studio website. Configure the HTML and CSS

You have four tasks in this case study:

Create a new folder for the Path of Light Yoga Studio website.
Configure the HTML and CSS needed for pleasing display of a single-column (smartphone) display.
Configure the HTML and CSS needed for pleasing display of the web pages on medium sized mobile devices.
Configure the CSS needed for a pleasing display of the web pages on large mobile devices and desktops.

TASK 1: Create a folder called yoga7 to contain your Path of Light Yoga Studio website files. Copy the files from the Chapter 6 Case Study yoga6 folder into the yoga7 folder. Copy the sunrise.jpg file from the chapter7/starters/yoga folder.
TASK 2: CONFIGURE A SMALL SINGLE-COLUMN LAYOUT. First, you will edit the CSS. Then you will edit each web page and test in a browser.

CONFIGURE THE CSS. Launch a text editor and open the yoga.css style sheet. Edit the styles to achieve a layout that displays well on small devices using normal flow (no floats) with full-width block elements.
1. Edit the styles for the body element selector. Set margin to 0.
2. Edit the styles for the wrapper id selector. Remove all declarations associated with width and margin. Configure 2em padding.
3. Edit the styles for the header element selector. Change the background image to sunrise.jpg. Change the background color to #40407A. Remove the background-position, background-repeat, and height declarations. Set background-size to 100% 100%, text color to white, font size to 90%, top margin to 50px, and minimum height to 200px.
4. Edit the styles for hyperlinks in the header area. Change the text color to #FFF for both unvisited and visited hyperlinks. Set the header a:hover selectors text color to #EDF5F5.
5. Code styles for a home class selector and a content class selector. Both selectors will start with the same property values. Set the height to 20vh (20% of the viewport height), top padding to 2em, left padding to 10%.
6. Edit the styles for the nav element selector. Remove the styles that configure float and bold text. Set width to 100%, and padding-top to 0.5em. The navigation will be fixed at the top of the viewport. Set position to fixed, top to 0 and left to 0. Also set right-aligned text, white background color, 0 margin, 0 right padding, and 9999 z-index.
7. Edit the styles for the nav ul selector. Remove the declaration for left padding. Configure this selector as a flex container which has rows that wrap. Set 0 margin, 1.2em font size.
8. Code styles for the nav li selector. Set 40% width, 0 top and bottom padding, 1em left and right padding, and inline display.
9. Edit the styles for the nav a selector. Remove the style declarations for text alignment, border, padding, and margin.
10. Edit the styles for nav a:hover selector. Remove the declaration that sets the border.
11. Remove the style declarations for the main element selector, h1 element selector, onethird class selector, onehalf class selector, clear class selector, floatleft class selector and hero id selector.
12. The hero images will be treated differently in this new version of the website. The home page will not display the hero image. The content pages will only display hero images on medium and larger viewports.
  1. Code styles for the mathero id selector. Set the background image to yogamat.jpg with no repeats. Configure 300px height. Set background-size to cover. Set display to none.
  2. Code styles for the loungehero id selector. Set the background image to yogalounge.jpg with no repeats. Configure 300px height. Set background-size to cover. Set display to none.
13. Code styles for the section element selector. Set left and right padding to .5em.
14. Edit the styles for the footer element selector. Remove the styles for background color, and padding.
15. Configure styles for the telephone number to display a hyperlink when on the small display and display plain text otherwise.
  1. Code a style rule for the mobile id selector. Set display to inline.
  2. Code a style rule for the desktop id selector. Set display to none.
Save your yoga.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

CONFIGURE THE HTML. Modify areas on the pages as indicated.
1. Launch a text editor and open index.html. Complete the following edits and save the file.
  1. Using the wireframe in Figure 7.66 as a guide, move the opening div tag assigned to the wrapper id above the opening main tag. Remove the img tag. Assign the header element to the class named home.
  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 resort? 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:
```
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:
```
888-555-5555
```
  3. Code a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0.
2. Launch a text editor and open classes.html. Code a viewport meta tag in the head section in the same manner as the Home page. Use the wireframe in Figure 7.66 as a guide, and move the opening div tag assigned to the wrapper id above the opening main tag. Assign the header element to the class named content. Locate the div assigned to the hero id. Replace the value hero with mathero. Remove the img tag. Save the file.
3. Launch a text editor and open schedule.html. Code a viewport meta tag in the head section in the same manner as the Home page. Use the wireframe in Figure 7.66 as a guide and move the opening div tag assigned to the wrapper id above the opening main tag. Assign the header element to the class named content. Locate the div assigned to the hero id. Replace the value hero with loungehero. Remove the img tag. Save the file.
TEST THE WEB PAGES. Display your index.html file in a browser. This layout is intended for narrow mobile screens. Resize your browser to be narrower until your display is similar to the Small Display shown in Figure 7.66, which simulates mobile display. Test the classes.html and schedule.html files in a similar manner.
TASK 3: CONFIGURE A MEDIUM LAYOUT. Edit the CSS and web pages to configure a more pleasing display on a wider viewport, setting 600px as the breakpoint for the first media query. You will configure flexbox layout for two areas: the main navigation and the columns of information on the content pages. When you test your web pages and trigger the media query, the layout in the Medium Display wireframe in Figure 7.66 will be implemented and your pages should look similar to the Medium Display in Figures 7.67, 7.68, and 7.69.

Figure 7.68 The Classes page

Figure 7.68 Full Alternative Text

Figure 7.69 The Schedule page

Figure 7.69 Full Alternative Text

CONFIGURE THE CSS. Launch a text editor and open the yoga.css style sheet. Place your cursor below the existing styles. Configure a media query that is triggered when the minimum width is 600px or greater. Code the following styles within the media query.
1. Code styles for the nav ul selector. Configure the flex container with rows that do not wrap. Also set justify-content to flex-end.
2. Code styles for the nav li selector. Set width to 7em.
3. Code styles for the section element selector. Set 2em left and right padding.
4. The hero images will display on medium and large displays. Code styles for the mathero and loungehero id selectors. Set display to block with 1em bottom padding.
5. Code styles for the flow id selector. Configure a flex container. The flex direction is row.
6. Code styles for the mobile id selector. Set display to none.
7. Code styles for the desktop id selector. Set display to inline.
Save your yoga.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

CONFIGURE THE HTML. You need to rework the content area on the Classes and Schedule pages.
1. Launch a text editor and open classes.html. Locate the section elements and remove the class="onethird" code from each. Code a div assigned to an id named flow that contains all section elements. Save the file.
2. Launch a text editor and open schedule.html. Locate the section elements and remove the class="onehalf" code from each. Code a div assigned to an id named flow that contains both section elements. Save the file.
TEST THE WEB PAGES. Display your index.html file in a browser. You should be able to resize your browser viewport and obtain a display similar to the Medium Display in Figure 7.66. Text the classes.html and schedule.html files in a similar manner.
TASK 4: CONFIGURE A LARGE LAYOUT. Edit the CSS and web pages to configure a second media query with a 1024px breakpoint. When you test your web pages and trigger the media query, the layout in the Large Display wireframe in Figure 7.66 will be implemented and your pages should look similar to the Large Display in Figures 7.67, 7.68, and 7.69.

CONFIGURE THE CSS. Launch a text editor and open the yoga.css style sheet. Place your cursor below the existing styles. Configure a media query that is triggered when the minimum width is 1024px or greater. Code the following styles within the media query.
1. Code styles for the header element selector. Set font size to 120%.
2. Configure styles for the home class selector. Set the height to 50% of the viewport height (50vh), 5em top padding, and 8em left padding.
3. Code styles for the content class selector. Set the height to 30% of the viewport height (30vh), 1em top padding and 8em left padding.
4. Code styles for the wrapper id selector. Set the area to be horizontally centered (hint: margin: auto;) with 80% width.
Save your yoga.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

TEST THE WEB PAGES. Display your index.html file in a browser. You should be able to resize your browser viewport and obtain a display similar to the Large Display in Figure 7.67. Test the schedule.html and classes.html files in a similar manner