Instructions 1. Examine ch07-proj2.html in the browser. 2. Begin modifying ch07-proj2.css by setting up the grid so that it appears similar to that shown in Figure 7.48. Notice that it uses a 10-column grid with a constant grid size of 1fr. It has four rows with the heights indicated in the figure. The grid gap is 25px. Some of the cells span multiple columns or multiple rows. You can achieve this using grid areas or using span with the grid-row and grid-column properties. If using the later approach, you can specify the grid position for each individual cell, or set up styles for spanning rows and columns and then assign them to the cells as needed, as shown in the following: .widthDouble { grid-column: span 2; } ...

3. Now you need to set the styling for the grid cells (i.e., the top-level

elements within the container). Grid cells B, C, E, F, H, L, M, O, P, and Q have background-images set via CSS. Cells D, I, J, and K have background colors: two with buttons and two with icons from the font-awesome icon library. Each cell should use flex layout for its contents. 4. The images within cells A, G, and N are not set via background-image but are elements. The other text will need to be added to the different elements in the HTML. 5. Add media queries for tablet widths and for mobile widths. You can use 850px and 1100px as your device settings. For tablet and mobile widths, reduce the font size of your text. For mobile widths only, switch to single column and multiple rows (thus each grid row will contain a single cell); each row can have the same height as the non-mobile version, or you can create custom heights for each row.