Preview
Video Player
00:00
00:00
Let's Practice Media Queries!
2:22Media queries let you adapt the presentation of your content to a specific range of devices and screen sizes, without having to change the content itself. In this practice session, you'll write five media queries to adjust the layout of a web page at different viewport sizes.
[MUSIC]
0:00
Hey everyone, Guil here.
0:04
It's time to sharpen your CSS skills
by practicing the fundamentals of media
0:05
queries.
0:09
You've learned that media queries
are an important part of web design and
0:10
front end web development, because they
let you adapt the presentation of your
0:13
content to a specific range of devices and
0:17
screen sizes without having
to change the content itself.
0:19
So in this practice session,
0:23
you will write media queries to adjust
the layout of the simple web page.
0:24
To get started,
launch the workspace with this video.
0:27
I have included an HTML and
CSS file for this exercise.
0:29
And one of the style
sheets linked to the HTML
0:33
already includes all the base styles and
layout styles for the page.
0:36
So now,
let's walk through what you'll need to do.
0:39
In the file, media-queries.css,
you are going to define
0:42
five media queries to create break points
for the page at different viewport sizes.
0:45
The layout will be developed
in mobile first, so
0:50
the break points you write will mostly
be based on minimum viewport widths,
0:52
meaning the layout will scale
up as the viewport changes.
0:56
In the style sheet,
there are five chunks of CSS rules.
1:01
And above each one is a comment
with instructions on the type of
1:04
media queries you'll need to write for
that particular block of code.
1:07
For instance,
this first block of rules is for
1:10
extra small viewport sizes, so
it needs to be placed inside a media
1:13
query that targets viewport
sizes narrower than 576 pixels.
1:18
So that means you'll use a media feature
that targets a given viewport size along
1:22
with any viewport size that's smaller.
1:27
Below that, you'll need to wrap
this set of rules here and
1:30
a media query that targets viewport
sizes that are 576 pixels and wider.
1:32
Next, you'll place this nav
rule inside a media query that
1:38
targets only a specific
range of viewport sizes, so
1:43
a range wider than 575 pixels and
narrower than 992 pixels.
1:47
Then, you will place these two rules in a
media query, targeting medium devices and
1:52
up, so viewport sizes that
are 768 pixels and wider.
1:57
And finally, you'll write a media
query that floats the nav
2:01
element right when the viewport
is 992px and wider.
2:06
When you're finished,
your page should look similar to this.
2:11
Good luck, have fun.
2:14
And in the next video,
I'll walk you through the solution.
2:15