1
00:00:00,008 --> 00:00:06,362
[SOUND] Hey everyone, Guil here.

2
00:00:06,362 --> 00:00:10,040
In this workshop,
I'm gonna teach you how to build a simple,

3
00:00:10,040 --> 00:00:14,500
responsive website navigation using
CSS media queries and Flexbox.

4
00:00:14,500 --> 00:00:17,980
So, the navigation is one of the most
important parts of a website,

5
00:00:17,980 --> 00:00:20,490
because it helps users
find what they want and

6
00:00:20,490 --> 00:00:24,270
direct them to areas of your
site they might not know about.

7
00:00:24,270 --> 00:00:27,770
Now, most of the time a website's
navigation won't look or

8
00:00:27,770 --> 00:00:31,510
work the same way in all
viewport sizes and devices.

9
00:00:31,510 --> 00:00:36,660
So, as web designers, we need to design
a navigation that serves the users need

10
00:00:36,660 --> 00:00:40,350
according to their screen size,
or the device they're using.

11
00:00:40,350 --> 00:00:44,590
So, before we begin coding, let's take
a look at what we're going to build.

12
00:00:44,590 --> 00:00:48,690
So this is the navigation for
a UI toolkit called Poly.

13
00:00:48,690 --> 00:00:53,330
The navigation here in the header
consists of a nice logo graphic, and

14
00:00:53,330 --> 00:00:55,700
the main navigation menu.

15
00:00:55,700 --> 00:01:00,110
Now on narrow view port sizes
in mobile devices, the logo and

16
00:01:00,110 --> 00:01:04,520
navigation are displayed in one column,
as we could see here.

17
00:01:04,520 --> 00:01:06,180
Then, in wider view ports and

18
00:01:06,180 --> 00:01:10,720
devices, the navigation scales
up to a wider horizontal layout.

19
00:01:10,720 --> 00:01:12,310
And, in the widest range,

20
00:01:12,310 --> 00:01:15,380
the navigation is positioned over
to the right side of the page.

21
00:01:15,380 --> 00:01:17,890
So, it's on the same line as the logo.

22
00:01:17,890 --> 00:01:22,500
So, I'm gonna build this navigation using
the Flexbox CSS layout feature, and

23
00:01:22,500 --> 00:01:24,350
a mobile first approach.

24
00:01:24,350 --> 00:01:27,620
So if you haven't watched our
videos on Flexbox layout,

25
00:01:27,620 --> 00:01:31,460
I recommend watching the Flexbox
videos posted in the teachers notes

26
00:01:31,460 --> 00:01:33,760
before continuing with this workshop.

27
00:01:33,760 --> 00:01:38,350
Now there are many different ways to build
a responsive navigation like this one.

28
00:01:38,350 --> 00:01:41,090
So, I'm gonna show you one method.

29
00:01:41,090 --> 00:01:46,090
Over in my project files, I have
an HTML file, and in it some content.

30
00:01:46,090 --> 00:01:50,733
So here I have a headline and
right below a paragraph.

31
00:01:50,733 --> 00:01:56,295
And this index.html file is
linked to two style sheets.

32
00:01:56,295 --> 00:02:00,094
Here we have base.css, and nav.css.

33
00:02:00,094 --> 00:02:05,155
Now base.css contains all
the base styles for my page.

34
00:02:05,155 --> 00:02:11,642
So I'm going to write the CSS for
the responsive navigation inside nav.css.

35
00:02:11,642 --> 00:02:18,320
So over in my HTML file, I want to
build my navigation inside a header.

36
00:02:18,320 --> 00:02:24,280
So, inside this inner div, and
inside the comment tags for

37
00:02:24,280 --> 00:02:28,710
header, I'm going to
nest a header element.

38
00:02:28,710 --> 00:02:31,548
And I'm going to give it
the class main-header.

39
00:02:37,327 --> 00:02:43,900
So next, inside my main-header element,
I'll add the site's logo.

