CSS Technologies: LP4 – CSS Media Queries

Overview of Learning Plan 4

Define responsive web design (RWD).
Explore RWD Viewport.
Explore RWD Grid View.
Examine Media Queries.
Explore RWD images.
Explore RWD video.
Explore RWD Frameworks.
Explore RWD templates.

Bottom Up Design Challenge

Description

A mobile-first homepage built for smartphones with no additional breakpoints for tablet or desktop — pure mobile-first design.

Bottom Up Challenge

Reflection

I had only done one mobile-first site before this, using Bootstrap. This plan significantly expanded my mobile-first knowledge. Still need more practice at this approach.

CSS Media Query Project

Description

A fully responsive web page using a grid view layout — designed to adapt cleanly across desktops, tablets, and mobile phones.

Media Queries Project

Reflection

This was my first time using media queries for orientation changes. I'm very familiar with media queries generally but need more float and grid-view practice.