1
00:00:00,610 --> 00:00:03,530
All right, so our basic typography is in
place.

2
00:00:03,530 --> 00:00:06,890
This will give us a foundation to build
off of as we arrange content

3
00:00:06,890 --> 00:00:08,330
through hierarchy.

4
00:00:08,330 --> 00:00:12,140
Our content needs some serious corrections
to its measure and space.

5
00:00:12,140 --> 00:00:15,920
But we'll deal with that as we go because
each section will be handled differently.

6
00:00:16,940 --> 00:00:19,490
The first section we want to look at is
our header.

7
00:00:19,490 --> 00:00:22,270
This is the area of HTML that's under the
header tag.

8
00:00:22,270 --> 00:00:25,840
So, we're looking at how to style out the
words, CSS Zen Garden, and

9
00:00:25,840 --> 00:00:27,910
the beauty of CSS design.

10
00:00:27,910 --> 00:00:31,930
From our sketch, I've concepted this
section to include some big type for

11
00:00:31,930 --> 00:00:35,150
a title, with a subtitle beneath it, at a
smaller size.

12
00:00:35,150 --> 00:00:38,980
I want the background to span all around
this section to the edges of the browser.

13
00:00:38,980 --> 00:00:40,250
So when you hit the page,

14
00:00:40,250 --> 00:00:42,560
you're not engaging a lot of different
things at once.

15
00:00:42,560 --> 00:00:44,580
You're only soaking this in.

16
00:00:44,580 --> 00:00:45,120
All right.

17
00:00:45,120 --> 00:00:47,460
So this is where we left off on our
current web page.

18
00:00:47,460 --> 00:00:51,820
I'm going to want to start styling out our
header through our CSS.

19
00:00:51,820 --> 00:00:56,340
First I want all our headings to have a
font color of green.

20
00:00:56,340 --> 00:00:58,340
So I head down here and add this end.

21
00:01:00,250 --> 00:01:01,050
And change this to color.

22
00:01:03,700 --> 00:01:04,700
We'll save and check that out.

23
00:01:05,980 --> 00:01:08,120
All right, it's a little intense in
places, so

24
00:01:08,120 --> 00:01:10,320
we're gonna change that around but it's
starting to look good.

25
00:01:10,320 --> 00:01:12,550
And down in our header,

26
00:01:12,550 --> 00:01:17,870
we're gonna now give it some space by now
adding some padding of 10 M and 4 percent.

27
00:01:19,380 --> 00:01:21,860
And then give it a text align of center.

28
00:01:21,860 --> 00:01:25,250
Let's check that out.

29
00:01:26,370 --> 00:01:29,990
Great.
So, now our text has ample space above and

30
00:01:29,990 --> 00:01:33,300
around it, and you can engage it as it's
own element on the page.

31
00:01:35,120 --> 00:01:36,700
Now I wanna start styling out our h1.

32
00:01:36,700 --> 00:01:40,020
So I want it to be a lot bigger and
bolder.

33
00:01:40,020 --> 00:01:46,100
To start I'll go to font size of 6.2m.

34
00:01:46,100 --> 00:01:49,020
And a font weight of 900.

35
00:01:49,020 --> 00:01:51,500
Let's see what that looks like.

36
00:01:53,140 --> 00:01:55,990
All right, it is definitely big and bold.

37
00:01:55,990 --> 00:01:58,520
I'm not a fan of the green color for it
here, so

38
00:01:58,520 --> 00:02:01,680
I'm actually gonna change it back to our
text color.

39
00:02:01,680 --> 00:02:02,450
So I'll grab that.

40
00:02:05,010 --> 00:02:06,520
And paste it into our h1.

41
00:02:06,520 --> 00:02:11,250
And I also felt like the margin on the
bottom could just be flat, so

42
00:02:11,250 --> 00:02:11,930
let's give it zero.

43
00:02:13,130 --> 00:02:13,720
Let me check that out now.

44
00:02:14,920 --> 00:02:16,940
Great.
So this is much nicer, and

45
00:02:16,940 --> 00:02:22,230
I like the spacing a lot better, where our
H2 is snug up underneath our H1 there.

46
00:02:22,230 --> 00:02:24,280
So, I want my H2 here,

