1
00:00:00,600 --> 00:00:02,020
Guess what guys?

2
00:00:02,020 --> 00:00:03,910
You are in the home stretch.

3
00:00:03,910 --> 00:00:06,710
Are page has really come together, and
we've got our media queries set for

4
00:00:06,710 --> 00:00:08,180
smaller sizes.

5
00:00:08,180 --> 00:00:10,880
So now, let's look at how to polish and
finesse our design.

6
00:00:10,880 --> 00:00:14,140
Some of the things I have in mind are
styling our content at

7
00:00:14,140 --> 00:00:17,060
the bottom to be a drop down nav of the
top.

8
00:00:17,060 --> 00:00:20,750
Arranging our benefits section as an aside
to our requirements section.

9
00:00:20,750 --> 00:00:23,110
And adding some nice transitions and
animations.

10
00:00:24,230 --> 00:00:27,600
First, let me explain the extra credit
from the last video and

11
00:00:27,600 --> 00:00:33,170
how we achieved this drawer effect for our
aside content at larger screen sizes.

12
00:00:33,170 --> 00:00:37,055
We set a break point of 64.125em, which is

13
00:00:37,055 --> 00:00:43,110
just slightly larger than our 1024 pixel
or 64em break point.

14
00:00:43,110 --> 00:00:46,910
The reason behind this is we'll be
utilizing a CSS hover effect

15
00:00:46,910 --> 00:00:49,030
that won't work on touch screens.

16
00:00:49,030 --> 00:00:51,930
And most touch screens are under this
pixel break point.

17
00:00:51,930 --> 00:00:56,910
Since we don't have access to the HTML or
JavaScript to create on click event,

18
00:00:56,910 --> 00:01:01,180
we'll utilize this media query to show
this draw effect for our desktops.

19
00:01:01,180 --> 00:01:02,770
It's not a perfect solution.

20
00:01:02,770 --> 00:01:05,560
But's it's our next best option since we
don't have access to

21
00:01:05,560 --> 00:01:08,230
other tools to create a bullet proof one.

22
00:01:08,230 --> 00:01:11,590
So with our min width at 64.125em.

23
00:01:11,590 --> 00:01:15,950
I've set our aside to have a position of
absolute.

24
00:01:15,950 --> 00:01:17,170
A top of -26.5.

25
00:01:17,170 --> 00:01:21,370
So the majority of it's hidden above our
header section.

26
00:01:21,370 --> 00:01:24,380
And a transition of all 0.4 seconds and

27
00:01:24,380 --> 00:01:27,600
ease to create that nice sliding out
effect.

28
00:01:27,600 --> 00:01:30,588
Next, I've set the hover state to be a top
of -1em,

29
00:01:30,588 --> 00:01:34,340
which will be where it slides to once it's
hovered over.

30
00:01:34,340 --> 00:01:37,570
Then, I've added a symbol button-like plus
symbol with

31
00:01:37,570 --> 00:01:43,180
the pseudo selector after on our aside and
set its content to be a plus symbol.

32
00:01:43,180 --> 00:01:47,450
We've also positioned it to be absolute
with the text aligned off center.

33
00:01:47,450 --> 00:01:49,460
It's background same as our aside.

34
00:01:49,460 --> 00:01:52,210
It's color is our sandy white tone.

35
00:01:52,210 --> 00:01:54,090
It's font size is 20 pixels.

36
00:01:54,090 --> 00:01:56,765
And it's okay to utilize a fixed font size
and

37
00:01:56,765 --> 00:01:59,500
width here, as I don't want these elements
to change.

38
00:01:59,500 --> 00:02:03,816
And they're so small that it won't make a
difference on smaller screen sizes.

39
00:02:03,816 --> 00:02:06,270
Next, the width, height and

40
00:02:06,270 --> 00:02:10,710
border radius are all 30 pixels, which
will make this element a circle.

41
00:02:10,710 --> 00:02:15,010
I want to position it in the center with
the dark navy meets the sandy white.

42
00:02:15,010 --> 00:02:18,010
So I gave it a bottom setting of -.65eM.

43
00:02:18,010 --> 00:02:19,925
A left of 50%.

44
00:02:19,925 --> 00:02:25,480
And a margin left of -15 pixels which is
half of our 30 pixel width.

45
00:02:25,480 --> 00:02:28,020
Let's check it out just once more to see
how it looks.

46
00:02:28,020 --> 00:02:32,710
The drawer and it's function is noticeable
through the use of our plus symbol here.

