Original subtitles

All right. Let's now keep on working

on our how it works section.

And we're gonna start

with these three text elements, right here.

All right.

So that is the step number,

and the heading here, and the step description.

So let's go down here,

and starting with this one.

So, if you remember the design example

that we started with here,

remember that this text was really large,

so let's select a huge font size here.

So like 86 or 98.

So I'm gonna start with 98 here maybe even.

So 9.8 rem.

Let's also make it quite bold,

but since the text is so huge,

let's not go with 700,

but with 600 maybe,

and now the color.

And here, again,

just like the design example I showed you,

we want a very light color, so a very light gray.

And so let's again go with that approach

of using gray colors that are like this.

So these three values here, all the same,

instead of using some other gray color

from some other color system, okay?

And let me show you how I come up with a color like this.

So here we want it very light,

and so we know that the lightest one is basically white,

so that's F-F-F, right?

And going down from F-F-F a little bit darker,

is then E-E-E, okay?

The next one would be C-C-C, B-B-B, A-A-A,

and then nine, nine,

and then eight, seven, six,

five, all the way to zero,

which is complete black.

So let's just try this,

even though it's probably going to be way too light.

And indeed it is a little bit too light here.

Probably even a bit too big, maybe.

So let's make it a bit darker

and take it down one step here,

so that's putting it at 8.6 rem,

and then here, the next one is D-D-D.

Let's try that,

and that does look better, I think.

So, of course, in terms of accessibility,

the contrast ratio here is very, very low,

and so it will not pass that.

However, as hopefully you heard at some point,

rules are meant to be broken, right?

So in this case,

we're giving priority here really to the visual style,

which is in fact not very, very important.

I mean, the content here of zero one is not crucial

for the user to understand this design.

And so, many designers use some situations

in which they do break these rules.

So we didn't break it, for example, here.

So I was very careful making the text here accessible,

and here as well,

because this piece of content, I think,

is actually quite important,

and I want everyone to understand it.

But well, here, I think we can break that rule.

And of course, this is all a bit subjective

and you might not want to break any rules at all.

And so then you would have to go

with a lot of a darker color here,

but then it doesn't look visually so nice,

so that's why I went with this one here,

because I really liked that design example that I saw,

that I showed you, right?

Okay, so we just need some spacing here probably,

and then let's start working on this tertiary heading.

So margin to the bottom,

let's say 12,

because there was already some spacing there,

which always comes from the line height.

And when the text is so big,

then there's already a lot of basically default spacing

after the text.

So that looks good.

And now we have the heading tertiary.

And so this file is growing a lot, actually,

and I'm a bit tired of having to scroll up and down here.

And so, what I will do now,

and what I many times do,

is to split it up into two files.

So that is of course, perfectly fine.

It's something that we didn't do yet,

but it's no problem to split our own CSS code

into one or multiple files.

So here, inside of the CSS folder,

I'm gonna create a new file,

and I'm gonna call it the general.CSS.

Okay, and so I will put all of this general code here,

the one that we reuse all the time,

and that includes this design information here.

So I will put all that, here, in general.

Okay, and then the rest simply stays in the style file.

Then of course, we also need to include that here, right?

Otherwise, nothing works.

So here we want a style sheet again,

and now, our general.

Oh, and course I need to close that,

and now it's fixed,

and let's see if it looks the same and it does.

So we're still good here,

spacing also looks okay.

And so let's now style that tertiary heading

that we just added here.

And once again,

let's go with the same font weight color

and letter spacing.

And I'm also adding that to the list here,

and then let's give it another font size.

So one step down, maybe.

So from 4.4, let's go to a 36

or maybe 30.

So we'll see that in a minute, what works best.

So 3.6 rem,

and let's also give it that line height of 1.2.

And let's immediately add some margin to the bottom here,

of 3.2 rem.

And of course, in the real world,

you would have to experiment around with this a lot,

but here we can not take that much time.

And so I will just use these values here,

as I think they make more sense

and not always scroll up and down here in our file.

Well, that's actually the first style,

the paragraph as well,

so that we can see if the visual hierarchy

that we're building here makes sense.

So this one is now, again, specific to the section,

and so it goes into the style.CSS file.

So let's start with maybe two rem,

but that's maybe a bit too much,

and then I will also use the same line height of 1.8.

So what I have here is basically the same text

as we have in the paragraph, right, in the hero.

Or actually here we have 1.6 somehow,

and still the font size of two,

but let's try 1.8.

And while the text is way too large, actually,

so let's tone that down,

and also the image,

it occupies almost the entire viewport here.

Right, so let's take it all down a notch here,

and the image as well.

So it's now 50, let's make it like 30%.

And here going down to 1.8 rem,

and also this one going down to 3.0.

So let's check that out.