40
00:02:43,900 --> 00:02:49,450
So, the logo should link to the website's
homepage, so I'm going to nest my logo

41
00:02:49,450 --> 00:02:53,340
inside an anchor element, so
I'm going to create an anchor element.

42
00:02:55,240 --> 00:03:01,342
Add an href attribute and
I'm going to give it the class site-Logo.

43
00:03:06,658 --> 00:03:12,450
So next I want to embed
the Poly logo as an SVG image.

44
00:03:12,450 --> 00:03:16,350
Now embedding an SVG is just
like embedding a regular image.

45
00:03:16,350 --> 00:03:21,880
So I'm going to add an image tag,
and as the source value,

46
00:03:21,880 --> 00:03:28,100
I'm going to define this logo.svg file
located inside this image directory.

47
00:03:28,100 --> 00:03:32,533
So, I'll say image/logo.svg, and

48
00:03:32,533 --> 00:03:38,740
then I'll add an all attribute, and
I'll set the value to Poly- UI Toolkit.

49
00:03:41,930 --> 00:03:45,270
All right.
So below the anchor element,

50
00:03:45,270 --> 00:03:48,140
I am going to create the markup for
the navigation menu.

51
00:03:48,140 --> 00:03:54,674
So to build the menu, I am going to use an
unordered list and give it the class nav.

52
00:03:57,149 --> 00:03:59,677
And inside my nav ul element,

53
00:03:59,677 --> 00:04:05,660
I'll nest the six list items that
will contain the navigation links.

54
00:04:05,660 --> 00:04:07,480
So, let me nest the first one.

55
00:04:07,480 --> 00:04:14,800
So, say, li and then in here, I'm going to
nest an anchor element or the nav links.

56
00:04:14,800 --> 00:04:16,990
And let's make the first one Typography.

57
00:04:18,030 --> 00:04:24,080
So what I'll do now is copy this first
list item, and paste it below five times.

58
00:04:25,860 --> 00:04:30,820
So now I'll go back up to my second link,
and change it to say Button.

59
00:04:32,010 --> 00:04:34,170
Let's make the third one say Form.

60
00:04:36,020 --> 00:04:37,545
The next one will be Images.

61
00:04:40,175 --> 00:04:43,810
Then we'll do Grid, and
finally, Navigation.

62
00:04:43,810 --> 00:04:48,800
All right, so let's save our index file
and take a look at what we have so far,

63
00:04:48,800 --> 00:04:52,560
so when I click the Preview button,
and view my navigation in the browser,

64
00:04:52,560 --> 00:04:57,000
we can see how we have
the really big Poly logo up top,

65
00:04:57,000 --> 00:05:00,760
then right below we have
the six navigation links.

66
00:05:00,760 --> 00:05:03,580
So now, let's begin styling
the navigation with CSS.

67
00:05:03,580 --> 00:05:08,660
I'm gonna use a mobile-first
approach to style the navigation.

68
00:05:08,660 --> 00:05:12,910
When we use a mobile-first approach,
we serve the basic layout styles in

69
00:05:12,910 --> 00:05:18,020
the minimal amount of code to style
a page for small, mobile device.

70
00:05:18,020 --> 00:05:22,480
Then at certain break points, we gradually
adjust the layout with media queries, for

71
00:05:22,480 --> 00:05:24,660
wider screens and devices.

72
00:05:24,660 --> 00:05:28,980
So in other words, a mobile first approach
means that I will define the common styles

73
00:05:28,980 --> 00:05:33,608
with a header, logo, and navigation
links before adding any media queries.

74
00:05:33,608 --> 00:05:38,577
In my nav.css styles, I'm going to
add all my comment styles first,

75
00:05:38,577 --> 00:05:42,400
right here under
the Main Styles comment flag.

76
00:05:42,400 --> 00:05:46,940
First I'm going to target
the class .main-header, and

77
00:05:46,940 --> 00:05:49,710
I'm going to give the main
header some top padding, so

