CSS Media Queries Make webpages respond to different devices or changes devices make such as window resizing or phone rotation or touch screen support. Media Queries Reference Firefox's Developer Tool for Simulating Devices This is the result (I'm using firefox responsive design mode tool in the video:) 1. Simple HTML page, you'll want a style tag for your CSS work. 2. Create 5 tags with text inside them (in a valid HTML page.) color each differently. Don't bother matching the colors. Please use CSS to color cach tag and a way to select that tag (ID or class) - H1 or DIV or P tags work well but I don't care. portrait mode landscape mode > 300 wide > 300 tall big 3. Validate the HTML. Bugs multiply as you make the page more complex; a CSS problem could actually be an HTML problem. 4. Find the CSS property to HIDE something using CSS (there are two different ones that would work.) - Knowing how to hide things with CSS is extremely important. There are two CSS properties: one can hide something like it was deleted, the other make it invisible (so it still takes up space but you can't see it.) Either property is ok... but I recommend finding both. (If stuck ask a question but I recommend trying to search a reference or google then check a reference.) 5. Hide all the tags by default. Select each tag in CSS separately to make it show up (this could be the same css you use to set the color.) The Media Query for each will flip on/off the line of CSS where you make the tag show up again. Concept: all_tags_selector { property_you_find : hide_value; tag_1_selector { property_you_find : show_value; maybe background-color: too; tag_2_selector { property_you_find : show_value; maybe background-color: too; 6. Using Media Queries show the proper tags depending upon the device changes (see video at bottom:) 1. show landscape when the device is in landscape orientation 2. show portrait when the device is in portrait orientation 3. show >300 wide when the device is over 300px wide 4. show >300 tall when the device is over 300px high 5. show big when the device is above in 400px width and height