And that does look a bit better, right?

Also the spacing of 1.8 looks good.

I think 1.6 would be a little bit too little,

and now just this image here is a little bit too small,

I would say.

Also we want it to be centered,

so let's actually do that first.

So basically let me inspect this here.

So inside of this step image box,

we want the image to be centered vertically

and horizontally.

Well, right now, vertically it's not necessary,

because the content is large enough,

or actually it's not large enough,

so if this was a big, big text here,

let me just...

so we can actually do that here in the inspector.

So I'm just copy and pasting this a couple of times here,

just to show you.

And so now, of course, we would need to center it

both vertically and horizontally, right?

And so let's start by doing that now.

And so this image is right now

inside of this step image box.

We haven't selected that yet.

So let's put that here, before this image.

And so, to easily center the image inside that,

we simply use flexbox.

So just as we have been doing all along,

we use align items center,

and justify content center, as well.

Nice.

And so now it is,

well, now I think it is centered

both horizontally and vertically, yeah, as you see.

So this is without the vertical centering,

and then the image would actually stretch

from top to bottom.

And do you remember why that is?

Well, it's because on flex items, by default,

they are set to align items stretch.

So if we turned that off completely,

then of course it would be no longer stretched.

So then of course it would not be vertically

nor horizontally aligned.

But like this, it is correct.

It is still a bit too small, I think.

Let's actually reload,

so that the text goes back to normal.

Okay.

And let's increase this a little bit here,

just so we can see it.

So 35, which is like a middle ground between 30 and 40,

and 40 looks way too much.

I think that's the one we tried before.

So 30 was too little, so let's keep it here at 35.

Okay?

Now I think there is still too much space here,

between this image and this text.

So let's inspect this here,

and the reason is that this grid here has a huge gap.

So it has, I believe 9.6 rem vertically and horizontally.

And horizontally I think it makes sense,

because we have been using this 9.6 here all the time.

So it's also the margin here,

between this heading and the start of this content.

And it's also what we have here at the beginning

and the end of each section.

So for the row, again, I think it makes sense,

but not for the column.

That's just a bit too much,

especially imagine if we had four columns side by side,

then this huge gap would take away a lot of the space.

So let's fix the image here, set it to 35% of width,

and then let's fix this gap here and make it a lot smaller.

So 35 and then our grid is of course in the general CSS,

so we want this to be the row gap.

So keeping that for the row,

but then for the column gap,

let's set it to 6.4,

which I think is two steps down from what we had before.

Okay.

And well, that didn't change a whole lot,

it looks like.

At least I don't remember what it looked like before.

Well, we can try putting it back here.

And yeah, I think some text here now shifted down actually.

But anyway, yeah, this will be important also later on

for the other sections,

when we have more than just two columns.

All right. Now, here actually,

the content is smaller than this one here.

So...

basically here in step two,

this has this size,

but here we finish here, like too soon,

and I think the same will happen here.

And so what this means is that we want to vertically align

this element right here.

So, how can we do that?

Well, there are multiple ways.

So the first one would to also make this element here,

a flex container,

just like we did here to vertically align the images.

So vertically and horizontally aligned

in the case of the images,

but here we just want it vertically.

So again, we could use a flex container,

but here we actually have multiple elements,

and we would then have to change the flex direction,

so that they are back to being vertically stacked,

like we want them to be.

And then we would have to

justify content centered down.

So that seems like a bit too much work here in this case,

so the next option would be

to select these step text box here,

and then, since they are grid items,

we could set align self to center, I think.

And so let's actually do that.

So this is the one that we will choose,

but there will be another one.

So we could also simply set

on the entire grid container here,

the align items property to center as well.

So this is what I mean,

let me show it to you here in the inspector.

So align items set to center.

And so, as I just said,

that would then immediately fix that.

If you look at that one here,

it is now vertically centered and the same down here.

So we could do this or again,

we could also select all of these elements here.

So like this one here,

and then align them individually to the center

by using align self.

So you can do whichever you prefer, but,

well, I thought I would do this one,

but actually I prefer to set it on the parent element.

So setting align items to center on the grid itself.

So let's do that.

So back here on the grid,

but where do you think I should put that?

I should not just put it here, right?

So align items set to center.

So that would work.

So even after reloading here, now,

everything is nicely and vertically centered,

but this is not the way to go,

because again, this grid is supposed to be reusable, right?

And we might not want this setting in future grids.

So for example, in the next section,

we will create some cards,

and then, on the side of that,

we will have that lists of diets.

Remember that?

And so those, we will not want them vertically aligned

in the center.

Therefore, then we could not use this grid,

which, of course, we want to use.

So the solution to do that

is to basically create yet another class,

which will act like basically yet another grid setting.

So these can be seen as grid settings as well.

So adding some stuff to the grid,