47
00:02:32,710 --> 00:02:36,200
And it's sliding transition effect is a
nice touch.

48
00:02:36,200 --> 00:02:39,910
Notice how it disappears under the 1024
pixel mark, and

49
00:02:39,910 --> 00:02:44,100
moves now back to the bottom of the page.

50
00:02:44,100 --> 00:02:47,070
Now let's get in to styling out our
benefit section.

51
00:02:47,070 --> 00:02:50,980
I want this content here to work as a
subtle sidebar next to

52
00:02:50,980 --> 00:02:55,030
our requirement section once there's
enough room to fit it in.

53
00:02:55,030 --> 00:02:59,630
I've done some testing and found that at
752 pixels or

54
00:02:59,630 --> 00:03:03,500
our 47em media query, is a good place to
start.

55
00:03:03,500 --> 00:03:08,200
Anything below that would be too tight to
try and fit it in as a sidebar.

56
00:03:08,200 --> 00:03:12,710
This is also nice, because the size falls
right below the iPad screen size, so

57
00:03:12,710 --> 00:03:16,680
people reading this on an iPad will still
get the sidebar layout.

58
00:03:16,680 --> 00:03:19,910
To do this, I'll set my benefits class to
have a position of

59
00:03:19,910 --> 00:03:25,060
absolute, a background of none, a float to
left.

60
00:03:27,050 --> 00:03:30,130
This will allow us to position it within
the requirement section.

61
00:03:31,890 --> 00:03:36,249
I found that I like where it sits with a
max width of 7.5 rem.

62
00:03:38,670 --> 00:03:39,880
I text the line overwrite.

63
00:03:43,800 --> 00:03:50,330
And a margin top of 12em.

64
00:03:50,330 --> 00:03:55,576
To position it to the left of the content,
I've given it a left of 50% and

65
00:03:55,576 --> 00:03:57,925
a margin left of -25.5 rim.

66
00:03:57,925 --> 00:04:00,547
[BLANK_AUDIO]

67
00:04:00,547 --> 00:04:03,269
This technique aligns the piece in the
middle of the page and

68
00:04:03,269 --> 00:04:06,620
then moves it back to the left through a
negative left margin.

69
00:04:06,620 --> 00:04:09,390
This helps line up the content near the
left margin of our

70
00:04:09,390 --> 00:04:11,830
main content block for requirements.

71
00:04:11,830 --> 00:04:13,460
Let's see what that looks like now.

72
00:04:13,460 --> 00:04:15,010
I'll save and refresh.

73
00:04:17,010 --> 00:04:17,750
All right.

74
00:04:17,750 --> 00:04:18,720
That's a good start.

75
00:04:18,720 --> 00:04:22,610
But let's continue to hone it in by
decreasing it's font size and

76
00:04:22,610 --> 00:04:24,330
styling out our content a bit more.

77
00:04:26,250 --> 00:04:30,540
For our benefits H3 here, I want a font
size of 1em, so

78
00:04:30,540 --> 00:04:33,330
it's gonna be a lot smaller, and a margin
of zero.

79
00:04:35,310 --> 00:04:38,940
I also want this to be small caps as it
will create hierarchy to

80
00:04:38,940 --> 00:04:39,960
the content below it.

81
00:04:39,960 --> 00:04:41,296
So I'll copy that small caps code.

82
00:04:41,296 --> 00:04:47,656
[BLANK_AUDIO]

83
00:04:47,656 --> 00:04:52,760
And I'll set it's font style to be normal
since our base H3 is Italic.

84
00:04:52,760 --> 00:04:56,110
Now for our paragraph copy and our
benefits class,

85
00:04:56,110 --> 00:05:00,650
I'll set it's font size to be 0.75em, the
next size down in our scale.

86
00:05:00,650 --> 00:05:02,280
With a line height of 1.4,

87
00:05:02,280 --> 00:05:05,400
so it's a bit tighter, because our measure
is a little tight here.

88
00:05:07,030 --> 00:05:08,350
Let's save and see what that looks like.

89
00:05:10,130 --> 00:05:10,770
Great.

90
00:05:10,770 --> 00:05:13,820
Our benefits has been nicely arranged to
the right side of

91
00:05:13,820 --> 00:05:15,570
our requirements section.

92
00:05:15,570 --> 00:05:18,610
This will need some tweaking as the
browser expands because the font

93
00:05:18,610 --> 00:05:20,800
sizes change in our media queries.

94
00:05:20,800 --> 00:05:21,560
So let's fix it up.