78
00:05:49,710 --> 00:05:54,070
let me add a padding-top property,
and set the value to 2em.

79
00:05:55,500 --> 00:05:57,410
Next, I want to style the logo.

80
00:05:57,410 --> 00:06:03,690
So, I'll target the class site-logo,
and I wanna set its width.

81
00:06:03,690 --> 00:06:09,150
So, I'll add a width property and
set it to 110px.

82
00:06:09,150 --> 00:06:14,490
All right, so now,
I'm going to target my nav element.

83
00:06:14,490 --> 00:06:16,680
And I'm going to give it some top margin.

84
00:06:16,680 --> 00:06:23,620
So I'll add a margin-top property,
and I'll set the value to 1.5em.

85
00:06:23,620 --> 00:06:29,440
Next, I'm going to target and style
the navigation links inside my nav here.

86
00:06:29,440 --> 00:06:34,630
So to do that, I'm going to target nav,
then its descendant anchor elements,

87
00:06:35,890 --> 00:06:38,420
and I want to display them block, so

88
00:06:38,420 --> 00:06:43,830
I'll add a display property, set the value
to block, and let's set the colors.

89
00:06:43,830 --> 00:06:47,811
I'll add a color property, #797e83,

90
00:06:47,811 --> 00:06:52,100
which gives us a shade of grey.

91
00:06:53,110 --> 00:06:55,129
Let's add a font-size property.

92
00:06:55,129 --> 00:07:02,368
So let's say font size, and
I'm going to set it to 1.125em.

93
00:07:02,368 --> 00:07:05,772
And then I'll add a font
weight property below that.

94
00:07:05,772 --> 00:07:09,557
We'll say font weight 300.

95
00:07:09,557 --> 00:07:14,940
And I want to align the text to center,
so I'll add a text to line property.

96
00:07:14,940 --> 00:07:17,440
And, set the value to center,
and a couple more.

97
00:07:17,440 --> 00:07:18,620
Let's give it some padding.

98
00:07:18,620 --> 00:07:23,342
So, I'll add a padding property and
set the value to .4em.

99
00:07:23,342 --> 00:07:27,670
And finally,
I want to give it a bottom border.

100
00:07:27,670 --> 00:07:32,910
So, I'll add a border-bottom property and
set the value to 1px

101
00:07:33,920 --> 00:07:38,900
solid, and I'll make the color #ebecec.

102
00:07:38,900 --> 00:07:44,490
So, next,
I want to target my nav links on hover.

103
00:07:44,490 --> 00:07:46,220
So, right below this rule,

104
00:07:46,220 --> 00:07:51,790
I'll create a new rule that targets
the links inside nav on hover.

105
00:07:51,790 --> 00:07:53,450
And, I want to change the color.

106
00:07:53,450 --> 00:07:58,050
So, I'll add a color property and
I'll make the value # 0b0b0b,

107
00:07:59,920 --> 00:08:03,280
which gives us that darker shade of black.

108
00:08:03,280 --> 00:08:05,280
Then I want to change
the bottom border color.

109
00:08:05,280 --> 00:08:09,829
So I'll say border-bottom-color, and

110
00:08:09,829 --> 00:08:14,125
I'll change the value to #52bab3,

111
00:08:14,125 --> 00:08:18,640
which gives us this shade of aqua.

112
00:08:18,640 --> 00:08:21,210
All right so
let's take a look at what we have so far.

113
00:08:21,210 --> 00:08:25,480
I'll save my stop sheet and
go back to the preview and refresh.

114
00:08:25,480 --> 00:08:29,180
And as we can see nothing too
special up to this point.

115
00:08:29,180 --> 00:08:33,520
So far we have a nice site
navigation that's functional

116
00:08:33,520 --> 00:08:36,030
in all viewport sizes and devices.

117
00:08:36,030 --> 00:08:37,980
But it can be presented better.

118
00:08:37,980 --> 00:08:40,540
So we can optimize
the navigation experience for

119
00:08:40,540 --> 00:08:46,200
users according to their device width,
or view port size, so lets do that next.

120
00:08:46,200 --> 00:08:48,270
Instead of using floats or
inline block display,

121
00:08:48,270 --> 00:08:52,732
I'm going to lay out
the navigation using Flexbox.

122
00:08:52,732 --> 00:08:57,850
So, Flexbox is a CSS layout mode that
is source ordered and dependent.

123
00:08:57,850 --> 00:09:02,090
That means that we can change the
direction and order of a set of elements

124
00:09:02,090 --> 00:09:07,190
like the list items here in the navigation
regardless of their order in the HTML.

125
00:09:07,190 --> 00:09:11,390
So, for example I can make
the last list item in the list

126
00:09:11,390 --> 00:09:15,980
appear first in the navigation,
or even second, third or fourth.

127
00:09:15,980 --> 00:09:21,020
This makes flex box a great tool for
building a responsive site navigation.

128
00:09:21,020 --> 00:09:25,820
So, the first step in creating a Flexbox
layout is to define a flex container.

129
00:09:25,820 --> 00:09:28,740
Now a flex container is the HTML element

130
00:09:28,740 --> 00:09:32,280
that contains the other elements
being laid out with flex box.

131
00:09:32,280 --> 00:09:35,760
And it establishes a flex
formatting context.

132
00:09:35,760 --> 00:09:41,300
So for example,
the nav ul element here contains these

133
00:09:41,300 --> 00:09:44,730
list item elements used for
the navigation links.

134
00:09:44,730 --> 00:09:47,673
So the ul element will
be a flex container.

135
00:09:47,673 --> 00:09:51,993
Now I wanna designate two flex
containers in my navigation.

136
00:09:51,993 --> 00:09:57,034
So the flex containers will
be main-header and nav.

137
00:09:57,034 --> 00:10:01,695
So, back in nav.css right
above the main header rule,

138
00:10:01,695 --> 00:10:05,690
below the main styles comment flag.

139
00:10:05,690 --> 00:10:09,940
I'm going to once again target
the main header class and

140
00:10:09,940 --> 00:10:13,020
the nav class in the same rule.

141
00:10:13,020 --> 00:10:16,590
Now the reason I'm creating
two flex containers for

142
00:10:16,590 --> 00:10:20,980
both main header, and
nav is because the Flexbox formatting

143
00:10:20,980 --> 00:10:25,970
context itself does not get
inherited by child elements.

144
00:10:25,970 --> 00:10:31,660
Now, since I also want to layout
the list items here, inside nav.

145
00:10:31,660 --> 00:10:36,530
With Flexbox, I also need to establish
a Flexbox context inside nav.

146
00:10:37,600 --> 00:10:41,195
So, back at my style sheet,
inside the .main-header and

147
00:10:41,195 --> 00:10:45,980
.nav rule, I'm going to add a display
property, set the value to flex.

148
00:10:45,980 --> 00:10:49,790
So now we have flex spots
happening in our layout.

149
00:10:49,790 --> 00:10:53,243
So that means that the elements
inside .main-header and

150
00:10:53,243 --> 00:10:56,100
.nav can be laid out vertically,
horizontally, and

151
00:10:56,100 --> 00:11:00,310
have flexible dimensions,
to adapt to the display space.

152
00:11:00,310 --> 00:11:03,800
So, if you've worked with Flexbox,
you know that flex items,

153
00:11:03,800 --> 00:11:07,340
by default,
are laid out in a horizontal direction.

154
00:11:07,340 --> 00:11:11,730
So, If I save my style sheet and
refresh our preview,

155
00:11:11,730 --> 00:11:16,500
we can see that the header and
nav are now laid out in the same row.

156
00:11:16,500 --> 00:11:20,360
So, I wanna change this to
a column layout instead.

157
00:11:20,360 --> 00:11:24,140
That direction can be changed with
the flex direction properties.

158
00:11:24,140 --> 00:11:31,600
So inside my main header and nav rule, I'm
going to add the property flex direction.

