[MUSIC]

Hey everyone, Guil here.

It's time to sharpen your CSS skills by practicing the fundamentals of media

queries.

You've learned that media queries are an important part of web design and

front end web development, because they let you adapt the presentation of your

content to a specific range of devices and

screen sizes without having to change the content itself.

So in this practice session,

you will write media queries to adjust the layout of the simple web page.

To get started, launch the workspace with this video.

I have included an HTML and CSS file for this exercise.

And one of the style sheets linked to the HTML

already includes all the base styles and layout styles for the page.

So now, let's walk through what you'll need to do.

In the file, media-queries.css, you are going to define

five media queries to create break points for the page at different viewport sizes.

The layout will be developed in mobile first, so

the break points you write will mostly be based on minimum viewport widths,

meaning the layout will scale up as the viewport changes.

In the style sheet, there are five chunks of CSS rules.

And above each one is a comment with instructions on the type of

media queries you'll need to write for that particular block of code.

For instance, this first block of rules is for

extra small viewport sizes, so it needs to be placed inside a media

query that targets viewport sizes narrower than 576 pixels.

So that means you'll use a media feature that targets a given viewport size along

with any viewport size that's smaller.

Below that, you'll need to wrap this set of rules here and

a media query that targets viewport sizes that are 576 pixels and wider.

Next, you'll place this nav rule inside a media query that

targets only a specific range of viewport sizes, so

a range wider than 575 pixels and narrower than 992 pixels.

Then, you will place these two rules in a media query, targeting medium devices and

up, so viewport sizes that are 768 pixels and wider.

And finally, you'll write a media query that floats the nav

element right when the viewport is 992px and wider.

When you're finished, your page should look similar to this.

Good luck, have fun.

And in the next video, I'll walk you through the solution.