Midterm Quiz

Part 1: Floats

Floats

Instructions:

  1. Give section a 700 pixel width and center it. Hint. The section is a block element, so text-align: center; does not work.
  2. Add a 3 pixel grey border on the bottom of the header tag.
  3. Display the menu horizontally across the page.
  4. Remove the underline from the links and color them white. Color background red.
  5. Give links a 10 pixel margins, 10px 20px padding and set their display to inline-block.
  6. Style the hover green.
  7. The left and right columns are to be exactly 150 pixels wide. Color the background "silver".
  8. The center column is to be 400 pixels wide and the background is colored #ddd;.
  9. Using floats, position the three content boxes so that the web page is a 3 column layout.
  10. Add 20 pixel padding to all columns. Hint. All columns are divs.

Make the float layout responsive.

  1. When the screen goes below 700 pixels set media queries: @media screen and (max-width: 700px)
  2. Display the navigation list items as blocks.
  3. Set the width of navigation links to 100% and center the text.
  4. Set column width to 100%. This stacks the floats.
  5. Add 10 pixel padding to the sides of section elements.

Right column

Part 2: Display Table

Display Header

Display Table

Instructions:

  1. Keep the width and background color of the columns from above.
  2. Using the display property, turn these three content boxes into columns similar to the three column layout above.
  3. Display the container as a table and the three columns as table cells.
  4. Target the header specific to this section and color the background #ddd.

Make the layout responsive.

  1. When the screen goes below 600 pixels engage media queries: @media screen and (max-width: 600px)
  2. Target the columns and their container. Set display to block.
  3. When that didn't work as expected I added some persuasion. !important does the trick: display: block !important;

Right column

Part 3: Grid

Grid header

  1. Target the section with the class "gid" and display it as a grid with a 10 pixel grid-gap.
  2. Make it horizontal with two grid flex units. Set the first to 1 and the second to 3: grid-template-columns: 1fr 3fr;
  3. Set the header and footer to span both columns using grid-column. Use 1 / -1 to span all columns from beginning to end.
  4. Select all elements inside of the grid and make the background silver with 20 pixels padding, a 20 pixel margin on either side, and set the border radius to 5 pixels. Hint, use universal selector in combination with child selector: > * to select just the children.
  5. Target class header and set display to flex.
  6. Target the h2 inside the header and give it auto margins.
  7. put 1em of padding at the left and bottom of the list items.

Make the grid responsive.

  1. Set a media query to activate when viewport is less than 500 pixels.
  2. Turn grid into display block.
  3. Get rid of border radius for grid children and add a 5 pixel margin to their bottom;