1
00:00:00,160 --> 00:00:04,544
Modern layouts are built with mobile
devices in mind from the start.

2
00:00:04,544 --> 00:00:07,957
It's easier to build a mobile layout
when you're first starting out

3
00:00:07,957 --> 00:00:11,866
because you don't have to worry 
about any of the complex features 

4
00:00:11,866 --> 00:00:13,523
of wider desktop layouts.

5
00:00:13,523 --> 00:00:18,019
Mobile layouts are usually simple one
column layouts because of the narrow

6
00:00:18,019 --> 00:00:20,023
screen width on a mobile device.

7
00:00:20,023 --> 00:00:24,210
This is easier than creating a complex
layout on the desktop first,

8
00:00:24,210 --> 00:00:28,189
then trying to figure out how to
arrange it for smaller screens.

9
00:00:28,189 --> 00:00:34,317
When we use a mobile-first layout approach
with CSS, we serve the basic layout styles

10
00:00:34,317 --> 00:00:39,948
and the minimal amount of code to style
a page for a small mobile device first.

11
00:00:39,948 --> 00:00:44,884
Then using media queries, we add break
points, which adjust the layout for

12
00:00:44,884 --> 00:00:46,745
wider screens and devices.

13
00:00:46,745 --> 00:00:47,847
In other words,

14
00:00:47,847 --> 00:00:52,667
we define all the common layout styles
before adding any media queries.

15
00:00:52,667 --> 00:00:56,546
You can check the Teacher's Notes of
this video for more resources and

16
00:00:56,546 --> 00:00:58,853
videos about the mobile first approach.

17
00:00:58,853 --> 00:01:03,490
I'm gonna start with a really simple
example of mobile-first layout.

18
00:01:03,490 --> 00:01:08,306
So the current styles in the CSS
apply to all browsers from phones to

19
00:01:08,306 --> 00:01:09,857
desktop computers.

20
00:01:09,857 --> 00:01:15,309
However, on a small screen,
the 70% width of the container makes

21
00:01:15,309 --> 00:01:20,396
less sense because it's going to
look too narrow on the screen.

22
00:01:20,396 --> 00:01:22,832
So I should expand the container so

23
00:01:22,832 --> 00:01:26,532
that it fills the smaller
screen of a mobile device.

24
00:01:26,532 --> 00:01:30,125
So I'm going to define one
media query in my CSS.

25
00:01:30,125 --> 00:01:36,164
So first, I'll select and copy one of
the main comment flags in my CSS and

26
00:01:36,164 --> 00:01:39,931
paste it at the very
bottom of my style sheet.

27
00:01:39,931 --> 00:01:43,054
And I'll change the text to Media Queries.

28
00:01:43,054 --> 00:01:45,581
Because this is where I'll
add any media queries.

29
00:01:49,170 --> 00:01:51,609
So right below the comment flag.

30
00:01:51,609 --> 00:01:57,900
I'm going to create a new
media query by typing @media.

31
00:01:57,900 --> 00:02:03,240
Now the mobile-first approach
uses the min-width media feature.

32
00:02:03,240 --> 00:02:08,705
Since you're building the layout up
from narrow screens to wider screens.

33
00:02:08,705 --> 00:02:11,916
I want this media query
to target any device or

34
00:02:11,916 --> 00:02:15,054
viewport width that is 
769 pixels or wider.

35
00:02:15,054 --> 00:02:20,265
So I'm going to set the min-width
value to 769 pixels.

36
00:02:20,265 --> 00:02:24,354
The mobile-first approach is the approach
we'll use from this point forward.

37
00:02:24,354 --> 00:02:28,634
So throughout the course, we're going
to add advanced layout styles and

38
00:02:28,634 --> 00:02:31,892
overrides for larger screens 
inside this media query.

39
00:02:31,892 --> 00:02:34,513
I'm gonna start with one simple CSS rule.

40
00:02:34,513 --> 00:02:37,457
So you can see the mobile-first in action.

41
00:02:37,457 --> 00:02:44,342
So every browser from phones to desktop
will load the CSS outside the media query.

42
00:02:44,342 --> 00:02:49,109
These are the base rules that define
the common styles shared across all

43
00:02:49,109 --> 00:02:50,943
screen sizes and devices.

44
00:02:50,943 --> 00:02:55,235
And only those devices
that are 769 pixels or

45
00:02:55,235 --> 00:02:59,643
wider will load the CSS
inside this media query.

46
00:02:59,643 --> 00:03:04,875
So I want the container elements
to be 100% wide in small screens.

47
00:03:04,875 --> 00:03:08,532
So they should take up
the full width of the screen.

