APRIL SPRING SALE | 20% off ALL ACCESS to One Month ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

Hide

Finish the Cookie Monster Portfolio

Day 7 ยท Lesson 1 ยท


Padding, border-radius, text-decoration, and adding images with CSS

- We are gonna finish off the CSS in this video,
let's get going.
We have this much going on, and the things
we need to do now are, change the link colors here,
get rid of that little underline thing there,
and then just kind of add some padding to make it,
you know, look a little better.
You'll see what that is.
And put the image in the background.
So there's a few steps, I'm talking through it
just so you start to recognize what we need to do.
And let's go through that step-by-step.
Alright, so the first thing is,
let's add the color to the A H ref here.
I'm gonna have you do this yourself right now.
Go ahead and see if you can figure out
how to make this color of this text here the same as this.
Do that right now.
- [Boy In Blue Shirt] We should totally hit it again,
but I get first dibs on it.
(man in yellow rapping)
(boy in blue shirt joins in rapping)
- Alright, what you should've done is added the A
because you're targeting the link is between the A tags,
and all you needed to do is say the color
is the same color as it is for this.
So that makes it a small code.
And that's what's going on there.
In addition, I got rid of that underline,
because it was kind of gnarly.
We don't want that.
It's fine, you can have it if you want, but I don't.
You know, I think it looks better without it.
So text dash decoration none
will remove underlines from links.
Okay, hopefully you're following along.
Now what does that mean?
If you remember we have these little underlines here too.
Look, they went away as well, because when we say,
remember those little underlines?
The browser will automatically add those underlines,
and by just saying text decoration none,
we get rid of it on our links.
And so it's a nice way to clean that up.
So that's what's going on there.
Looking pretty good.
We can add some padding to kind of add some space here.
Check this out.
We have this here, but if I wanna just
add some this here, that will be padding.
And all that is gonna be, is on our container,
right around here, I can add some padding.
And what am I gonna do?
Let's say add, I don't know, five pixels padding.
Everything's in pixels, right?
That looks pretty good.
Maybe add a little bit more, I don't know.
Let me see, what did I end up choosing?
I chose 15, we could do that.
Whatever feels good.
Play with it, whatever you like.
And then let's also add some padding to the H2.
I mean I think there's somewhat of an art to this.
You just have to decide what feels right.
Sometimes if you have a big client,
you might have a strict deadline, and may not be perfect.
You know, like perfect point perfect,
but I think a lot of times there's a little wiggle room,
and you can just make things and work
with a designer to make things look good.
So we have that, and that looks pretty good.
And I also have this effect that's pretty cool
where you can round the edges,
it will just soften that H2 border there.
And what that's gonna be called is border radius.
Yep, border radius.
We'll make that five pixels as well.
And it'll just kind of soften the edges there.
Yeah, so thing's are looking pretty good.
So for the most part, we have the entire container designed,
and now we just need to slap Cookie Monster's face
on his portfolio in the back.
So the way we do that is it's on the body, right?
We want this big image on the body.
And it's gonna be different than with HTML.
When we do HTML images, that's one way we include images,
we use this IMG tag.
Just watch along right now.
There's another way that we can
include images for background images.
And that's with CSS.
And to do that, all you need to do is just say background,
well remember, we know the background tag,
we wanna make it green, it's the same tag.
Now instead of giving it green,
instead of passing it green, we can just give it an image.
And the way we do that is URL,
just follow along and then we'll talk about it.
Just like that.
And that is the final,
oh it's the worst.
It happens to me too, guys.
It happens to me too.
What did we do wrong?
What's going on here?
(laughs)
And that is the final step.
Cookie Monster images, URL, huh.
Everything looks good there.
I'm very confused.
This happens.
Oh, I spelled Monster wrong.
(groans)
Did you see that before I saw that?
Did you see that?
(laughs) It happens.
Coding, man, is all about debugging.
It's all about the pain.
So that looks good now.
We have our Cookie Monster showing up.
So the reason, I'll just give you a brief,
the reason we have to go dot dot here, is it goes back,
so we are in this folder, we need to go up.
Check it out, we need to go up,
out of the CSS folder and into the images folder.
And this is more or less, it's a more advanced path.
Like URL setting up paths.
Which we do in more advanced classes here in one month.
But I'm just giving you a taste of it.
So this back back dot mean come out of the CSS folder
and go into the images folder.
Wonderful job!
If you got this far, you just knocked down a ton
of HTML and CSS in a really short amount of time,
and I hope you're feeling proud of yourself.
This is great.
I'm gonna give you a challenge for your homework this week.
And that will be in the next video.
So come on, get the challenge,
and let's finish off this week strong.