159
00:11:31,600 --> 00:11:34,450
And set the value to column.

160
00:11:34,450 --> 00:11:37,640
So when I do that,
notice how the header and

161
00:11:37,640 --> 00:11:43,800
navigation are now laid out in a column,
instead of in a horizontal row.

162
00:11:43,800 --> 00:11:48,850
But notice how the logo is flush with
the left margin of the container.

163
00:11:48,850 --> 00:11:52,220
So I want to center
the logo inside the header.

164
00:11:52,220 --> 00:11:55,620
To do that, I can use the align
self flex box properties.

165
00:11:55,620 --> 00:12:00,410
So back in my style sheet,
I'll scroll down to the site logo rule.

166
00:12:01,500 --> 00:12:07,060
And I will add the property align-self,
and set the value to center.

167
00:12:07,060 --> 00:12:09,610
So now when we take a look at it again,

168
00:12:09,610 --> 00:12:14,490
notice how the logo is now horizontally
centered inside the header.

169
00:12:14,490 --> 00:12:18,080
Next, I'm going to write the CSS
that will lay out the navigation

170
00:12:18,080 --> 00:12:20,670
in a wider viewport and device range.

171
00:12:20,670 --> 00:12:24,010
So, back in my nav.css file.

172
00:12:24,010 --> 00:12:27,980
I'll scroll all the way down to
the media queries section here.

173
00:12:27,980 --> 00:12:32,120
And I'm going to create a media query
break point, that will style the main

174
00:12:32,120 --> 00:12:38,870
header and navigation when the view port
or device is at 769 pixels or wider.

175
00:12:38,870 --> 00:12:42,430
So I'll write @media.

176
00:12:42,430 --> 00:12:44,510
And I'll use the min width media feature.

177
00:12:45,650 --> 00:12:48,000
And I'll set it to 769 pixels.

178
00:12:49,410 --> 00:12:54,520
So when the view port or
device is 769 pixels or

179
00:12:54,520 --> 00:12:57,850
wider, I'm going to target main header

180
00:13:01,720 --> 00:13:05,480
and set the height to 200 pixels.

181
00:13:05,480 --> 00:13:08,510
And then site logo will be a little wider.

182
00:13:08,510 --> 00:13:13,439
So, let's target site logo
inside the media query and

183
00:13:13,439 --> 00:13:16,340
set the width to 140 pixels.

184
00:13:18,868 --> 00:13:21,892
I also wanna give the nav
element some top-margin,

185
00:13:21,892 --> 00:13:25,020
just to give it some
separation from the site-logo.

186
00:13:25,020 --> 00:13:32,220
So let's target nav and
give it a margin top value of 3em.

187
00:13:33,510 --> 00:13:38,860
And finally, I'm going to target
the anchor elements and side nav.

188
00:13:38,860 --> 00:13:42,220
And I'm going to change
their bottom border color.

189
00:13:42,220 --> 00:13:43,020
So I'm going to say.

190
00:13:44,510 --> 00:13:45,990
Border bottom color.

191
00:13:48,550 --> 00:13:50,710
And I'll set the value to transparent.

192
00:13:50,710 --> 00:13:54,900
Now I'm setting the navigation links
bottom border color to transparent,

193
00:13:54,900 --> 00:13:57,950
to remove this light grey border.

194
00:13:57,950 --> 00:13:59,810
Because at this wider break point,

195
00:13:59,810 --> 00:14:03,590
we only want to see these link
border colors on hover only.

196
00:14:04,890 --> 00:14:10,440
So, when we save our style sheet, and take
a look at our navigation in the browser,

197
00:14:10,440 --> 00:14:15,340
notice how once the view
port is at 769 pixels wide,

198
00:14:15,340 --> 00:14:18,880
the navigation links are still
laid out in a column.

199
00:14:18,880 --> 00:14:23,880
So, at this width here, I want to lay
them out horizontally, in a single row.

