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. Grids
  4. Modular typography
  5. Modules

Modulifier

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