48
00:03:08,532 --> 00:03:12,869
So back in my stylesheet,
I'm going to remove the width and

49
00:03:12,869 --> 00:03:16,704
margin declarations from
the base container rule.

50
00:03:16,704 --> 00:03:22,045
So I'm going to select both declarations
and cut it out of the container rule.

51
00:03:22,045 --> 00:03:25,659
Then I'm going to declare them
inside the media query instead.

52
00:03:25,659 --> 00:03:33,155
So inside the media query, I'll create
a new rule that targets container.

53
00:03:33,155 --> 00:03:39,292
And I'll paste in the width and margin
declarations inside this container rule.

54
00:03:39,292 --> 00:03:44,243
I'm also going to add a max-width
value of 1000 pixels.

55
00:03:44,243 --> 00:03:49,133
So that the layout container does 
not get any wider than 1000 pixels

56
00:03:49,133 --> 00:03:50,302
on larger screens.

57
00:03:50,302 --> 00:03:53,999
I also want to give my layout 
containers left and right padding

58
00:03:53,999 --> 00:03:58,573
to separate the content from the 
left and right margins of the page.

59
00:03:58,573 --> 00:04:03,359
So I'm going to add the padding
properties in the base container rule

60
00:04:03,359 --> 00:04:07,085
since they'll be shared by 
all screens and devices.

61
00:04:07,085 --> 00:04:10,245
So I'll add a padding-left 
property first.

62
00:04:10,245 --> 00:04:13,774
And I'll set the value to 1em.

63
00:04:13,774 --> 00:04:19,324
And below that, I'll set the 
padding-right value to 1em as well.

64
00:04:19,324 --> 00:04:24,360
So when I save my style sheet and take
a look at my layout in the browser, we can

65
00:04:24,360 --> 00:04:29,581
see that there's some nice whitespace
around the content and small screens.

66
00:04:29,581 --> 00:04:35,428
If I open my developer tools and
Inspect any of the container divs,

67
00:04:35,428 --> 00:04:40,163
I can see that the left and right 
padding I applied to the container

68
00:04:40,163 --> 00:04:44,570
elements makes the layout
wider than 70% of the browser.

69
00:04:44,570 --> 00:04:49,094
And it's going to make it wider than
the 1000 pixel max-width I applied to

70
00:04:49,094 --> 00:04:50,061
the container.

71
00:04:50,061 --> 00:04:54,855
Well, that's because it's adding
the 1em of padding on both

72
00:04:54,855 --> 00:04:56,853
sides to its total width.

73
00:04:58,836 --> 00:05:04,420
Now I want the layout's width to be
exactly 70% of the browser viewport and

74
00:05:04,420 --> 00:05:07,975
the max-width to be exactly 1000 pixels.

75
00:05:07,975 --> 00:05:12,411
So this is a quirky CSS box model
behavior you've seen before in

76
00:05:12,411 --> 00:05:14,062
previous CSS courses.

77
00:05:14,062 --> 00:05:18,901
So I'm going to use the box-sizing
property to prevent any padding and

78
00:05:18,901 --> 00:05:21,655
border width values 
from expanding and

79
00:05:21,655 --> 00:05:26,844
possibly breaking my layout containers
as I add more content to the page.

80
00:05:26,844 --> 00:05:30,906
Back in my stylesheet, I'm going 
to create a new rule up top and

81
00:05:30,906 --> 00:05:33,831
my base rules using
the universal selector.

82
00:05:33,831 --> 00:05:38,245
So that every element inherits
this box-sizing declaration.

83
00:05:38,245 --> 00:05:43,635
In the rule, I'm going to type
the box-sizing property and

84
00:05:43,635 --> 00:05:46,281
set the value to border-box.

85
00:05:46,281 --> 00:05:51,479
The value border-box forces the padding
and borders into the width and

86
00:05:51,479 --> 00:05:55,519
height of the elements,
instead of expanding them.

87
00:05:55,519 --> 00:06:00,373
So now my containers take up exactly
70% of the viewport width and

88
00:06:00,373 --> 00:06:03,963
the max-width will be exactly 1000 pixels.

89
00:06:03,963 --> 00:06:08,337
Now I've posted a lot of helpful articles
and videos about mobile-first and

90
00:06:08,337 --> 00:06:12,031
the box-sizing property in
the Teacher's Notes of this video.

91
00:06:12,031 --> 00:06:16,506
Up next, I'll show you how to keep the
footer at the bottom of the page at all

92
00:06:16,506 --> 00:06:21,070
times and remove any gaps between
the bottom of the viewport and the footer.