WDD 130: Web Fundamentals

W04: Using CSS Flex and Grid on the Course Home Page

Overview

This optional activity has you apply learning activity concepts to enhance the home page with modern layout techniques.

Instructions

1. Open your course home page, index.html, and stylesheet styles.css, for editing.
2. Refactor the CSS for the combined rule of header, footer to have a maximum width of 840 pixels and to center the content on the page. You will add in the main section later.
   Check Your Understanding

   header, footer {
     max-width: 840px;
     margin: 0 auto;
   }

   This means you should delete the max-width decoration from header, main, and footer selectors if necessary.

3. Use CSS Flex to make the navigation links display horizontally across the screen. The menu should be justified with even spacing and centered within the navigation bar. Remember to apply the CSS Flex declaration to the container.
   Check Your Understanding

   nav {
     background-color: steelblue;
     padding: 1rem;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
   }

4. If you have not already added a link to your LinkedIn profile (or to LinkedIn in general) and to your Facebook profile (or to Facebook in general), add those links to the nav navigation menu.
5. Alter the anchor tags to be block elements with padding and no text decoration. You are free to apply other relevant styling as well.
   Check Your Understanding

   nav a {
     display: block;
     padding: 0.5rem;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: 700;
     color: #fff; /% shorthand for white %/
   }

6. Add a bottom border to the heading h1 element.

   

   Be sure to test your page locally often using the Live Server extension in VS Code. This will launch your default browser to the localhost address, and you can see your changes as you make them. localhost is a special address that your computer uses to refer to itself.

7. In your HTML file, encase the main and aside elements in a div element with a class attribute named "grid".
8. In your CSS file, add the .grid selector to the header, footer CSS selector to also make it part of the max-width and margin.

   header, .grid, footer {

9. Make this new div a CSS grid display with the aside on the left and the main element on the right as shown below.

   There are at least two ways to do this. Choose one. Not both.

   • Use grid-template-columns to define the columns and their widths.
   • Use grid-column and grid-row to define the grid items (main and aside) position.
   Check Your Understanding

   .grid {
     display: grid;
     align-items: center;
   }
   
   main {
     grid-column: 2/3;
     margin: 1rem;
   }
   
   aside {
     width: 20rem;
     position: relative;
     grid-column: 1/2;
     grid-row: 1/2;
   }

   Note that the aside selector needs to apply the grid-row whereas the main selector did not. This is because of the order in the HTML structure.

Testing

• Every page in this course will be expected to pass the Create a single row of div items within the container div, if the screen is wide enough. Otherwise design the divs to stack within the given width space. Make sure there is equal space between items and the sides.development standards checklist.
• Validate the HTML by running the Web Developer extension in your browser and Tools -> Validate Local HTML. Correct any errors.
• Validate the CSS by using Validate Local CSS. Correct any errors that are reported.
• Check for color contrast violations at the AA level using the DevTools CSS Overview tool. Remember, you can find learn about this tool and how to use it in the development standards checklist.
• Commit and sync your changes to your wdd130 GitHub Pages enabled repository.
• Enter your GitHub username into this evaluation tool to get a basic Page Evaluation of your HTML.