Modular website layout

Combining all of the modular web design lessons together to create a complete layout.

Referenced lessons

This layout and series of videos combine together all these different lessons—so they should be watched first:

  1. All devices setup
  2. Media queries
  3. Flexbox grids
  4. Modular typography
  5. Modules


I created a tool called Modulifier after recording these videos. It would dramatically simplify some of the CSS and reduce some copying and pasting.

There’s a video introduction within the ☛ Modules playlist.

Video list

  1. Modular layouts: Masthead
  2. Modular layouts: Panorama
  3. Modular layouts: Overview section
  4. Modular layouts: Moons
  5. Modular layouts: News
  6. Modular layouts: Footer
  7. Modular layouts: Final details