Test your skills: Responsive web design and media queries

The aim of this skill test is to help you assess whether you understand how to use media queries and get you working with responsive web design with a practical task. Everything you need to know to complete this task is covered in the layout lessons in the CSS layout module.

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

Task

Because you need to test your design in multiple screen sizes, we do not have interactive editors on this page.

To get started:

  1. Download the starting point for this task.
  2. Open the downloaded HTML file in your browser and you will find a wireframed site which will load in a mobile device in a readable manner.
  3. Drag your window smaller or use the responsive design view in Firefox DevTools to view this as if on a phone.

Your task is to create a desktop version of this layout which displays when there is enough screen width to accommodate it. Your final result should look like the image below:

A two column wireframed layout.

There are a number of ways that you could create the desktop layout — enjoy experimenting. You could also add a second breakpoint, perhaps creating a layout that would work well on a tablet in portrait mode.