47
00:02:24,280 --> 00:02:27,920
which is our tagline, to be a bit
different than what it is right now.

48
00:02:27,920 --> 00:02:31,450
I think it would look really nice if it
was the sans version of Allegrea,

49
00:02:31,450 --> 00:02:34,970
and all caps with some letter spacing and
so forth.

50
00:02:34,970 --> 00:02:35,860
So let's style that out.

51
00:02:36,890 --> 00:02:40,820
Over here I'm gonna grab our font family,
and paste it into our h2.

52
00:02:40,820 --> 00:02:44,950
And I don't need the small caps version,
so I'm gonna remove that.

53
00:02:45,980 --> 00:02:48,660
And then I felt like the font size was a
little big, so

54
00:02:48,660 --> 00:02:54,450
we'll set it at our next size down in our
scale, which is 1.777m.

55
00:02:54,450 --> 00:02:59,630
And it's also set the letter spacing to be
.3m, just to give it some breathing room.

56
00:02:59,630 --> 00:03:03,350
And lastly, let's set our text transform
to be uppercase.

57
00:03:05,520 --> 00:03:06,300
Let's see how that looks.

58
00:03:08,000 --> 00:03:09,200
So, that's looking good, but

59
00:03:09,200 --> 00:03:12,400
I feel like you could just use a font
style of normal instead of italic.

60
00:03:14,310 --> 00:03:14,940
Now, let's check it out.

61
00:03:16,010 --> 00:03:16,730
Great.

62
00:03:16,730 --> 00:03:17,870
So, we're almost there, but

63
00:03:17,870 --> 00:03:22,850
notice how the small caps in this
uppercase setting don't really jive well.

64
00:03:22,850 --> 00:03:24,048
So, let's go in and

65
00:03:24,048 --> 00:03:28,845
fix that by targeting the header abbr to
have the text transformed of uppercase.

66
00:03:28,845 --> 00:03:33,523
[BLANK_AUDIO]

67
00:03:33,523 --> 00:03:34,030
Great.

68
00:03:34,030 --> 00:03:35,450
So, that fixed that issue there.

69
00:03:36,990 --> 00:03:39,340
Now let's jump into our summary section.

70
00:03:39,340 --> 00:03:43,280
From our sketch, I've concepted it out to
be it's own little area.

71
00:03:43,280 --> 00:03:46,000
Centered so it feels tied to our header.

72
00:03:46,000 --> 00:03:50,500
But we can distinguish it thru changes in
background color, the size of the type,

73
00:03:50,500 --> 00:03:51,130
and the font style.

74
00:03:52,680 --> 00:03:55,130
So, I'm gonna head back into our CSS.

75
00:03:55,130 --> 00:03:59,789
And I'm gonna first copy these two colors,
as I want our summary background to be

76
00:03:59,789 --> 00:04:03,095
green, and our color to be white, so we'll
set that up.

77
00:04:03,095 --> 00:04:07,931
[BLANK_AUDIO]

78
00:04:07,931 --> 00:04:12,280
We also want it to have a text-align of
center.

79
00:04:12,280 --> 00:04:15,170
And this class is gonna need some space
around it, so let's give it

80
00:04:15,170 --> 00:04:19,290
some padding of 1.5 for the top and
bottom, and 6% for the left and right.

81
00:04:19,290 --> 00:04:20,880
Let's check that out.

82
00:04:22,730 --> 00:04:24,120
All right, it's getting there.

83
00:04:24,120 --> 00:04:27,090
Obviously our link color will need to
change a bit.

84
00:04:27,090 --> 00:04:31,430
And I actually wanna increase this font
size to accent that summary more.

85
00:04:31,430 --> 00:04:35,450
Let's head over to our CSS, and I'm
targeting our summary p element.

86
00:04:35,450 --> 00:04:39,065
And let's increase it to the next size in
our typographic scale, which is

87
00:04:39,065 --> 00:04:44,040
1.333m from http://www.typescale.com, and
let's check that out.

88
00:04:44,040 --> 00:04:47,140
That's much better, but notice here we
need to adjust our measure,

89
00:04:47,140 --> 00:04:49,870
as we don't want this to span the whole
width of the browser, and

90
00:04:49,870 --> 00:04:51,350
it just feels a little clumsy.

