Programming Workshop

Bite-sized exercises you can do in 2-6 hours, designed to help you master HTML, CSS, or JavaScript.

1
HTML & CSS
2
Advanced CSS
3
Beginner JS
4
Advanced JS

Media Queries

CSS: Media Queries Exercise

The goal of this exercise is to use CSS media queries to make a webpage appeardifferent for printing and for different window sizes.

Start with this webpage, which already has HTML and CSS for a header, navigation, content, sidebar, and footer. This is what it looks like:

Print Media Queries

Add a CSS media query and appropriate styles so that the webpage looks like the screenshot below when printed.

Specifically:

The header, navigation, and footer should be hidden.
The sidebar should display under the main content.

Size Media Queries

Add a CSS media query and appropriate styles so that the webpage looks like the screenshots below when resized to smaller widths.

Specifically:

  • The sidebar should be hidden.
  • The body should have no padding.
  • The images shouldn’t exceed the width of the window.
  • The navigation items should each be on their own line.
  • The header should be fixed, so that it stays at the top after scrolling.

Examples: