Lecturer: 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.
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.
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 fff, right?
And going down from fff a little bit darker is then eee.
The next one would be ccc, bbb, aaa, and then 99,
and then 8765, all the way to zero,
which is complete black, right?
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, right?
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 DDD.
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 01 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 while 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.
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.
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,
and then the rest simply stays in the style file.
Then of course, we also need to include that here,
otherwise nothing works.
So here we want a style sheet again.
And now or general.
And of 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 so 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 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 cannot 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, let's actually 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 this 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,
like it occupies almost the entire view port here.
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%,
anterior going down the 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.
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...
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.
And so that starts by doing that now.
This image is right now inside of this step image box.
We haven't selected that yet.
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.
Well, I think it is centered
both horizontally and vertically, 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 turn 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 one we tried before.
So 30 was too little, so let's keep it here at 35, okay?
I think there's 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, right?
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, right?
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, right?
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 like vertically stacked
like we want them to be,
and then we would have to justify content center them.
So that seems like a bit too much work here in this case,
so the next option would be to select this text box here,
and then since they are grid items,
we could set a line self to center, I think.
And so let's actually do that.
So this is the one that we will choose,
but there would be another one.
So we could also simply set
on the entire grid container here,
the aligned 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, right?
If you look at that one here,
it is now vertically centered and the same down here, right?
So we could do this, or again,
we could also select all of these elements here.
Like this one here, and then align them individually
to the center by using aligned self.
So you can do whichever you prefer.
Well, I thought I would do this one,
but actually I prefer to set it on the parent element.
Setting align items to center on the grid itself.
Let's do that.
Back here on the grid.
But where do you think I should put that?
I should not just put it here, right?
Align items set to center.
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 list 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.
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 it displayed as a grid, we have all these gaps,
then we have it with these two columns,
and we have aligned items to center.
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.
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 like add like a circle here to the background,
so behind basically this screen 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.
We do not want to come here
and inside of the hero image box,
add like some new diff 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 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,
even though it is not really.
Now, this pseudo element needs to be added
to this diff 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.
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,
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 well, yellow,
that we have on the page.
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.
So let's give it some height manually here, like 100 pixels,
and now you see it.
If we cannot 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.
So again, these 60% here are actually 60%s
of the parent's elements width.
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.
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.
We're going to make it a square.
It's here now and it's here, and on all of them.
But as you see,
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, right?
I think that's what we did back then.
And yeah.
So this is the exact same technique.
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.
We can start here with top 50% and left 50%
because remember, we want it centered.
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 that technique
that I showed you in the 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.
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?
And so let's fix that as a next step.
Oh, 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 z-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.
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 sites
when I was looking for inspiration,
and so basically I'm stealing
like an artist here once again.
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, we'll 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.
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.
This is the one we have to be using
and I'm now simply going to go with the next one.
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,
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.
It was great that we had another opportunity
to practice here.
Okay.
And with this, we finished the section
and are now hopefully ready to go straight to the next one.