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