Examine ch07-proj1.html in the browser. You will be modifying the CSS only.

Begin modifying ch07-proj1.css by using flex layout for the <header> element. Set the justify-content property of the <header> so that its content (the <h1> and the <img>) spaces itself out to the left and right edges of its flex container. To vertically align the heading and image within the header, set the align-items property as well. See Figure 7.13 for guidance.

Right now each card fills the entire width of the available space. Change the width of the card class to 24%. By taking less than a quarter of the available space, we will eventually be able to fit four cards on a row.

Use flexbox mode for the container class. Set its align-items and justify-content properties to center.

Use flexbox mode for the cards class. Set its justify-content property so that its items space themselves out to the left and right edges of its flex container just as you did with the header. When you test this step, examine the book images when you shrink the browser width: notice how they extend beyond the card width.

Set the max-width property of the card images to 100%. This will ensure these images scale themselves down to fit available space in their container. Test by shrinking the browser width.

Add a saturation filter of 150% when hovering over any of the book covers. Add a drop shadow (use box-shadow) when hovering over the card. Set the initial opacity of the button in the card to 0. Set the opacity of the button to 1 when the user hovers anywhere over the card; in addition, add a 1 second transition on the opacity property.

When you resize the browser, the flex containers will continue to shrink in order to maintain four columns because you set the width to 24% in step 3. Add a media query for mobile-sized screens (below 480px) and for tablet-sized screens (between 481px and 768px). For mobile screens, set the card width to 100% and for tablet screens, set the width to 45%.

Finally, fine tune the tablet and mobile settings by increasing the --card-font-size variable to 100% within the media query for those two widths. For mobile portrait, also shrink the size of the header by changing the --header-font-size variable to 24px and the --header-height property to 4em. For tablet, set the --header-height property to 5em.

Break this problem down into smaller steps. Begin first with header, then the cards, then add in the media queries. For each of the instruction steps, test each change you make.

Take another look at Figure 7.12. A flexbox container positions items within its container along the major axis. To modify how the container positions items within the container, you use the properties shown in Figure 7.13.

Be sure to test your page at different browser widths. To test mobile widths, you may need to make use of the browser’s device toolbar.

Break this problem down into smaller steps. Begin by constructing the grid structure, as shown in the first screen capture in Figure 7.48 (and described in step 2 above). Then start adding in background images and colors. Finally add in the text content and the relevant styling.

Be sure to test at different browser widths. Some developers like beginning with mobile first; others like doing the media queries last.

You will likely need a series of nested grids to implement the layouts for these pages. While there are multiple ways to implement this layout, the instructions here provide a relatively clear approach. The top level (in the markup contained within <div class="container">) contains two rows of two columns each; the first row spans both columns. The other content fits into the second row. A grid-gap of 1em was used throughout.

The header is best laid out using flexbox. The icons should always be flush on the right side of the browser window.

The content inside the left-side navigation bar can be styled in different ways using grid layout, flexbox layout, or simple box formatting (margin, padding, etc.). If you haven’t done any flexbox, we would recommend using it just to get some practice with it. Flexbox is often used to style content within a CSS grid cell.

The main content (inside the <main> element) will consist of another nested grid with six columns and four rows. Use the CSS repeat() function along with minmax(). Make the minimum size 150px and the maximum between 150px and 250px.

Some of the individual cells will have to span multiple columns. The footer row spans all six columns.

The four Top Performer charts will be within another new nested grid with two rows and columns.

The portfolio pages uses a slightly different layout but also uses grids.

Since this project is focused on using Sass, you should already feel relatively comfortable with CSS.

Ideally, you will create your styling directly within Sass. Once you become comfortable with Sass, you will likely find you are more productive in it than in straight CSS.

Since you will likely be making numerous changes, you may want to have Sass watch for changes in your SCSS files. For instance, for the home page, you would use the following command (if you are using the CLI):

sass -watch home.scss home.css

One of the key advantages of Sass is that you can break your CSS into multiple files. We recommend putting general style rules (such as style resets and color and size variables) in a module file named base.scss. Define component styles such as header, footer, widgets, and the aside in a module file named components.scss. Then create Sass files (home.scss and portfolio.scss) for each of the pages you have to create; use @import statements in each of these two pages to add your two modules. You have been provided some initial variables in the supplied base.scss file.