Thomas Wallace

Lectures and Resources

CSS Grid Lab

Today we will build out some common page layout patterns using the CSS grid specification we have been learning.

Lab Set up

  1. In your workspace create a new project sub-directory named: css-grid-lab
  2. Create 4 html files named:
    1. grid-two-col-left.html
    2. grid-two-col-right.html
    3. grid-two-col-stacked.html
    4. grid-two-col-equal.html
  3. Populate Each File with the starter code located here: Starter Code
  4. Add a nested list to your course homepage with links to each file.

 

Assignment

Make sure your grid labs are loaded and linked from your course homepage. At this point your course homepage should have the following assignments posted and linked:

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • CSS Grid Garden
  • CSS Grid Layout Lab
    • Two Column Left Align
    • Two Column Right Align
    • Two Column Stacked
    • two Column Equal