Original subtitles

Time to now use

some of the guidelines we just learned

about colors and practice.

And this gonna be a lot of fun.

So let's get started.

And let's start by quickly choosing a base color

for our design.

Now of course, in the real world

a lot of thought needs to go into this decision

but we will just very quickly choose a color here

just to see how it works.

So there is a lot of like green colors here in the pictures.

Like here,

here are also this nice green in the plants

as well as here.

And this entire chair or couch is actually green as well.

Also this small shop focuses a lot on health

like here

or here.

And so if you remember, the color green

stands for nature, growth and health.

And so therefore let's go with a green color.

So something like this.

So I'll use one of the tools that I mentioned

in the last lecture

and that is Open Color.

So the URL is this, which once again,

you will be able to find at my resources page.

So, here we have a lot of colors

with the corresponding hex code.

So gray, which we will come to a bit later.

So we're looking for green.

And so here we have like teal green and lime.

So I'm not looking for this one.

And actually I think the one that I like is this teal.

So this is,

if you look at this here, at these pictures,

then you see that teal

is the one that,

that more closely resembles the color that we already have.

So we could not choose any of these,

but this dark one here looks pretty nice to me.

So I would just color this hexadecimal code.

And then here in the comments,

let's just write

our color system here.

So main

color

(keyboard clicking)

is this.

And then it gets, even in the comments,

nicely highlighted

because of that VS code extension that we installed.

And remember that for our real world color pallette,

we would now go ahead and generate shades and tints

for this color.

Now in this case, actually the tints are already here.

So like the lighter versions.

So if we need one,

we can simply go ahead and take one of these.

All right.

So let's just choose the gray now.

And there's only one gray. So let's go with that.

So this gray should be used for the text.

And so I'm going to choose this one.

I could also choose this one,

but

yeah, let's go with this one here.

That one might be a little bit too light.

(keyboard clicking)

And that's it.

And from the hex code,

you can actually see that these are not real grays.

Because if they were then the first pair would need to be

the same as the second and the third pair.

Remember that?

All right.

But anyway, let's now actually use these colors.

And the first thing that I'm going to do

is to make all the text on the page gray.

So using this gray here,

copying it again,

and remember that the color property

is one that gets inherited.

And so we can simply put that here on the body.

So color.

Well, I had caps lock turned on,

so color

(keyboard clicking)

giving it a save

and there we go.

So that looks a lot more like it was actually designed.

Right?

So that's really nice.

So we are definitely going somewhere here with our design

and now it's time to take

this color here and actually use it here on this link.

So this link, we actually want to style it as a button.

So

where is that?

Yeah, so here it is in button

and it also has this button,

big class here.

But let's just start with button

and this should be reusable. So let's put it up here.

(keyboard clicking)

And now remember how we should always

use the pseudo classes of link and visit it

since this is actually a link

and not a button element.

And it is not a button element

because this is supposed to be a link

that actually leads somewhere.

So shop chairs will probably lead us to another page,

which is then their online shop.

So it's not the button because it doesn't do anything

like for example, opening a model window.

And so if it leads somewhere, it should be a link.

And if it does something, then it should be a button.

But also more about that a bit later in our main project.

Now let's use our background color here.

Oh well, that's not it.

Now we need to grab it again here.

Okay.

And now let's give it the actual styles.

So first of all the color should now be white.

So color

(keyboard clicking)

FFF.

We don't want the text underline.

So that is text decoration remember?

And right now by default, it is underlined

but we want it to be none.

So that looks better already.

And now let's actually also turn it uppercase.

So that's something common in buttons.

(keyboard clicking)

And remember, that is text transform set to uppercase.

Right?

And now finally let's give it some padding.

So on a top and bottom,

let's give it 16 pixels and left and right, 32.

And these values are coming from my spacing system up here,

but I will not yet go into that system.

Okay?

So some space was actually created here,

but this element didn't move down.

So basically the distance here

between this text and this one didn't change.

And do you know why that is?

Well, it is because this anchor element is an inline element

and on inline elements

the box model does not work as expected.

Remember that?

So basically vertical spacing

does not actually create new space.

But that is what we want

and so we can set it to

an inline block, right?

It should not be block

because then it would occupy all the space that it can

like this, right?

So this is not what we want, but we want inline block.

And now there is some more space there. Right?

Now finally, let's just make this bold.

And for that we have our font weight of 500.

I think.

So here in the URL we can actually nicely see it.

So we have a 400,

500

and 700

selected.

And actually, if we now decided we also want 600,

we don't need to go back to Google fonts

instead we could simply add a 600 here

then a semi-colon

and then it would also load that one.

All right.

But we just want the 500 to make this text here

just a little bit bolder.

So font weight

of 500

and yeah, that looks a bit nicer.

And later we will also make this round

but for now we don't yet know how that works.

Nice.

Now just above the

font size.

But then I also wanted to talk about the hover state.

So usually when we hover a button like this,

it might change its color.

So it might turn lighter or darker.

So in this case,

let's just make it lighter

because that's one of the colors that we actually

can just take from Open Color here.

But first let's make the text a bit bigger.

Let's keep these properties a bit together with the font.

