Preview
Video Player
00:00
00:00
Header and Summary
7:35First impressions are of utmost importance. Let’s make a good one as we build out the area people will see first when they arrive on the site.
All right, so our basic typography is in
place.
0:00
This will give us a foundation to build
off of as we arrange content
0:03
through hierarchy.
0:06
Our content needs some serious corrections
to its measure and space.
0:08
But we'll deal with that as we go because
each section will be handled differently.
0:12
The first section we want to look at is
our header.
0:16
This is the area of HTML that's under the
header tag.
0:19
So, we're looking at how to style out the
words, CSS Zen Garden, and
0:22
the beauty of CSS design.
0:25
From our sketch, I've concepted this
section to include some big type for
0:27
a title, with a subtitle beneath it, at a
smaller size.
0:31
I want the background to span all around
this section to the edges of the browser.
0:35
So when you hit the page,
0:38
you're not engaging a lot of different
things at once.
0:40
You're only soaking this in.
0:42
All right.
0:44
So this is where we left off on our
current web page.
0:45
I'm going to want to start styling out our
header through our CSS.
0:47
First I want all our headings to have a
font color of green.
0:51
So I head down here and add this end.
0:56
And change this to color.
1:00
We'll save and check that out.
1:03
All right, it's a little intense in
places, so
1:05
we're gonna change that around but it's
starting to look good.
1:08
And down in our header,
1:10
we're gonna now give it some space by now
adding some padding of 10 M and 4 percent.
1:12
And then give it a text align of center.
1:19
Let's check that out.
1:21
Great.
So, now our text has ample space above and
1:26
around it, and you can engage it as it's
own element on the page.
1:29
Now I wanna start styling out our h1.
1:35
So I want it to be a lot bigger and
bolder.
1:36
To start I'll go to font size of 6.2m.
1:40
And a font weight of 900.
1:46
Let's see what that looks like.
1:49
All right, it is definitely big and bold.
1:53
I'm not a fan of the green color for it
here, so
1:55
I'm actually gonna change it back to our
text color.
1:58
So I'll grab that.
2:01
And paste it into our h1.
2:05
And I also felt like the margin on the
bottom could just be flat, so
2:06
let's give it zero.
2:11
Let me check that out now.
2:13
Great.
So this is much nicer, and
2:14
I like the spacing a lot better, where our
H2 is snug up underneath our H1 there.
2:16
So, I want my H2 here,
2:22
which is our tagline, to be a bit
different than what it is right now.
2:24
I think it would look really nice if it
was the sans version of Allegrea,
2:27
and all caps with some letter spacing and
so forth.
2:31
So let's style that out.
2:34
Over here I'm gonna grab our font family,
and paste it into our h2.
2:36
And I don't need the small caps version,
so I'm gonna remove that.
2:40
And then I felt like the font size was a
little big, so
2:45
we'll set it at our next size down in our
scale, which is 1.777m.
2:48
And it's also set the letter spacing to be
.3m, just to give it some breathing room.
2:54
And lastly, let's set our text transform
to be uppercase.
2:59
Let's see how that looks.
3:05
So, that's looking good, but
3:08
I feel like you could just use a font
style of normal instead of italic.
3:09
Now, let's check it out.
3:14
Great.
3:16
So, we're almost there, but
3:16
notice how the small caps in this
uppercase setting don't really jive well.
3:17
So, let's go in and
3:22
fix that by targeting the header abbr to
have the text transformed of uppercase.
3:24
[BLANK_AUDIO]
3:28
Great.
3:33
So, that fixed that issue there.
3:34
Now let's jump into our summary section.
3:36
From our sketch, I've concepted it out to
be it's own little area.
3:39
Centered so it feels tied to our header.
3:43
But we can distinguish it thru changes in
background color, the size of the type,
3:46
and the font style.
3:50
So, I'm gonna head back into our CSS.
3:52
And I'm gonna first copy these two colors,
as I want our summary background to be
3:55
green, and our color to be white, so we'll
set that up.
3:59
[BLANK_AUDIO]
4:03
We also want it to have a text-align of
center.
4:07
And this class is gonna need some space
around it, so let's give it
4:12
some padding of 1.5 for the top and
bottom, and 6% for the left and right.
4:15
Let's check that out.
4:19
All right, it's getting there.
4:22
Obviously our link color will need to
change a bit.
4:24
And I actually wanna increase this font
size to accent that summary more.
4:27
Let's head over to our CSS, and I'm
targeting our summary p element.
4:31
And let's increase it to the next size in
our typographic scale, which is
4:35
1.333m from http://www.typescale.com, and
let's check that out.
4:39
That's much better, but notice here we
need to adjust our measure,
4:44
as we don't want this to span the whole
width of the browser, and
4:47
it just feels a little clumsy.
4:49
So to fix that I'm gonna set a max width
of 44m.
4:51
And give it a margin of zero auto so
4:57
that content block is now in the middle of
the page.
4:59
All right, that's getting there but
5:02
our line height here feels a little too
spacious.
5:04
So I'm gonna set that at 1.4 instead of
the 1.6 that it was at.
5:08
And let's give this a font style of
italics, so
5:11
that it feels a little different from our
text.
5:14
All right.
So that's looking a whole lot better.
5:19
But I still feel like we could do
something to the last line of
5:22
this paragraph.
5:24
And we definitely need to change the link
colors there.
5:25
So let's head over to our CSS.
5:27
And we're gonna target that paragraph by
doing summary p + p,
5:28
because [SOUND] it's the second paragraph
in our summary class.
5:32
So I'm gonna add some code real quick to
style it out and explain what it does.
5:35
So what this code is doing is it's
removing any text indent that we had
5:39
put on it so it'll correctly align to the
center.
5:43
We're gonna give it a font size of normal,
5:45
because it pairs well with the italic
going on there.
5:48
And then I'm gonna decrease the font size
so this paragraph is less accented.
5:50
Then we'll set the top margin to 0.2 em,
which will give it even spacing, and
5:55
lastly, I've set its color to be dark
green.
6:01
Let save and check it out.
6:04
All right, I really like how this calls
out this portion in the summary to
6:06
be really important, and then the second
portion to be a little less important, but
6:09
we still need to fix these links here.
6:13
I think they would look good as small caps
with a small border,
6:16
with the same color as the text at first.
6:19
But when they're hovered over, they'll
change to our sandy white.
6:21
Let's go set that up.
6:24
[BLANK_AUDIO]
6:25
So I'll save and refresh the page.
6:59
This is looking really nice.
7:01
These links are able to be noticed through
their bottom border and
7:03
hover state change.
7:06
Our header as a whole has really come
together and
7:07
taken shape, and it immerses the reader
immediately in the content and colors.
7:09
We'll get into reponsively adjusting all
these later,
7:15
because we first wanna set up our body
copy responsively.
7:18
Changes to our body copy's font size will
affect all our headings, so
7:21
it's smart to do that first, and
7:25
then adjust from there as needed at the
different break point sizes.
7:27
Next we'll get into building out our one
column and two column layouts.
7:31