95
00:05:23,340 --> 00:05:27,520
As we increase our browser size, we notice
our font change here.

96
00:05:27,520 --> 00:05:30,680
Our measure for our benefit section is now
a little bit tight and

97
00:05:30,680 --> 00:05:33,540
a little bit too close to the edge of our
requirements.

98
00:05:33,540 --> 00:05:34,430
So let's fix that up.

99
00:05:36,660 --> 00:05:41,190
Our min width media query will correspond
to our max width one.

100
00:05:41,190 --> 00:05:43,070
So we have this one set up at 54em.

101
00:05:43,070 --> 00:05:48,750
I'll change our benefits class to have a
slightly larger measure of 8 rem and

102
00:05:48,750 --> 00:05:51,720
give it a margin top of 12.5em.

103
00:05:51,720 --> 00:05:54,130
And in margin left of -28 rem,

104
00:05:54,130 --> 00:05:57,130
which will position it well within our
requirements class again.

105
00:05:57,130 --> 00:05:58,180
Let's check out what that looks like.

106
00:05:59,350 --> 00:05:59,850
Good deal.

107
00:05:59,850 --> 00:06:02,226
It's starting to work well for medium
sizes here and

108
00:06:02,226 --> 00:06:04,337
feels positioned well within the
container.

109
00:06:04,337 --> 00:06:06,516
[BLANK_AUDIO]

110
00:06:06,516 --> 00:06:10,146
With a font size increase at 64em our
benefits class could use

111
00:06:10,146 --> 00:06:11,810
some more changes.

112
00:06:11,810 --> 00:06:14,810
So I'll go in and adjust our max width,
our margin top, and

113
00:06:14,810 --> 00:06:18,120
our margin left here to align it well
within the container again.

114
00:06:18,120 --> 00:06:28,120
[BLANK_AUDIO]

115
00:06:32,863 --> 00:06:34,640
Let's refresh and check that out.

116
00:06:34,640 --> 00:06:35,160
Nice.

117
00:06:35,160 --> 00:06:39,030
Our benefits are now looking good for our
mid to larger-sized screens.

118
00:06:39,030 --> 00:06:41,510
We're getting close, but we're not done
yet.

119
00:06:41,510 --> 00:06:46,100
I wanna make two more media queries for
large to extra large screen sizes.

120
00:06:46,100 --> 00:06:49,430
People usually sit a little further back
from large displays.

121
00:06:49,430 --> 00:06:52,700
So it's nice to have a font size increase
for comfortable reading.

122
00:06:52,700 --> 00:06:56,270
We're not going to be able to view larger
browser sizes here,

123
00:06:56,270 --> 00:07:00,730
because the max width of of this video
screencast is 1280 pixels.

124
00:07:00,730 --> 00:07:03,220
So I'll just talk through what our code is
doing here.

125
00:07:05,290 --> 00:07:07,050
If you have a larger screen size,

126
00:07:07,050 --> 00:07:11,580
then feel free to build out this code in
your own workspace and test it out to see.

127
00:07:11,580 --> 00:07:15,623
I've created a min width media query at
94em or

128
00:07:15,623 --> 00:07:22,380
1472 pixels and upped our body font size
to 1.375 or 22 pixels.

129
00:07:22,380 --> 00:07:25,400
Most of our typography still held up well
here.

130
00:07:25,400 --> 00:07:28,970
But we needed to adjust a few things, like
the measure of our summary and

131
00:07:28,970 --> 00:07:30,380
benefits classes.

132
00:07:30,380 --> 00:07:35,650
And I've adjusted the width of our
explanation and participation H3s and Ps,

133
00:07:35,650 --> 00:07:39,750
so their content measure doesn't go
overboard for those two columns.

134
00:07:39,750 --> 00:07:44,780
I also did one last media query at 124em
or 1920 pixels.

135
00:07:44,780 --> 00:07:50,160
I've increased our body font size once
more to 1.5em or 24 pixels.

136
00:07:50,160 --> 00:07:55,180
This new size meant we needed to adjust
the measure on our summary class, all our

137
00:07:55,180 --> 00:08:00,150
columns and we needed to slightly change
the margin left of our benefit section.

138
00:08:00,150 --> 00:08:03,790
Again, if you have a large screen, be sure
to resize your browser and

139
00:08:03,790 --> 00:08:06,730
check out these changes and how they
actually look on the web page.

140
00:08:07,760 --> 00:08:12,360
Now, let's add a few final touches to the
design to really finesse it.

141
00:08:12,360 --> 00:08:15,420
So first, I want all my links to have a
smooth transition effect.