200
00:14:23,880 --> 00:14:28,700
So, to lay them out as a row,
I'm going to go back to my style sheet.

201
00:14:28,700 --> 00:14:33,360
And, I'm going to give nav
a flex-direction property.

202
00:14:33,360 --> 00:14:35,190
And, I'm going to set the value to row.

203
00:14:36,580 --> 00:14:41,100
So, in the nav rule,
I'll add the flex-direction property and

204
00:14:41,100 --> 00:14:42,660
the value would be row.

205
00:14:42,660 --> 00:14:43,830
So, let's take a look.

206
00:14:43,830 --> 00:14:47,040
I'll save the style sheet and
when we refresh.

207
00:14:47,040 --> 00:14:51,170
Great the navigation is
now laid out horizontally.

208
00:14:51,170 --> 00:14:56,960
So now I want the navigation to span
the full width of it's flex container.

209
00:14:56,960 --> 00:14:59,900
And I want all the links
to be evenly spaced out,

210
00:14:59,900 --> 00:15:03,700
instead of being all bunched up here
on the left side of the header.

211
00:15:03,700 --> 00:15:07,700
So, flex boxes justify lets you

212
00:15:07,700 --> 00:15:12,510
define how space should be used and
distributed in a flex container.

213
00:15:12,510 --> 00:15:16,170
So, back in my style sheet,
inside the navrule and

214
00:15:16,170 --> 00:15:21,040
the media query, I'm going to add
the justify content property.

215
00:15:21,040 --> 00:15:24,890
And I'm going to set
the value to space between,

216
00:15:27,320 --> 00:15:30,818
so when we save our style sheet and
take a look at it again.

217
00:15:30,818 --> 00:15:34,120
We can see how the value space between,

218
00:15:34,120 --> 00:15:37,690
evenly distributes
the navigation items in a row.

219
00:15:37,690 --> 00:15:40,760
So the first item is at
the start of the row, and

220
00:15:40,760 --> 00:15:44,070
the last item is at the end of the row.

221
00:15:44,070 --> 00:15:47,590
And any space in-between
is evenly distributed.

222
00:15:49,270 --> 00:15:52,900
See, this is a great feature for
creating responsive layouts.

223
00:15:52,900 --> 00:15:57,630
Because the navigation item adjust
the size of the view port automatically.

224
00:15:57,630 --> 00:15:58,130
Really neat!

225
00:15:59,900 --> 00:16:04,190
Next, I also want to add a justify
content property to my main header.

226
00:16:04,190 --> 00:16:08,380
So back on my style sheet,
I'll scroll up to the main header rule.

227
00:16:08,380 --> 00:16:14,040
Inside the media query, and
I'll add the property justify content.

228
00:16:14,040 --> 00:16:18,750
This time I'm going to set
the value to flex end.

229
00:16:18,750 --> 00:16:23,420
So when we save our style sheet and
go back to the browser, what the flex end

230
00:16:23,420 --> 00:16:30,520
property does is, it places main header
at the end or bottom of the column.

231
00:16:30,520 --> 00:16:32,410
That's 200 pixels tall.

232
00:16:32,410 --> 00:16:36,950
So now, we have more separation between
the logo and the top of the page.

233
00:16:37,980 --> 00:16:43,270
So, next, I'm going to go back to my style
sheet and create one more media query

234
00:16:43,270 --> 00:16:48,580
that will target my layout when the view
port or device is 10, 25 pixels, or wider.

235
00:16:48,580 --> 00:16:50,354
So, I'll say, @media.

236
00:16:52,508 --> 00:16:57,640
Min-width, 1025 pixels.

237
00:16:57,640 --> 00:17:02,680
So in this wide viewport range, I want to
take advantage of the extra horizontal

238
00:17:02,680 --> 00:17:07,860
space, and position both the logo and
navigation on the same line.

239
00:17:07,860 --> 00:17:13,480
Now currently, the main headers
flex direction is set to column,

