Responsive Design
Media queries allow us to detect device characteristics and apply styles conditionally.
Unit: Responsive design
This unit covers responsive web design and media queries.
This week we will cover responsive layouts and animations. We will also cover some basic JavaScript for simple interactions and manipulation of the DOM.
The core of responsive design is that we cannot make assumptions about the size of the viewport in the users device. We can use media queries to detect characteristics of the device and to apply styles conditionally.
In this unit
A Responsive Page
In this exercise we will create a simple responsive page. We will be using media queries to change our layout at different viewport widths.
A Mobile Menu
For a bit of fun, we will build a mobile menu which will reduce to a simple icon. Our menu can be opened or closed by pressing the icon.