1
00:00:00,000 --> 00:00:04,518
[MUSIC]

2
00:00:04,518 --> 00:00:05,817
Hey everyone, Guil here.

3
00:00:05,817 --> 00:00:09,544
It's time to sharpen your CSS skills
by practicing the fundamentals of media

4
00:00:09,544 --> 00:00:10,610
queries.

5
00:00:10,610 --> 00:00:13,650
You've learned that media queries
are an important part of web design and

6
00:00:13,650 --> 00:00:17,130
front end web development, because they
let you adapt the presentation of your

7
00:00:17,130 --> 00:00:19,450
content to a specific range of devices and

8
00:00:19,450 --> 00:00:23,110
screen sizes without having
to change the content itself.

9
00:00:23,110 --> 00:00:24,320
So in this practice session,

10
00:00:24,320 --> 00:00:27,370
you will write media queries to adjust
the layout of the simple web page.

11
00:00:27,370 --> 00:00:29,969
To get started,
launch the workspace with this video.

12
00:00:29,969 --> 00:00:33,950
I have included an HTML and
CSS file for this exercise.

13
00:00:33,950 --> 00:00:36,760
And one of the style
sheets linked to the HTML

14
00:00:36,760 --> 00:00:39,670
already includes all the base styles and
layout styles for the page.

15
00:00:39,670 --> 00:00:42,040
So now,
let's walk through what you'll need to do.

16
00:00:42,040 --> 00:00:45,890
In the file, media-queries.css,
you are going to define

17
00:00:45,890 --> 00:00:50,230
five media queries to create break points
for the page at different viewport sizes.

18
00:00:50,230 --> 00:00:52,600
The layout will be developed
in mobile first, so

19
00:00:52,600 --> 00:00:56,420
the break points you write will mostly
be based on minimum viewport widths,

20
00:00:56,420 --> 00:00:59,730
meaning the layout will scale
up as the viewport changes.

21
00:01:01,280 --> 00:01:04,550
In the style sheet,
there are five chunks of CSS rules.

22
00:01:04,550 --> 00:01:07,188
And above each one is a comment
with instructions on the type of

23
00:01:07,188 --> 00:01:10,248
media queries you'll need to write for
that particular block of code.

24
00:01:10,248 --> 00:01:13,489
For instance,
this first block of rules is for

25
00:01:13,489 --> 00:01:18,145
extra small viewport sizes, so
it needs to be placed inside a media

26
00:01:18,145 --> 00:01:22,728
query that targets viewport
sizes narrower than 576 pixels.

27
00:01:22,728 --> 00:01:27,041
So that means you'll use a media feature
that targets a given viewport size along

28
00:01:27,041 --> 00:01:30,120
with any viewport size that's smaller.

29
00:01:30,120 --> 00:01:32,810
Below that, you'll need to wrap
this set of rules here and

30
00:01:32,810 --> 00:01:37,520
a media query that targets viewport
sizes that are 576 pixels and wider.

31
00:01:38,560 --> 00:01:43,110
Next, you'll place this nav
rule inside a media query that

32
00:01:43,110 --> 00:01:47,114
targets only a specific
range of viewport sizes, so

33
00:01:47,114 --> 00:01:52,218
a range wider than 575 pixels and
narrower than 992 pixels.

34
00:01:52,218 --> 00:01:57,969
Then, you will place these two rules in a
media query, targeting medium devices and

35
00:01:57,969 --> 00:02:01,864
up, so viewport sizes that
are 768 pixels and wider.

36
00:02:01,864 --> 00:02:06,811
And finally, you'll write a media
query that floats the nav

37
00:02:06,811 --> 00:02:11,374
element right when the viewport
is 992px and wider.

38
00:02:11,374 --> 00:02:14,641
When you're finished,
your page should look similar to this.

39
00:02:14,641 --> 00:02:15,567
Good luck, have fun.

40
00:02:15,567 --> 00:02:18,462
And in the next video,
I'll walk you through the solution.