Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create a Portfolio Using HTML and CSS!
You have completed Create a Portfolio Using HTML and CSS!
Preview
Let’s begin styling the primary sections of the page, maintaining our mobile-first approach.
Resources
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
Welcome back.
0:00
Let's get this hero
section looking better.
0:01
First, let's readjust our image.
0:03
I'm removing that temporary
size I gave it up top,
0:05
then I'm just going to give
it a width of 200 pixels.
0:09
That actually looks pretty good.
0:21
I'm immediately noticing that it looks
like the main content has a bit of
0:23
space on the outside and
the same amount of space on the inside.
0:27
So I'm going to come up to my base
styles and take care of this real fast.
0:30
I'll target the main element and give it
some horizontal margin with margin-inline.
0:35
It looks like I need to apply
the background-color to the body so
0:40
we can see if this worked.
0:43
Okay, now we need to set
the main's background-color.
0:49
That's better.
0:59
It also appears there is the same
amount of padding on the very top and
1:00
very bottom of the main element.
1:04
So let's give it 3 rem on the top and
bottom and 1 rem on the sides.
1:06
Great, let's get back to the hero.
1:15
Let's style this background div a bit so
that we can see it.
1:18
I am giving it a width and height of 200
pixels since that seems pretty close to
1:30
what we need, and I'll give it
a background-color of our secondary color.
1:34
It looks like we need
to center this thing.
1:47
So I'll target the parent container and
give it a display of flex, and
1:50
justify the content to center.
1:54
Okay, I need the image to be placed on top
of this square, so I'll give the square
2:01
a position of relative and
the image a position of absolute.
2:06
Perfect, I'm going to give the image a
background-color so it's easier to see its
2:18
borders, but you won't have to do
this if you're using a real image.
2:22
All right, now we need to rotate that
background a bit, I'll try 15 degrees.
2:26
That seems like a bit much, let's try 10.
2:36
I think that's it, I'll apply some bottom
margin to the container and move on.
2:39
As a side note, I generally try to
add margin to just the bottom of
2:49
elements whenever possible to
avoid the risk of margin collapse.
2:53
I'll leave a very helpful link in the
teacher's notes that explains it very well
2:57
if you're unfamiliar.
3:02
It looks like our h1 and
all of our h2s are the same color and
3:03
have the same amount of space underneath,
so I'm going to address that in one rule.
3:06
Let's suggest the h1 font size.
3:29
3 rem looks good and
I need to adjust the line height as well.
3:37
By default, our heading elements
are given a font weight of bold and
3:43
it doesn't look like they're
bold in our mockups.
3:47
So I'll target all of our headings and
make sure they're at 400 weight.
3:49
Much better, I'll target the paragraph
elements in the parent container and
3:59
give them their font color.
4:04
I'll boost the font size a bit as well.
4:06
1.2 rem looks good to me.
4:20
Now I need to target the second one
though, and make its font smaller.
4:23
I'll use the last of type pseudo-class.
4:27
Awesome, now let's style this
link to look like a button.
4:39
I'm going to create a section for utility
classes that we're using repeatedly.
4:43
I'll start with our background color
to see what we're working with.
4:52
We definitely need some padding
to push this color out a bit.
5:02
0.5 rem vertically and 1 rem horizontally
gives it that nice rectangular shape.
5:09
It looks like I need to add some bottom
margin to that last paragraph above
5:15
the button.
5:20
There we go.
5:20
Now, some border radius, font color and
the box shadow on the bottom.
5:22
Let's add a hover transition on
the background-color while we're here.
5:48
I'll just use the shadow-color.
5:51
It looks as though all of our sections
have the same amount of spacing in
6:08
between them and they all have a button
at the bottom, except for the last one.
6:11
I'll add this into the base
styles real quick.
6:15
Since our buttons are actually
styled anchor tags,
6:18
the margin of nearby elements are going
to ignore the background-color.
6:20
To make up for
this bottom 0.5 rem on the button,
6:24
I'll make the section's
bottom margin 3.5 rem.
6:27
Cool, moving on to the About section.
6:37
Let's get these little
green squares sorted out.
6:43
I'll give it our primary background-color
and a width and height to see it.
6:48
10 pixels looks good.
7:03
I'm going to move my rotate style
from the image background and
7:05
join these together in the dry section.
7:08
I'm also going to give all of
our sections a display of flex,
7:30
flex direction of column and align
the items to the center horizontally.
7:34
Now, we just need 3 rem of bottom margin
on our little squares, and we're set.
7:51
The h2s are already styled, so
let's style our body text-utility class.
8:03
Let's grab our remaining font-family
up top and place it here.
8:08
The font-size seems a bit smaller and
we need some line height as well.
8:22
Still seems good.
8:31
Now let's apply our font-color and
move back down the page.
8:32
Let's select our containers paragraph
elements and apply some bottom margin
8:42
We'll also need to select the last one and
make up for that button difference.
8:58
We can actually join this with the
hero-container's last paragraph in our Dry
9:06
section.
9:10
Which is a good thing, because it looks
like I didn't add the extra margin in
9:11
the hero-container paragraph
like I intended to.
9:14
All right,
let's check our desktop mock up.
9:28
It looks like our mains horizontal
padding increased a bit.
9:30
I'll include this with
our header selector.
9:34
Now we need to change the hero layout.
9:43
Since the image is on top
of the text in the HTML,
9:46
we'll need to change its flex
direction to row-reverse.
9:49
Let's also justify the content
to have space between.
9:58
Great, now, let's just bring
the text-align back to left
10:08
I'm going to address
changing our font-sizes and
10:17
general spacing in a later video
as it will take some time.
10:20
It looks fine currently, because my
browser is zoomed in considerably for
10:24
the sake of filming these videos.
10:28
But at 100%, things are looking small and
hard to read.
10:30
All right,
that wraps up these two sections.
10:34
I'll see you in the next video.
10:37
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