In the Projects section of this series of lessons, students are directed to use codepen.io to build their projects. When a project calls for use of CSS media queries, those media queries will NOT work correctly without the following Meta information added to the <head> portion of the HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Students should be made aware of this. It took a couple of hours to figure this out (with the aid of a developer I know), and it was frustrating for me to add media queries and wonder what I was doing incorrectly when, in fact, I wasn’t doing anything incorrectly. I had written my media queries correctly; they simply weren’t executing.