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!
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
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