240
00:17:13,480 --> 00:17:19,190
so that's why we're seeing the logo and
the navigation menu on separate lines.

241
00:17:19,190 --> 00:17:22,630
So, if I go back to my new media query,
and

242
00:17:22,630 --> 00:17:29,250
target main-header and
set its flex-direction to row.

243
00:17:29,250 --> 00:17:33,800
So, I'm going to add a flex-direction
property and set it to row.

244
00:17:33,800 --> 00:17:38,420
When we save and take a look at it again,
we can see how the logo and

245
00:17:38,420 --> 00:17:41,510
navigation are now
placed on the same line.

246
00:17:41,510 --> 00:17:42,610
Pretty neat.

247
00:17:42,610 --> 00:17:46,840
So now, I want to move the logo over
to the left side of the header, and

248
00:17:46,840 --> 00:17:50,290
I want the navigation menu
to be on the right side.

249
00:17:50,290 --> 00:17:53,540
Margins have a significant
effect on flex items.

250
00:17:53,540 --> 00:17:56,280
Particularly, the value auto.

251
00:17:56,280 --> 00:18:01,820
So a margin set to auto,
will absorb any extra space

252
00:18:01,820 --> 00:18:06,230
around a flex item, and push other
flex items into different positions.

253
00:18:06,230 --> 00:18:12,170
So let me show you, back in my style
sheet, inside my second media query,

254
00:18:12,170 --> 00:18:15,696
I'm going to target the class .site-logo.

255
00:18:17,702 --> 00:18:21,170
And I'm going to give it
a margin-right property.

256
00:18:21,170 --> 00:18:23,060
And, set the value to auto.

257
00:18:23,060 --> 00:18:25,820
So, when we take a look at it again,

258
00:18:25,820 --> 00:18:31,240
we can see how the logo is now flush
with the left margin of the container.

259
00:18:31,240 --> 00:18:35,770
And, the navigation menu is
perfectly placed on the right side.

260
00:18:35,770 --> 00:18:41,040
Now, since the logo's right margin is set
to auto, the browser automatically inserts

261
00:18:41,040 --> 00:18:46,710
any extra space between the logo and
the navigation, to the right of the logo.

262
00:18:46,710 --> 00:18:51,520
So this is a really cool feature of
Flexbox, and it makes it very easy to left

263
00:18:51,520 --> 00:18:56,850
justify one Flexbox item while
right justifying other Flex items.

264
00:18:56,850 --> 00:19:00,110
Next, let's adjust some of
the layout here, in the navigation.

265
00:19:00,110 --> 00:19:01,930
So, I'll go back to my style sheet and

266
00:19:01,930 --> 00:19:05,160
I want to remove the top
margin in the navigation.

267
00:19:05,160 --> 00:19:09,760
So, I'll target the class nav, and

268
00:19:09,760 --> 00:19:13,605
I'll do that by setting
the margin-top value to zero.

269
00:19:15,792 --> 00:19:18,128
So, that extra space is not necessary,

270
00:19:18,128 --> 00:19:23,620
since the logo is no longer positioned
above the nav, it's now on the same line.

271
00:19:23,620 --> 00:19:28,770
So next I want to give the navigation
list items here, a left and

272
00:19:28,770 --> 00:19:31,430
right margin, and
that will give them some separation, so

273
00:19:31,430 --> 00:19:36,690
right below this .nav rule,
I'm going to target Nav l i.

274
00:19:36,690 --> 00:19:40,490
And then I'm going to add a margin,
left property.

275
00:19:40,490 --> 00:19:43,220
And I'll set the value to 0.65em.

276
00:19:43,220 --> 00:19:48,430
And below that I'll add
a margin right property.

277
00:19:48,430 --> 00:19:51,020
The value will also be 0.65em.

278
00:19:51,020 --> 00:19:53,790
Finally, I also want to position

279
00:19:53,790 --> 00:19:56,360
the navigation in the vertical
center of the header.

280
00:19:56,360 --> 00:19:59,720
So I want it perfectly centered
vertically in the header.