91
00:04:51,350 --> 00:04:57,240
So to fix that I'm gonna set a max width
of 44m.

92
00:04:57,240 --> 00:04:59,430
And give it a margin of zero auto so

93
00:04:59,430 --> 00:05:01,700
that content block is now in the middle of
the page.

94
00:05:02,760 --> 00:05:04,400
All right, that's getting there but

95
00:05:04,400 --> 00:05:08,170
our line height here feels a little too
spacious.

96
00:05:08,170 --> 00:05:11,300
So I'm gonna set that at 1.4 instead of
the 1.6 that it was at.

97
00:05:11,300 --> 00:05:14,970
And let's give this a font style of
italics, so

98
00:05:14,970 --> 00:05:16,970
that it feels a little different from our
text.

99
00:05:19,380 --> 00:05:22,060
All right.
So that's looking a whole lot better.

100
00:05:22,060 --> 00:05:24,310
But I still feel like we could do
something to the last line of

101
00:05:24,310 --> 00:05:25,080
this paragraph.

102
00:05:25,080 --> 00:05:27,830
And we definitely need to change the link
colors there.

103
00:05:27,830 --> 00:05:28,840
So let's head over to our CSS.

104
00:05:28,840 --> 00:05:32,272
And we're gonna target that paragraph by
doing summary p + p,

105
00:05:32,272 --> 00:05:35,788
because [SOUND] it's the second paragraph
in our summary class.

106
00:05:35,788 --> 00:05:39,770
So I'm gonna add some code real quick to
style it out and explain what it does.

107
00:05:39,770 --> 00:05:43,490
So what this code is doing is it's
removing any text indent that we had

108
00:05:43,490 --> 00:05:45,790
put on it so it'll correctly align to the
center.

109
00:05:45,790 --> 00:05:48,060
We're gonna give it a font size of normal,

110
00:05:48,060 --> 00:05:50,910
because it pairs well with the italic
going on there.

111
00:05:50,910 --> 00:05:55,440
And then I'm gonna decrease the font size
so this paragraph is less accented.

112
00:05:55,440 --> 00:06:01,400
Then we'll set the top margin to 0.2 em,
which will give it even spacing, and

113
00:06:01,400 --> 00:06:04,090
lastly, I've set its color to be dark
green.

114
00:06:04,090 --> 00:06:04,970
Let save and check it out.

115
00:06:06,230 --> 00:06:09,480
All right, I really like how this calls
out this portion in the summary to

116
00:06:09,480 --> 00:06:13,710
be really important, and then the second
portion to be a little less important, but

117
00:06:13,710 --> 00:06:16,080
we still need to fix these links here.

118
00:06:16,080 --> 00:06:19,880
I think they would look good as small caps
with a small border,

119
00:06:19,880 --> 00:06:21,960
with the same color as the text at first.

120
00:06:21,960 --> 00:06:24,810
But when they're hovered over, they'll
change to our sandy white.

121
00:06:24,810 --> 00:06:25,789
Let's go set that up.

122
00:06:25,789 --> 00:06:35,789
[BLANK_AUDIO]

123
00:06:59,686 --> 00:07:01,850
So I'll save and refresh the page.

124
00:07:01,850 --> 00:07:03,440
This is looking really nice.

125
00:07:03,440 --> 00:07:06,320
These links are able to be noticed through
their bottom border and

126
00:07:06,320 --> 00:07:07,880
hover state change.

127
00:07:07,880 --> 00:07:09,960
Our header as a whole has really come
together and

128
00:07:09,960 --> 00:07:15,080
taken shape, and it immerses the reader
immediately in the content and colors.

129
00:07:15,080 --> 00:07:18,130
We'll get into reponsively adjusting all
these later,

130
00:07:18,130 --> 00:07:21,760
because we first wanna set up our body
copy responsively.

131
00:07:21,760 --> 00:07:25,790
Changes to our body copy's font size will
affect all our headings, so

132
00:07:25,790 --> 00:07:27,340
it's smart to do that first, and

133
00:07:27,340 --> 00:07:31,170
then adjust from there as needed at the
different break point sizes.

134
00:07:31,170 --> 00:07:34,810
Next we'll get into building out our one
column and two column layouts.