1
00:00:00,000 --> 00:00:09,645
[MUSIC]

2
00:00:09,645 --> 00:00:11,391
Hi, my name is Anwar.

3
00:00:11,391 --> 00:00:14,837
I'm a designer, a developer,
and a teacher at Treehouse.

4
00:00:14,837 --> 00:00:17,090
My pronouns are he/him.

5
00:00:17,090 --> 00:00:21,590
In this practice session, we'll be 
working with CSS Media Queries.

6
00:00:21,590 --> 00:00:26,506
Take a look at the workspace associated
with this video, and you'll see the HTML

7
00:00:26,506 --> 00:00:32,170
contains the homepage of a fictional
organization called CSS Wizards, Inc.

8
00:00:32,170 --> 00:00:36,998
There's a primary navigation,
an article about using CSS Media Queries,

9
00:00:36,998 --> 00:00:40,170
and a footer containing a copyright.

10
00:00:40,170 --> 00:00:44,120
You won't need to alter the HTML at
all to complete this practice session.

11
00:00:45,280 --> 00:00:50,090
Before we check out the CSS,
let's preview the page in the browser.

12
00:00:50,090 --> 00:00:55,128
I'm looking at our layout in mobile view,
and the page actually looks pretty good.

13
00:00:55,128 --> 00:00:59,652
The navigation is stacked vertically,
the article forms a single column, and

14
00:00:59,652 --> 00:01:02,000
all the text looks legible.

15
00:01:02,000 --> 00:01:05,311
So you won't need to do anything 
to enhance mobile legibility

16
00:01:05,311 --> 00:01:07,680
in this exercise.

17
00:01:07,680 --> 00:01:11,140
However, let's take a look
at some other use cases.

18
00:01:11,140 --> 00:01:12,650
One is the printed page.

19
00:01:13,670 --> 00:01:19,030
If I press Cmd+P, I can see that
the print layout isn't all that optimal.

20
00:01:19,030 --> 00:01:23,850
Both the navigation and the image of the
laptop take up a considerable amount of

21
00:01:23,850 --> 00:01:28,610
space, enough that three pages would
be needed to print this small article.

22
00:01:30,250 --> 00:01:33,550
What about viewing the website
on a large screen?

23
00:01:33,550 --> 00:01:36,350
Once again, it's not a great experience.

24
00:01:36,350 --> 00:01:40,270
The vertical navigation seems
like a strange use of space here.

25
00:01:40,270 --> 00:01:43,377
Worse, the laptop image 
becomes gigantic, and

26
00:01:43,377 --> 00:01:47,330
the columns of text are far too wide 
for comfortable reading.

27
00:01:48,790 --> 00:01:53,022
Your task in this practice session is
to use CSS Media Queries to improve

28
00:01:53,022 --> 00:01:56,490
the experience on larger screens and
on the printed page.

29
00:01:57,700 --> 00:02:00,950
I'm previewing a finished
version of the assignment.

30
00:02:00,950 --> 00:02:04,360
And now the navigation has
been arranged horizontally.

31
00:02:04,360 --> 00:02:07,480
The article text is prevented
from growing too wide.

32
00:02:07,480 --> 00:02:11,512
And the laptop image is quite a bit
smaller and is off to the left

33
00:02:11,512 --> 00:02:13,240
so text can wrap next to it.

34
00:02:14,270 --> 00:02:17,847
On the printed page, I've kept 
the laptop image smaller and

35
00:02:17,847 --> 00:02:20,511
off to the left, and
hidden the navigation,

36
00:02:20,511 --> 00:02:24,950
since users probably aren't interested
in printing that part of my page.

37
00:02:26,950 --> 00:02:31,580
Now let's take a look at the CSS
provided in your workspace.

38
00:02:31,580 --> 00:02:34,930
The CSS here is responsible for
styling the mobile view, and

39
00:02:34,930 --> 00:02:37,820
you shouldn't need to edit any of it.

40
00:02:37,820 --> 00:02:42,440
Your task is to write CSS Media Queries
at the bottom of the page.

41
00:02:42,440 --> 00:02:46,688
One for improving the layout for
the printed page, and one for

42
00:02:46,688 --> 00:02:50,210
when the viewport grows
wider than 768 pixels.

43
00:02:51,360 --> 00:02:55,527
I've included readings on CSS 
Media Queries in the Teacher's Notes

44
00:02:55,527 --> 00:02:57,620
if you need a refresher. Have fun.