281
00:19:59,720 --> 00:20:01,795
So, instead of using margins to do that,

282
00:20:01,795 --> 00:20:05,580
I'm once again I'm going to
use the align self property.

283
00:20:05,580 --> 00:20:09,470
So, in my nav room here,
I'm going to add the property

284
00:20:09,470 --> 00:20:14,830
align self and
I'm going to set the value to center.

285
00:20:14,830 --> 00:20:20,000
So, setting the value to center,
as we can see when we refresh the page,

286
00:20:20,000 --> 00:20:22,710
It positions the nav in
the vertical center of the header.

287
00:20:22,710 --> 00:20:27,090
All right, so it looks like we
are all done writing our CSS, so

288
00:20:27,090 --> 00:20:29,410
let us take a look at what we have done so
far.

289
00:20:29,410 --> 00:20:34,880
If I resize the browser, we can see
that on narrow viewport sizes and

290
00:20:34,880 --> 00:20:36,470
mobile devices, great.

291
00:20:36,470 --> 00:20:40,940
The logo and navigation are displayed
in one column, and then in the wider

292
00:20:40,940 --> 00:20:46,520
viewport range, the navigation scales
up to a wider horizontal layout.

293
00:20:46,520 --> 00:20:50,650
And in the widest range, the navigation
is positioned over to the right

294
00:20:50,650 --> 00:20:53,760
side of the page, so
now it's on the same line as the logo.

295
00:20:53,760 --> 00:20:54,260
Perfect!

296
00:20:56,221 --> 00:20:59,890
So, now it's time to test our
navigation on different devices.

297
00:20:59,890 --> 00:21:04,760
And we can do that using the Chrome
Developer Tools, so the Chrome Dev Tools

298
00:21:04,760 --> 00:21:10,170
has a device simulation feature that lets
us preview and test on different devices.

299
00:21:10,170 --> 00:21:14,898
So, let's go ahead and open up Dev Tools
by clicking the hamburger icon menu here.

300
00:21:14,898 --> 00:21:16,530
In the top-right corner.

301
00:21:16,530 --> 00:21:20,860
And then, we'll go over to More Tools and
we'll click Developer Tools.

302
00:21:21,950 --> 00:21:26,940
So, once the Chrome dev's tools panels
open, we can click the phone icon,

303
00:21:26,940 --> 00:21:29,680
here, next to the inspect icon.

304
00:21:29,680 --> 00:21:31,010
And, this brings up the simulator.

305
00:21:31,010 --> 00:21:33,590
All right, so, now,
we can test it on a few devices.

306
00:21:33,590 --> 00:21:37,770
So, up here in the device dropdown,

307
00:21:37,770 --> 00:21:43,620
let us first select iPad, and then as
you can see, that looks pretty good.

308
00:21:43,620 --> 00:21:50,000
Next we will select iPhone 6,
which looks great, and

309
00:21:50,000 --> 00:21:56,340
let us try a few more,
say Samsung Galaxy Note, that looks fine.

310
00:21:56,340 --> 00:21:58,460
And finally, let's try one more.

311
00:21:58,460 --> 00:22:00,300
So let's say Galaxy S 4.

312
00:22:01,400 --> 00:22:02,410
Which looks the same.

313
00:22:02,410 --> 00:22:03,470
It looks good.

314
00:22:03,470 --> 00:22:04,040
All right, great.

315
00:22:04,040 --> 00:22:07,320
So now,
we have a fully responsive navigation,

316
00:22:07,320 --> 00:22:12,910
that looks and works great on
any view port size or device.

317
00:22:12,910 --> 00:22:13,870
Nice work.

318
00:22:13,870 --> 00:22:17,060
So, for more information about Flexbox,
mobile-first layout,

319
00:22:17,060 --> 00:22:19,390
or anything else I've
covered in this workshop,

320
00:22:19,390 --> 00:22:22,510
be sure to check the teacher's notes for
additional resources.