App Lab logo

COMP 523: Software Engineering

Layout resources

Here are the slides and demos from class today, about layout.

First, the slides (in PDF format).

Second, the demos and links:

  1. normal flow
  2. floats
  3. table layout (for forms)
  4. flex direction
  5. flex alignment
  6. flex sizing
  7. flexbox froggy (game)
  8. relative positioning
  9. absolute positioning
  10. fixed positioning
  11. sticky positioning
  12. App Lab (as mobile-first responsive web design)
  13. CSS grid is well supported
  14. MDN tutorial for grid layout
  15. grid garden (game)