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
In this video, we’ll take a mobile-first approach to styling the header and navigation, followed by settings its breakpoints for various screen sizes.
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
Ready to start the fun part?
0:00
Let's get this portfolio looking better.
0:02
I'm going to take it one section at
a time with a mobile-first approach, and
0:05
for the sake of this workshop,
I'm going to also hit the changes for
0:09
the desktop view along the way.
0:12
Let's do this.
0:14
Looking at the font in the mobile mockup,
It appears that all of our text is in this
0:16
Young Serif font, except for those bodies
of text that we gave specific classes.
0:21
All of the text is centered as well.
0:27
So I'm going to add these styles
right into our root pseudo class here.
0:29
Okay, let's get the header started.
0:45
First, I want to initially hide
the closeIcon and both of our navigations.
0:48
I'd also like to give our images and
1:00
SVGs a width temporarily to keep
them under control while we work.
1:02
I'm giving the header a display of flex and
justifying the content to space-between to
1:20
push them apart horizontally.
1:25
I'm adding one rem of
padding on all sides,
1:27
and aligning the items to
center them vertically.
1:29
I'm setting the background color
to our primary variable and
1:34
the font color to our
header text variable.
1:37
Targeting our menu button,
1:49
I'm getting rid of the default
background and border,
1:51
giving it a fixed height and
width of 24 pixels, and
2:02
making the cursor a pointer
when hovered over.
2:08
Lastly, I'll adjust the fill to our header
text variable and apply a transition for
2:15
this because I think it'd be nice to
change the color when hovered over.
2:19
So I'll target the menu button
again when in the hover state and
2:30
change the fill to our secondary variable,
nice.
2:34
Let's bring back our mobile
navigation to get it styled.
2:39
Real quick, I'm going to create
a section for some base styles and
2:44
get rid of the list styles on list items
2:48
and the text decoration
on anchor elements.
2:56
I'll also have them inherit
the font color from their parent.
3:02
That's much better.
3:06
My plan for this is to have this
menu hidden and out of sight.
3:07
When the user clicks
on the hamburger icon,
3:11
a class named open will be added to it and
it will slide left, into visibility.
3:13
So I'll first give our header
a position of relative.
3:18
This way I can position this menu
absolutely, relative to that.
3:21
Now I'm checking the height of our
header in the browser's dev tools, so
3:26
I know how low to position it.
3:30
It looks like I've got 24 pixels of height
plus the 16 pixels of top padding and
3:41
16 pixels of bottom padding.
3:46
24 plus 32 is 56.
3:48
So that's what I'll set the top to.
3:51
I need to give the mobile-nav
a position of absolute.
4:01
Then I'll set its top value.
4:04
Let's give it the background color so
we can see it better.
4:08
This needs to take up 100% of the width,
and it looks like I need to set
4:15
its left property to 0 as it's
got some space on the left side.
4:20
I'll bump the font size up to 2.5rem and
4:24
apply some top padding to move
these links down a bit as well.
4:27
Next, I'm targeting
the nested list items and
4:38
giving them the same amount of bottom
margin as the padding I just did.
4:41
I'd like for
these links to change font color on hover,
4:46
like our button above does as well.
4:48
So I'm targeting the nested
anchors on hover and
4:50
changing the font color
to our secondary color.
4:53
Then I need to target them normally and
add the transition This is looking great.
4:56
Finally, I want this to sit
just off screen to the right.
5:06
So I'm going to adjust its transform and
translate X to 100%.
5:10
I'll add a transition as well, so
we get a nice slide in and out.
5:20
As I said earlier, I'd like to add a class
named open to this menu with JavaScript to
5:30
trigger its movement.
5:34
So I'm going to target the mobile-nav
with the class of open and
5:36
simply set its translateX back to 0%.
5:40
For desktop view,
5:47
I'll start by adding our media query
with a min-width of 1024 pixels.
5:48
I'll set the desktop-nav's display
to block in our menu button, and
6:01
mobile-nav display to none.
6:05
I see that the header is not
taking up 100% width anymore, and
6:14
it's horizontal padding increased.
6:18
So I'll target that and give it 1
rem of inline margin for now, and
6:20
change the inline padding to 3 rem.
6:24
Now I'm setting the nested unordered list
display to flex to lay them in a row.
6:38
Looks like I made a mistake.
6:45
Wow, I completely forgot to add unordered
list tags and both of my navigations.
6:48
Let's get those in there.
6:53
That's better, now I'll set the gap
between them to 3rem as well.
7:07
Awesome, that should do it for
the header and navigation.
7:16
We'll get that mobile menu working later.
7:19
In the next video,
we'll tackle the hero and about sections.
7:21
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