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 wrap up the CSS by styling the remaining sections of the page.
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 going on the project section.
0:00
So for these project images,
0:02
I'm just using a div that I will
apply a background color to.
0:04
If you're using your own images,
things may differ a bit here for you.
0:08
So please keep that in mind.
0:12
Images can be of all shapes and sizes,
so use what works best for you.
0:14
I'm going to target the image's
container and apply a width of 100% and
0:19
a height of auto.
0:23
I'm using auto because now I'm going
to target the image itself and
0:34
apply an aspect ratio of 16/9 and
our background color.
0:38
I've put a link in the teacher's notes
if you're unfamiliar with aspect ratio.
0:42
Finally, let's give our image
container a bit of bottom margin.
0:49
I'm gonna go up to the base styles and
bring our h3's font-size down to 1rem,
0:56
change the color, and
add the bottom margin as well.
1:00
All right,
let's target our span elements here.
1:23
I'll start by giving them
the primary background color and
1:25
changing the font color and size.
1:29
Great, now I'll apply some padding and
border radius to shape them up.
1:48
Lastly, I'll apply the box shadow.
1:59
Now, we just need some bottom
margin on the container.
2:06
Looking good.
2:16
For the description text, I'm going
to slightly lower the font-size and
2:17
bring the line height down to 1.5.
2:21
I think that looks all right.
2:31
Now we need to add an additional 0.5rem to
our bottom margin, because of the links,
2:32
so I'll do 1rem.
2:37
To make these links a bit smaller,
I'm going to lower their font-size a bit.
2:42
Then to space apart each project,
I'll get the project container and
2:52
give it 1.5rem bottom margin which
will appear as 1 because of our links.
2:57
Since we've already added margin to
the bottom of each section though,
3:08
I'll remove it from the last-of-type.
3:12
That did it, nice.
3:21
Moving on to the contact section.
3:24
First, I need to remove this
temporary width I added to the SVGs.
3:26
All right, next I'll grab our
paragraph element in the container,
3:35
lower the font-size a bit, change
the color, and add some bottom margin.
3:38
Next, I'm going to select the SVGs
within our socials container,
4:02
give them a specific width and
height value, and change their fill color.
4:06
Now, let's select the container itself.
4:24
I'll give it a display of flex and
provide a gap to space them out a bit.
4:26
I think it'd be nice if they changed color
and grew a bit when hovered over, so
4:34
I'll target the SVGs in
the hover state and apply those.
4:39
Then we just need to apply the transition
for both of those properties above
4:54
Cool, this looks pretty neat.
5:07
Let's get the footer taken care of.
5:09
So the footer isn't nested
within the main element.
5:13
So we're going to have to apply
the same horizontal margin.
5:16
Let's head up and do that now.
5:20
I'll remove it from here and
we'll put them in our dry section
5:22
Okay, let's apply our background
color to make sure that worked.
5:34
Awesome, so let's make the font
a bit smaller, change the color,
5:49
and apply some vertical padding
to make it a bit bigger.
5:53
Now, since we added bottom
padding to the main element,
6:23
we can target the last section and
remove its bottom margin.
6:26
Perfect, let's look at these
at desktop screen width.
6:40
All right, so
6:44
it looks like we need to change
the layout of our project sections here.
6:45
So I'm going to target our project
container and apply a display of flex.
6:48
And let's put a little
bit of gap between them.
6:53
Because of the way I did these placeholder
images, I'm going to align them
6:56
vertically to the center, but you may
not have to do that with your images.
7:00
Lastly, we'll change
the text align to left.
7:04
Now we need to target both
child containers, and let's
7:11
provide a flex-basis of 50% so that they
both take up equal space horizontally.
7:14
That looks much better.
7:26
Let's now target all of
the even project containers and
7:28
switch the flex direction to row reverse.
7:31
Perfect, now they will switch back and
forth even if you add more projects.
7:43
Okay, so our two mockups are completed for
the most part.
7:48
Our desktop needs some font-size and
spacing boosts.
7:51
Before going that far, I'd like to start
stretching the screen wider from our
7:54
initial 320 pixels that we matched the
mobile mockup to and see what breaks or
7:59
becomes illegible.
8:04
It looks like our about text,
project images, and
8:05
project descriptions get a bit too wide.
8:08
I'm going to apply a max width to each of
the sections at a size I find pleasant.
8:11
About 470 pixels seems nice.
8:25
Now we'll need to give our main
element a display of flex.
8:36
A flex direction of column and
align the items to the center
8:39
Okay, I think that works pretty well.
8:52
Back in desktop view, I think I'd like to
apply a max width to the main element.
8:54
I'll see what the width is right
at 1024 pixels and use that.
9:00
Looks like 886.
9:05
So, we'll account for
the two sides of 48 pixels of padding and
9:06
add another 96 to end up with 982 pixels.
9:12
Let's apply this to the header and
footer as well and
9:15
give them all an inline margin of
auto to center them horizontally.
9:18
Let's bring our sections
max width back to 100%.
9:38
Looks like we need to also adjust the
regular width as our hero section is only
9:52
taking up the space it needs currently.
9:56
Much better, I just noticed that I never
applied our hover effect to our desktop
10:04
nav, let's go up and
add that in real quick
10:09
I'd also like to make our
social icons a little bigger.
10:29
So, I'll target those and boost them
up to 35 pixels width and height.
10:32
I'll also target the container and
double the gap.
10:53
There we go.
11:02
It seems my transition
isn't quite working.
11:03
Wow, I forgot to add the s for
seconds in the transition.
11:07
That's much better.
11:16
Okay, so now I'm going to go through and
adjust font sizes and
11:18
vertical spacing between elements.
11:21
This is a bit tedious and
time-consuming, so I'm gonna get
11:23
this process done off-screen, and I'll
show you what I came up with afterwards.
11:27
Okay, I'll scroll through the code that I
put together real quick for you to see.
11:31
If you're following along exactly, you can
pause the video when I stop scrolling at
11:35
each part, but you may find values
you like better on your own.
11:40
And this is what it looks
like in the browser now.
12:07
I just increased font-sizes and spacing
between the elements to give it a cleaner
12:10
and easier to read appearance
on desktop screens.
12:15
All right, we'll wrap this up in the next
video by bringing functionality to our
12:18
mobile navigation menu.
12:22
See you there.
12:23
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