Media queries layout

Video playlist walking you through manipulating a website with media queries.


Referenced lessons

This website combines together all the knowledge and skill from the following lessons.

  1. All devices setup
  2. Media queries

This layout uses a navigation called the Footer-Toggle Hybrid. It isn’t described in the Navigation tutorial, but essentially takes the Footer-Anchor pattern, and adds some progressively enhanced JavaScript to turn it into a Toggle navigation.


Video list

  1. Media queries layout: navigation
  2. Media queries layout: text and images
  3. Media queries layout: statistics
  4. Media queries layout: footer
  5. Media queries layout: larger screens