In this chapters case study, you will use the existing Pacific Trails Resort (Chapter 7) website as a starting point to create a new version of the website. The new version will utilize a responsive grid layout with media queries that displays well on desktop browsers and mobile devices. Similar to the process followed in Hands-On Practices 8.6 and 8.7, youll practice a Mobile First strategy for responsive design. First, you will examine the HTML structure of the pages and configure a page layout that works well in smartphones (test with a small browser window). Then youll resize the browser viewport to be larger until the design breaks and code media queries and additional CSS as appropriate using grid layout for the page and flexbox layout for the navigation area. Figure 8.50 shows wireframes for three different layouts. The Home page web page displays will be similar to Figure 8.51. You have five tasks in this case study: Create a new folder for the Pacific Trails Resort website. Review the HTML structure and edit the pacific.css external style sheet to configure a single-column (smartphone) display. Configure the CSS needed for pleasing display of the web pages on medium sized mobile devices. Configure the CSS and HTML needed for a pleasing display of the web pages on large mobile devices and desktops. Add a viewport meta tag to each web page. Task 1: Create a folder called ch8pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 7 Case Study ch7pacific folder into the ch8pacific folder. Task 2: Configure a Small Single-Column Layout. Open the index.html file in a text editor. View the HTML and notice that a div assigned to the wrapper id has child elements of header, nav, div, main, and footer as shown.

...

...

...

...

...

Configure the CSS. Launch a text editor and open the pacific.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. Remove any style declarations that configure float and left margin from all selectors. Edit the styles for the nav element selector. Remove the width declaration. Set padding to 0. Configure centered text. Edit the styles for the #wrapper id selector. Remove the width, min-width, max-width, margin, border, and box-shadow declarations. Code a style rule for the nav li selector. Set a 1 pixel dark blue solid bottom border. Edit the styles for the header element selector. Remove the style declarations for padding and height. Edit the styles for the h1 element selector. Remove the declaration for font-size. Set top and bottom padding to 0.5em. Remove the section element selector and all style declarations. Save your pacific.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. If your browser viewport is a typical size, the page will look a bit awkward and similar to Figure 8.52. 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 8.51, which simulates mobile display. Test the yurts.html and activities.html files in a similar mannerthey should be similar to the Small Display in Figures 8.53 and 8.54. Task 3: Configure a Medium Layout. Display your index.html file in a browserfirst narrow it and then gradually widen it. The point where it starts to seem awkward in the navigation area is around 600px wide, so thats what youll code for our media query. When the media query is triggered, youll configure the layout to follow the Medium Display wireframe in Figure 8.50, which has a horizontal navigation bar. Configure the CSS. Launch a text editor and open the pacific.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. Configure styles for the nav ul selector. Configure a flex container for a row that does not wrap. Also configure styles to cause the browser to display empty space before, between, and after the flex items. Configure styles for the nav li selector. Eliminate the bottom border (hint: use border-bottom: none;). Code a style rule for the section element selector. Set 2em left and right padding. Save your pacific.css file. Use the CSS validator (http://jigsaw.w3.org/cssvalidator) 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 Medium Display in Figure 8.51. When you test the Yurts and Activities pages, you will notice that their Medium Display is still different from Figures 8.53 and 8.54. You need to make a few changes to configure the Yurts and Activities pages so that their content within the section elements uses three columns similar the layout in Figures 8.53 and 8.54. A quick way to accomplish this would be to revert back to the Chapter 7 Case Study CSSconfigure the section element selector with right float and 33% width. You can also accomplish this by configuring the main element as a grid (shown in Figure 8.55), which is what you will do in this case study. Modify the HTML. The content class will be used to indicate to the browser when to configure the main element area specifically for a three-column content page. Edit the yurts.html file. Add class="content" to the opening body tag. Save the file. Edit the activities.html file. Add class="content" to the opening body tag. Save the file. Modify the CSS. Edit the pacific.css file and configure the grid. The first row contains the h2 element. The second row contains any section elements, the third row (the #special id) will be used in the Chapter 9 case study. The last row contains the footer row. Add the following styles to the media query to configure the main element when it appears on a web page within the .content class. .content main { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; } h2 { grid-row: 1 / 2; grid-column: 1 / 5; } section { grid-row: 2 / 3; grid-column: auto; } #special { grid-row: auto; grid-column: 1 / 5; } footer { grid-row: auto; grid-column: 1 / 5; } Save the pacific.css file. Use the CSS validator (http://jigsaw.w3.org/cssvalidator) to check your syntax. Correct and retest if necessary. Display your index.html, yurts.html, and activities.html files in a browser. The display of the index.html file should remain unchanged. However, the Yurts page should be similar to Figure 8.53, and the Activities page should be similar to Figure 8.54. Task 4: Configure a Large Grid Layout. Display your index.html file in a browser and gradually widenyou may notice that the page seems to get a bit awkward around 1024px, so thats what youll code for the next media query. When the media query is triggered, youll configure the grid layout in Figure 8.56, which corresponds to the Large Display wireframe in Figure 8.50. Configure the CSS. Launch a text editor and open the pacific.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. Configure styles for the nav ul selector. Set the flex-direction property to the value column. Set the top padding to 1em. Configure styles for the nav element selector. Configure left text alignment and 1em left padding. Configure styles for the #wrapper id selector. Set the area to be horizontally centered (hint: margin: auto;) with 80% width, a dark blue border, and a box shadow. Configure this selector to be a grid container. Use Figure 8.56 as a guide to configure the grid-template-columns and grid-template-rows properties. Configure the children elements of the #wrapper (use the header, nav, div, main, and footer selectors) with grid-row and grid-column properties. Save your pacific.css file. Display your index.html file in a browser. You should be able to resize your browser viewport and obtain a layout similar to the Large Display in Figure 8.50. The display of the Home page should be similar to Figure 8.51. Test the yurts.html and activities.html files in a similar manner. The Yurts page should be similar to Figure 8.53. The Activities page should be similar to Figure 8.54. Task 5: Add a Viewport Meta Tag. Launch a text editor and edit the index.html, yurts.html, and activities.html files. Configure a viewport meta tag in the head section of each page that configures the width to the device-width and sets the initial-scale to 1.0. Save your files. When you test them in a browser, the display will be unchanged, but the viewport meta tag will improve the display on a mobile device.