So font

size

of 18

pixel.

Beautiful.

And now let's get that lighter color here

from Open Color.

And so this is our usual color.

And then as we hover the button,

we might want to change the color to this one.

So just a subtle effect, but let's copy it here.

And then let's say button,

(keyboard clicking)

a hover

(keyboard clicking)

and button

(keyboard clicking)

active.

So always in this order.

Okay?

So back

ground

color.

And then,

there we go.

Let's check that out

and that looks beautiful.

Really, really nice.

Now there is just one thing that we should do here,

which is to check the contrast between

the background color and the text color.

So remember that this is extremely important

to make text accessible for everyone.

So I will copy this

hex code here.

And then I will come to this tool that I mentioned

which is called Coolors.

And one more time, by the time you're watching this,

this tool might look different.

But somewhere there must be this contrast checker here.

Okay?

And if for some reason that doesn't work,

then just Google contrast checker and you will for sure

find one of the countless tools that does this.

So contrast checker.

Let's make the text color white.

So that's FFF.

Then here let's paste that

and you see that we have a contrast of five.

Now that's not perfect

but it is good enough for us.

Now right?

And we could try the same of course with our text color.

So there we have a white background

and by the way you see that white on white

is what a contrast of one means.

So the worst possible.

And

yeah, so our contrast here is actually quite good, 11.5.

All right, but anyway this was just to show you

how this tool works.

All right.

But let's go down because

here we have some more buttons

and these don't look all too well.

And so let's change that.

So maybe you'll remember that here we have the button class,

but also the button big.

And so this is basically like a variation of this button

that we can now style differently.

So we have button big. Let's see.

And then down there,

here we have the button small.

Okay.

So this is a very common technique

that we use when we write CSS,

which is basically put all the common styles

into one element

or into one class,

which is button in this case.

And then the styles that are different

we put

into

one of these like variations.

So let's create those.

So that's button

small

(keyboard clicking)

and

button

I think it was big.

And I like to use two dashes here

but of course that's not really a hard rule.

So what's going to change here

between the big and the small button

is the font size

and also the sizing.

And the sizing is defined by the padding here.

And so let's grab these two

because these two are actually for the big button.

And then for the small one, let's do something else.

So let's save this for now.

And so you'll see that our big button here

still looks the same

and our small now looks like this.

And so let's also give it some other font size.

And remember by default, it is 16

but this actually looks too big.

So let's

put it down a bit to 14.

Nice.

And now give it some padding as well

but a little bit less than the big one.

So eight

top and bottom

and 12 left and right.

Nice.

That actually looks quite nice.

So here we are done with the color

but since we are here

let's actually also change the color of this footer here.

So remember how we made this text smaller

because it is a lot less important

than the rest of the text.

And so let's continue that by also making the text

lighter than the rest.

So let's come again to Open Colors

and remember how the one we chose was this one.

So let's now try maybe

this one.

So I'm copying it.

And now the first thing I will do

is actually to check the color contrast.

So this one, oh, and here we only have 3.3

which is poor.

So that we cannot use.

Let's try to click here,

adjust text color,

but that's way too dark.

So let's just then choose

the next one.

(keyboard clicking)

So that's maybe not as light as we want it.

And sometimes we might also be able break these rules

just a little bit.

But here let's just very strictly stick to the rules.

And so there you go.

It actually looks almost the same

but

well, anyway,

let's just keep it like this

so that we don't break the accessibility rules.

Great.

Now remember that another thing we could do with colors

was to accent one entire section.

All right.

So that is something very common that we do with colors.

And so that's what I'm gonna do now

with this testimonial section here.

So I'm pretty sure that's going to look amazing.

So let's try that out.

So first I want to know what this entire element is called.

So it's the testimonial section.

So,

so it's this one.

(keyboard clicking)

So background color

and now VS code is actually really nice to us

because it already gives us here

the most common used colors.

So in this current CSS file,

we have used these four colors.

And so here it helps us choosing the same colors again.

So this is our green color.

All right.

Nice.

Well, at least it's a start.

But now we need to make the text white.

So how should we do that?

Should we select all of these three?

Well, I don't think so.

And instead we should simply make the color

on this parent element white

and then all the other elements

should be able to inherit it.

So let's do that.

(keyboard clicking)

Color to white.

So FFF.

And so that is a lot more readable. Right?

Now it looks a bit weird

that the background color is not here around this image.

And so let's just give it some padding here.

So padding to the entire section

which will move everything a bit inward basically.

And so with that, it looks a lot nicer.

And again we will add some roundness to it later

once we learn how that actually works.

Okay.

And now finally,

as yet another accent,

what I can do now is to

like add a final touch

which will be to add a green line here

to the end of the entire page.

So going from left to right, all across the page.

And so if I want that, I need to set it on the body.

So right here.

(keyboard clicking)

So border bottom.

I think we actually did this in our other project.

So the web magazine

solid and then again our main color

and

yeah, that looks nice.

That's a nice final accent for the page

and also a final accent for this lecture.

Because with this

we are actually done

at least for now.

And so therefore we can now move on

to our next lecture

which is gonna be on images.