and so we can do the same for things like this alignment.

So I'm calling it grid

and then center vertically,

and so I just take that from here, paste it here,

and then we can simply add this class to this grid.

Okay.

And if this seems too confusing for you,

of course, all of this would not be strictly necessary.

So you could just create one grid

for each of the grids that you want on your page,

so without having these reusable grids.

That would be perfectly possible,

but for a scalable page and to make our code a bit cleaner,

I'm showing you this technique,

because I think it is a lot more valuable.

Okay.

But anyway, now you see that it still works.

And so seeing again in the inspector on our grid,

so the parent grid container,

now we have all these settings here.

So we have a display as a grid,

we have all these gaps,

then we have it with these two columns,

and we have align items to center.

Okay.

And with this,

we could now actually say that we finished this section.

So it looks quite nice,

but I still have this issue,

that there is way too much spacing here.

So right here.

And if you ask me,

it doesn't look so interesting visually as well.

So again, we could just declare this design as finished,

but instead, what I'm gonna do

is to add a circle here to the background,

so behind, basically, this green here.

And this will make more sense

once I actually show it to you.

And I think the circle will look quite nice,

because there are actually quite some circles already.

So here in this design itself,

there are circles here anywhere,

and also in the logo type,

we have actually these two circles.

So the circle is kind of like a brand element itself,

if you want.

We have some circles here as well,

and so I think this might look quite nice.

So adding a circle basically means to add a new element.

And so, let's do that,

but we do not want to do that in the HTML.

So we do not want to come here,

and inside of the hero image box,

add some new div and then call it circle.

So we do not want to pollute our HTML

with those visual things,

and so instead, we're going to, once again,

use a pseudo-element, remember that?

Well, a pseudo-element like after or before,

basically insert a child element into the parent.

So in this case, this hero image box,

and we can then use that element

as if it was in the HTML.

So even though it is not really, okay?

Now this pseudo-element needs to be added

to this div element here.

So this one here,

because we cannot add it to images.

Okay?

So the before and after pseudo-elements

cannot be added to images,

because, well, in the HTML themselves,

we are not allowed to add child elements to images.

So we will simply add it here.

So let's use the before one,

and remember to make it actually appear on the page.

We need to give it some content.

And it doesn't matter what,

it can even be empty,

but it needs to have some.

Then usually we can set this to a block element,

especially if we simply want to make it into a shape,

which is basically what we want to do.

Now, let's give it some width here as well,

because just as the image,

we also want this one here to be flexible,

so that's why we are gonna use percentages here as well.

So let's go with 60%,

since the image is 35.

And so this is significantly more than that.

And then let's set the height also to 60%,

and this is just to show you

that actually it will not work as expected,

but still I'm going to do it, okay?

Because this is actually important to understand.

Okay, now let's just give it some background color,

and I will use this very light one.

So the lightest basically white or yellow

that we have on the page.

Okay, so this will not look really good yet,

but let's just see what we have.

Well, actually, it's not really there at all.

So let's inspect what's going on here.

Ah, here it is.

So it does have some width,

but apparently no height.

Right, so let's give it some height manually here,

like 100 pixels.

And now you see it, right?

So if we can not use 60% here

in order to make it basically a square,

and we need it to be a square,

so that we can then make it a circle,

we need to find another way of defining the height.

And so let me show you a nice hack that we can use.

So this is like a trick that goes around

this thing of this not working.

So let me comment this out,

and now let me show you that trick.

So what we can do basically

to give it the same height of 60%,

is to add a padding to the bottom.

So padding bottom, and now here we can define it as 60%.

And this works because even the padding to the bottom

is actually defined on the width of the element.

Okay?

So again, these 60% here

are actually 60% of the parent's elements width.

All right, so basically exactly like this.

And this is very important to understand,

so let me show it.

So let me actually write that here.

60% of parent's width,

and that again is true,

even when we add that to the bottom here.

And so this will now basically create an element

with an intrinsic height of zero,

but then with a padding of 60%,

which will then make it square.

Right, so again, the height is basically zero,

but then, since we're adding all that padding

here to the bottom,

it will appear as if it was a square.

And so that is a very nice trick.

Great.

So we're going to make it a square,

so it's here now and it's here and on all of them,

but as you see it,

it is now kind of pushing this one here to the side,

because, of course, it needs to occupy this space here.

Now in order to basically take it out of the flow here,

and also to position it nicely, like behind this image,

we can simply position it absolutely.

And so let's do that.

And so this technique is basically exactly the same

that we used before.

For example, in our very first project to mark,

I think a blog post as a top post.

I think that's what we did back then.

And yeah, so this is the exact same technique.

So position absolute,

and remember that in order for this to work,

we need to actually make the parent element

in relation to which we want this one to be positioned.

