Original subtitles

Hey there, and welcome back

to writing some more code.

And this lecture is going to 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 going to build

in this lecture.

And it actually has the content of the Omnifood 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 Omnifood section

or actually, our Omnifood Project.

So you see here this beautiful background image,

which spans all across this viewport.

So it has exactly the height and the width of the viewport.

So if we change this here,

you can see the image changing,

right?

And we can even of course,

change the entire window

and noticed how the text always stay centered.

So basically this entire block here,

it always stay 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 Omnifood 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

and especially, filling here the entire height.

So I think that this is an exciting small project,

and 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.

Let's 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 Omnifood

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.

Now 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 viewport.

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 a 'nav' element.

And then here,

we would 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 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 food 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 H-ref,

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 handy 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.

And 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, 4-, maybe 5-, 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 sans-serif typeface.

Okay.

And as the text color,

let's just use some gray here:

4-4-4.

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,

or a 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 these 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 going to give you the hexadecimal code:

so E-6-7-E-2-2.

All right.

And the color then of course needs to be white,

otherwise we're not going to 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.

And 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.

And 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 Omnifood 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 notice 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".

And 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 an 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 going to 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 viewport.

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 with 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, well the container,

we actually don't want to give it a background color

because then all of them would get the same one.

And 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 F-7-F-7-F-7.

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.

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.

And so now, let's actually do that thing

where we make the header the entire height of the viewport.

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 'viewport height'.

So 'vh'

And that's actually it.

So basically this will be 100% of the available viewport.

So if we give it a save,

well, then that's exactly what happened.

So it's now 100% of the viewport.

So it ends exactly down here.

And if we shrink this

then,

well, the height keeps being at 100%

of the available viewport right now.

All right.

So this is a trick that we use all the time.

So vh, which means viewport height.

And of course it could be any other value here,

let's say 50,

and then it would be exactly half of the viewport.

And of course it could be even more,

like 150,

then it would be essentially

one-and-a-half of the viewport.

Right.

But usually we don't do that.

We just leave it at a hundred, or some lower value.

Now there's also another similar unit, which is 'vw',

which stands for a viewport 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.

And 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.