"Build a Weather App" was retired on May 31, 2020. You are now viewing the recommended replacement.
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