Lecturer: Hey there and welcome back
to writing some more code.
And this lecture is gonna be really exciting
because in this and the next one,
we will build a beautiful hero section
and learn a ton of new CSS along the way.
So let's get started.
And this is the hero section
that we're gonna build in this lecture.
And it actually has the content of the omni foot project
that we will start very soon.
So this heading here and this description and this button
are exactly the ones that we will find
also in our omni foot section.
Or actually our omni foot project.
So you see here this beautiful background image
which spans all across this view port.
So it has exactly the height and the width of the view port.
So if we change this here,
you can see the image changing, right?
And we can even of course, change the entire window
and notice how the text always stays centered.
So basically this entire block here,
it always stays centered vertically.
So even in the extreme case, going over that navigation.
So basically this bar here.
So this logo and the navigation of course don't look real
but we will do that in our omni foot project.
Now, I'm only interested here
basically in the rest of the hero section.
So having this background image
and having then this nice block of text here
and all basically filling the entire browser,
especially filling here the entire height.
So I think that this is an exciting small project.
So let's get started now.
And since we now actually need
the entire size of the browser,
let me actually put this here on another desktop on the Mac,
and if you're on Windows,
you can just keep switching between the windows,
to make this one here big
and also create here a new component.
So the hero.html, and this one we will actually not copy
from the other component
because there are some major differences
but we will also scaffold very easily our HTML.
So again, just write the exclamation mark and then hit tab
and there is our HTML.
Let's just say it's the omni foot hero section.
Okay.
Then here inside of the head,
we will also have the style
so that we don't need two different files.
And now here in the body, let's create our hero section.
And for that, we will use the header element.
All right.
So remember that the header element
is the semantic element
for basically the introduction of the website.
And so that is essentially what this is.
Also, I didn't show you that then below this
we have some other section with just some random text,
just so we can exactly see
that this header has exactly the height of the view port.
And so that will then simply be a section element
which remember is exactly that.
So just a section of the page.
So then here inside of the header
we will have enough element
and then here we will typically include some logo
and some actual navigation links.
But here I will simply add some div, which then says logo
and another div, which says navigation.
Okay.
So that is that first box.
And now here is basically that big box
which will contain all of the content.
And notice how I'm not using any class names here,
so I want to do that a bit later
as we start writing the CSS together.
So basically, so I can explain to you
how we built a thing like this step by step
completely from scratch
without assuming any of the class names in the beginning.
But anyway, let's now write our actual content here.
So a healthy meal delivered to your door every single day.
Next, there is some paragraph
and you can just write some blind text here if you want,
but in this case, in the very beginning,
I like to actually have some actual content.
So to make it a little bit more real looking.
So the 360 days per year foot subscription,
that will make you eat healthy again.
Tailored to your personal tastes and nutritional needs.
Okay.
And then we have some kind of button there
but that button is actually a link
because it leads somewhere.
But let's of course give it an empty href,
just like usually.
And here we can actually already put our class
which is as usual button.
So start eating well.
Okay.
And for now, that is it.
And now inside of the section
we will want to then center the entire content here.
So let's give ourselves another box,
and then in there some H2 element, for example.
So some, I don't know, random heading
and then some paragraph.
And here we can now use lorem maybe even twice.
Okay.
So let's take a look at our result for now.
So once again, we need to now go back
or just remove this part here.
And here it is, the hero.
And so indeed our content here
without any styling whatsoever.
So let's actually start with that styling
and I will now select another font from Google Fonts.
And the one that we are going for is called Rubik.
And I'll explain more about
why this is the choice of our typeface
when we actually build the project in the next section.
So four, maybe five, and 700.
Okay.
So as always, just select these different styles
of different font weights, basically,
and then here is that summary.
So we selected regular, medium and bold
and then all we have to do is to copy this link
that we now need to include in our HTML in the very top.
So it needs to be before our own style.
Let's actually put that here.
Okay.
And now in our HTML, we can say font family
and then we set it to Rubik.
And then if that is somehow
not available as a second option,
we then want just the predefined sensor of type face.
Okay.
And as the text color,
let's just use some gray here, 444.
Okay.
So that should look, yeah, a little bit better already.
Okay.
And now let's just create basically the visual styling here.
So make this text a little bit bigger
and also put them side by side.
And of course, styling all of this text here,
including this button.
Okay.
So starting with the navigation,
let's set a font size of 20 pixels and make it bold as well,
and actually let's select the actual number 700
that we loaded here, right?
So these are the actual font weights.
And then to put them side by side,
of course, we use display,
set to flex, and then the trick to push
each of them to one of the sides,
remember is justify content to space between.
Okay.
Beautiful.
So there we go.
That looks great.
And now let's work with our H1.
So let's make it quite big at 52 pixels.
And this is actually, once again,
one of the values of our type scale.
So we can look that up somewhere here, for example,
and so here is that 52.
And again, I'm not going to choose now multiple
to show you how it works
because that will take up too much time.
All right.
Then just some margin on the bottom, let's say 32 pixels.
And then let's also style this paragraph.
And this will then also style that one
which is not really relevant anyway.
So font size of 20 pixels.
So you see that usually I start
with these visual text styles.
Let's also add some line height of 1.6
and then some margin to the bottom
because remember that afterwards comes the button.
All right.
So let's take a quick look at what we have.
Great, that looks very nice.
And now again, making this button look like this.
So it is slightly rounded corners
and this beautiful orange color.
So that is called the button.
And as always, we need to style the visited state
and actually first even the link state.
So always in this order.
So let's give it a font size of 20 pixels.
A font weight, we selected 600 as well.
Actually, we did not.
So instead of 500, let's actually select 600.
So to make it bold but not quite as bold,
because that looks strange a little bit.
So 600 is just nice for buttons usually.
Then that background color.
And here I'm just gonna give you the hexadecimal code.
So e67e22.
All right.
And the color then of course needs to be white,
otherwise we're not gonna see anything.
And we also need to get rid of the underline.
So text decoration, none.
So part of the button should be done now.
All right.
But now of course we need some spacing around it
and the rounded corners.
So for that, we need some padding
and if we want to apply padding,
then we should make this an inline block
and not just an inline element as it is by default.
So inline block.
So this is hopefully starting to get routine at this point.
So 16 pixels.
And as usual, I like to give left and right
the double as top and bottom.
So this one is the value on top and bottom
and this on left and right side.
Remember?
And so now border radius,
and here, let's say nine pixels.
And there we go.
So that looks very beautiful.
So all that we need to style is this H2 here
and maybe add some padding to this entire section as well.
So H2, 44 pixels,
which I think is the value below 52, right?
And some margin to the bottom of 48 pixels.
All right.
And finally, add some padding to the section.
So 96 top and bottom,
and the sides don't need any padding at all.
Okay.
And I'm doing this all quite fast
but once we actually start designing
and building the omni food project in the next section,
then I will go over these design decisions
a little bit better.
But anyway, let's now compare this
a little bit to this one here.
And the first thing that we noticed immediately
is that all of these boxes are kind of centered.
So this one here and all of this here
and also in a way, this box here.
I mean it doesn't really look centered,
it looks more like it's aligned here,
but still, if we change the width here,
then you see that still it kind of is centered.
So that's what I mean with centered.
So let's now create a class
which will take care of only doing that.
So we could of course add now the styling of this.
So margin zero and auto, right?
But then we would have to add that to every single element.
So every single box that we want centered in the browser.
But we don't want to do that.
So for that, we can create something like a utility class
and then simply add that class to all the elements
that we do want centered.
So let's add that here, and I'm gonna call it container.
So that's a pretty common name.
And then I'm adding that property here.
And so now in our HTML, we can add that class here.
And here.
And also to this div here inside of the section.
All right.
So now this section here itself is not centered,
but then this div is centered inside of it.
And this again, is a pretty normal technique.
Now, we could have centered the entire section here
and also the entire header,
but we actually do want these
to go from side to side of the view port.
In this case of the header,
because we later want to give it a background image,
and well, in case of the section,
because imagine that it had
some background color, for example.
Now, actually, there is one thing missing here
because remember that we always
need to specify a fixed width for the container.
So for the element on which we use this trick.
So let's say that we want
all of these here to be 1200 pixels wide.
And so now they will indeed be centered.
And there we go.
Let's see.
Yeah, that works just nice.
And now as I was saying with the background colors
and the background images,
let's actually now add some colors
so that we can see what I just mentioned.
So to the nav, let's add a background color green,
then let's see what else we have here.
Well, the container,
we actually don't want to give it a background color
because then all of them would get the same one.
So for now, let's just add one here to this section.
And here, let's add this very light gray that I like to use
which is f7f7f7, right?
And actually let's shortly add a color to the container.
Red.
Okay.
And so now here is what I meant.
So that we have now this content here centered
and not the entire section
because to the section we do actually
want to apply this background image.
And if we centered the entire section,
well, then we couldn't give it
any background color around it.
So not some background color that would go all the way
from the left to the right.
Now I see that we do have some margins here
like on the sides of the page
and that's because we didn't do our general reset here.
So I forgot that somehow.
But this is something that we must always do.
So by default, setting all margins and all paddings to zero
and also use the alternative box model.
So by using box sizing set to border box.
Great.
So that's better.
So now, let's actually do that thing
where we make the header the entire height of the view port.
So all of this, because that's actually not very hard,
and so we can do that right away.
Now, the navigation here somehow is not green.
Ah, but sure, that's because we gave
all the containers the red color.
So let's remove that, right?
And let's now add some styles to the header element.
So to start, let's just make it green
or some other background color.
Let's say orange red.
So before we make it 100% tall.
Okay.
So that's what it looks like now,
but now it's time to do what I just mentioned.
So we want to set the height of it,
but now we can actually not set 100%.
So we cannot do this because this will simply not work.
Instead, what we need to do is to use a new unit
that we have never talked about.
And that unit is called view port height.
So VH.
And that's actually it.
So basically this will be 100% of the available view port.
So if we give it a save,
well, then that's exactly what happened.
So it's now 100% of the view port.
So it ends exactly down here.
And if we shrink this, down,
well, the height keeps being
at 100% of the available view port right now.
All right.
So this is a trick that we use all the time.
So VH, which means view port height.
And of course it could be
any other value here, let's say 50,
and then it would be exactly half of the view port.
And of course, it could be even more, like 150.
Then it would be essentially
one and a half of the view port.
All right.
But usually we don't do that,
we just leave it at 100 or some lower value.
Now, there's also another similar unit, which is VW,
which stands for view port width.
However, we don't need to use that here.
And in fact, we very rarely use that one
because since these are all block elements,
they will already occupy
100% of the available space by default, right?
So no need for that.
All we need to specify is the height.
Okay.
So this was actually the first part of the video.
So we managed to do these basic things,
some basic styling and some very basic layout.
So let's take a small break here
and then when we come back,
we will actually center this entire box here vertically
and we will add that beautiful background image.
So I'll see you back here after a small break.