We need to make it position relative.

So we can start here with top 50%

and left 50%,

because, remember, we want it centered, right?

But you know already that this is not going to work.

So it puts it here,

where basically this corner is now at the very center.

And so, remember the technique that I showed you

in our last section,

which is to use the transform property

with the function of translate.

So translate will basically shift the element,

in this case 50% of its same width

and of its own height.

So 50% and actually minus,

and then also minus 50% to pull it back up

exactly by half of its own height.

Okay, so let's check that out.

And indeed there it is.

So it is nicely centered

and this time not using flexbox,

but instead using absolute positioning.

And we didn't use flexbox here,

well, because we basically want this element here

to occupy the exact same space as the image.

And so here flexbox was not the right way to go,

while with the image, it was, okay?

Now let's just make it round,

but of course, you're still wondering

why is that square actually on top of the image.

So let's fix that as a next step.

For now, let's actually put that below here,

just so we keep the context of this comment here.

So now it's nicely this circle,

but now we basically need to put it behind this image.

So this one here has been positioned on top of the image,

and that is not what we want,

but fortunately for us, using CSS we can fix that,

because there is this very handy property

called Z index.

Now Z index can be a little bit tricky to work with,

because there are many, many particularities to it.

And the way it works is quite confusing actually.

But when it does work,

then basically elements that have

a higher value of the index

will appear first, so will appear on top.

So what we're gonna do here is

to simply reduce the value here.

So instead of adding a positive value to the image,

we will simply add a negative value here.

And so that will then basically push it back in the order.

So for example, we can use minus one.

And so now it's fixed.

So now it's basically below the image.

Now, another way would've been

to put the positive Z index here,

but that might not work for some reason.

Let's just say 10, for example,

and so actually this also worked in this case,

but I'm still doing it like this,

as we did before, for something that I will explain next.

Okay.

So this looks quite nice already,

but we can still do better,

which is to add another circle here.

So this is just one circle,

it looks a little bit boring.

So it has the same background color as this one

and still not really interesting,

and so I will add another,

a bit smaller circle, right here, like this, okay?

So this is something that, again,

I saw somewhere on some other site,

when I was looking for inspiration.

And so basically I'm stealing like an artist here,

once again, okay?

So I didn't come up with this on my own, once more,

I just saw this in some other website,

which I do not remember, unfortunately,

so I cannot show it to you.

Okay?

So what we're gonna do is to add another pseudo-element,

but we cannot use before again.

So we can only use before once.

But fortunately for us,

there is also after,

which basically does the exact same thing.

So we can just do step image box,

and then after.

Now, many of the things here will be exactly the same

except here for the width and the background color.

And so let's basically export all of this here into,

again, a list of these two

and then have the styles that are unique

simply in each of these CSS rules.

So before and after will be,

well, I'm just gonna cut everything

except this.

Okay.

So both of them will have this,

and actually the Z index also must be unique,

as we will see in a minute.

Okay, and now let's make this here slightly smaller,

as I was saying.

So our width, let's say 50% here,

and then using that trick that we used before

making that one also 50%,

and then the background color,

and here I want it to be slightly darker.

So let's go here to our tint generator,

and so this is the one we have been using,

and I'm now simply going to go with the next one.

So copying it,

and I'm also putting it right here,

into the general file immediately.

So now we have multiple,

let's put this here down.

Okay.

And you can see here also that it is a little bit darker,

but it does make a lot of difference

when used in background colors.

Okay, let's see.

So this should already be on the page now,

and yeah, there we go.

I think it's a bit too big

and it is also on top of the image once again.

So let's make it smaller, as I was saying,

45 maybe,

and then the Z index,

let's also put it to minus one.

And this one we actually want to be at the top of this one.

So the smaller one on top of the bigger one,

so let's make this one minus two.

And yeah, there we go.

This is the effect I was looking for,

and just by adding this small thing here on the side,

makes it look a lot more interesting and a lot nicer,

I think.

Yeah, I think this actually finishes this part.

So this section, let's check it out from the beginning,

but I think everything is nice and beautiful.

So I had a lot of fun designing this section,

and the result I think is really, really nice.

So hopefully you think the same,

and you still learned a lot of stuff here along the way.

So you learned how to use

the after and before pseudo-elements

to create a nice design like this.

You also learned about the Z index property,

which is quite important.

And as I mentioned, it's not always super easy to use,

and usually you will have to experiment a lot

in order to make it work the way you intend.

Then we also went back to using again this technique here.

So this centering technique,

using absolute positioning and then top left and transform.

So this is a really important one,

and that's why I mentioned before

that you really should make sure that you know it

before moving on.

So it was great that we had another opportunity

to practice here.

Now, okay.

And with this, we finish this section

and are now hopefully ready to go straight to the next one.