142
00:08:17,400 --> 00:08:22,240
So, I'll go up here to my a link tag and
add a transition of all 0.4 s and es.

143
00:08:22,240 --> 00:08:27,270
Let's save and check out the difference.

144
00:08:27,270 --> 00:08:30,771
[BLANK_AUDIO]

145
00:08:30,771 --> 00:08:32,460
So I'll refresh our page.

146
00:08:32,460 --> 00:08:36,810
And up here in our links, we see we have
them slowly transitioning into their

147
00:08:36,810 --> 00:08:38,740
color instead of just jumping to that
color.

148
00:08:39,750 --> 00:08:42,600
It's funny how something so simple can add
so much to a design.

149
00:08:43,890 --> 00:08:47,170
I'll also wanna enable kerning and
ligatures on my body through

150
00:08:47,170 --> 00:08:50,310
the font features settings with the
necessary prefixes.

151
00:08:50,310 --> 00:08:51,830
So I'll write out that property and

152
00:08:51,830 --> 00:08:55,310
paste in these other prefixes for browser
support here.

153
00:08:55,310 --> 00:08:58,980
This code is what we went over in our
lesson on advanced typography.

154
00:08:58,980 --> 00:09:03,890
Lastly, I want my header and top drawer to
fade in as someone lands on the page.

155
00:09:03,890 --> 00:09:08,230
We'll use the CSS animation property along
with the necessary prefixes for

156
00:09:08,230 --> 00:09:09,980
browser support.

157
00:09:09,980 --> 00:09:13,620
Since this isn't so much typography, I'm
just gonna paste this in at the bottom and

158
00:09:13,620 --> 00:09:14,720
explain it to you guys.

159
00:09:17,720 --> 00:09:22,090
Here's our key frames for our animation,
and they're going to be fading in with,

160
00:09:22,090 --> 00:09:26,420
first with an opacity zero and then
landing on one for that fade-in effect.

161
00:09:26,420 --> 00:09:29,752
This other code down here includes the
necessary browser prefixes.

162
00:09:29,752 --> 00:09:33,343
[BLANK_AUDIO]

163
00:09:33,343 --> 00:09:37,106
So I'll add in an animation of fade in two
seconds to our aside for

164
00:09:37,106 --> 00:09:39,870
that media query where it's at the top.

165
00:09:39,870 --> 00:09:41,991
And I'm gonna copy that and add that to
our header.

166
00:09:41,991 --> 00:09:51,991
[BLANK_AUDIO]

167
00:09:53,038 --> 00:09:56,574
[SOUND] Let's save and check that out.

168
00:09:56,574 --> 00:09:58,600
yeah, that's nice.

169
00:09:58,600 --> 00:10:00,460
Just in case you missed it, I'll do that
one more time.

170
00:10:02,370 --> 00:10:03,650
That's the stuff.

171
00:10:03,650 --> 00:10:04,440
Great work.

172
00:10:04,440 --> 00:10:08,650
Our design is now complete, polished, and
fully responsive.

173
00:10:08,650 --> 00:10:09,570
No matter the case,

174
00:10:09,570 --> 00:10:13,700
be sure to test your typography on
multiple browsers and devices.

175
00:10:13,700 --> 00:10:18,147
In summary, we analyzed the content, chose
a typeface pair to work with,

176
00:10:18,147 --> 00:10:21,325
put together a color palette, set up our
web fonts and

177
00:10:21,325 --> 00:10:24,644
typographic scale, laid out type with good
measure and

178
00:10:24,644 --> 00:10:29,828
rhythm, created typographic hierarchy in
the design and polished it responsively.

179
00:10:29,828 --> 00:10:32,462
[BLANK_AUDIO]

180
00:10:32,462 --> 00:10:35,280
We've covered a lot of ground over this
project.

181
00:10:35,280 --> 00:10:36,400
So be sure to download and

182
00:10:36,400 --> 00:10:40,330
look into the final CSS for a better
understanding if needed.

183
00:10:40,330 --> 00:10:44,090
Also, for extra credit, try creating your
own Zen Garden and submitting the own

184
00:10:44,090 --> 00:10:47,810
design, as this is a great way to
participate in the web community.

185
00:10:47,810 --> 00:10:51,380
I hope you guys leave this course with a
better understanding and appreciation for

186
00:10:51,380 --> 00:10:54,640
web typography, and know how to execute it
well.

187
00:10:54,640 --> 00:10:56,690
Go forth creating websites with nice type.