WDD 130: Web Fundamentals

W04 Code-along Activity: Home Page Layout Enhancements

Overview

Follow the code-along video to enhance your course home page's layout.

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.
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

• Check your page against the development standards checklist.
• Check for color contrast violations at the AA level using the DevTools CSS Overview tool.
• Commit and sync your changes to your wdd130 GitHub Pages enabled repository.
• View your published HTML file in a browser to verify that everything has worked correctly.

  Hint: The published URL will be located at
  https://your-username.github.io/wdd130.

• Validate the HTML and CSS of your rendered page
• Post any questions you have in Microsoft Teams in the Week 04 channel.

Submission

Please pause and re-watch any sections of the instructor video necessary until you have completed the entire activity and your page is similar to the instructor's. When you are finished:

• Return to Canvas to take the quiz.