Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
First 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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up