Original subtitles

Welcome back to the next lecture

where we will now finally start building

our Omnifood project.

And we're going to start with the hero section.

And for that, I already created this sketch here.

So as I mentioned before, we will create this layout

where we have the hero image on the right side,

and then the content such as the headline

and some description on the left side.

So exactly like these two examples that I have selected

from our a layout gallery lecture.

Now, on top of the section,

there is kind of this logo and the navigation bar,

but this is something that we will do a bit later.

So it's actually not part of the hero itself,

but it's kind of part of the start,

of the beginning of the website.

And so that's why I put it here as well.

Now, also we will add to this small component

that I have highlighted in red here in the bottom,

which is these customer photos

and then with some relevant data.

So that was not in the sketch before,

but now here I have it and you will see that it makes sense

with the content that we have.

Okay.

And so now let's actually start building this hero section

in VS Code.

And let's start by removing what we did previously.

Okay.

And now I want to show you a very nice and important trick,

which basically will allow us to have the HTML and the CSS

files opened at the same time, side-by-side.

So to do that, I will open again, the CSS file,

and then I can click here on this icon.

So this one that says split editor right.

Now, if you cannot see it,

you can also do the same thing here in "view"

and then "editor layout".

So you can then choose one of these options here,

but usually I just click here and then that will open this

exact same file here on the right side.

Okay.

Then I can close it here and then to give ourselves

some more space, we closed down the sidebar and that's it.

So here we usually need more space for the HTML

and yeah, I think that's perfect.

And so now we can basically work on both files

at the same time.

All right.

But now about or actual hero section here,

let's indeed use a section element,

which basically represents a generic part of any document.

So let's use section here and then give it to class

of "section-hero".

So I usually like to give all my sections then a class name,

which also starts with section.

So that then makes it easy to identify, right?

So we talked about section,

so the section element before,

and it is a little bit similar to the article element,

but the article is more self-contained basically.

So for a section to exist,

there should usually be multiple sections,

which are then part of something bigger, right?

So let's then...

Well, let's move that in later.

For now, let's actually keep going.

And so now I want to create the two boxes

which will then contain on the right side, the image

and on the left side the text content.

So let's create a div element for that,

which remember is simply like a box

which has no semantic meaning at all.

So I'm gonna call this one the "hero-text-box"

and that is the one that will contain among other elements

this H1 hero, and then we also want the hero-image-box.

So hero-image-box,

and then we can immediately actually put the image in here.

So that is in the folder, IMG/

and then it is our hero image.

Now, you see that it worked because it's already right here.

Okay.

But now let's keep going and add some more content here.

So our content of course is here in the MD file.

So this is the one that we already have,

so the headline,

and then here is this a summary basically.

So let's just copy all this texts.

I'm gonna call this one the "hero-description"

and there we go.

Here, let's also add a class

for heading-primary.

Okay.

Because then later we will have some classes also

for the secondary and tertiary headings.

So the H2 and the H3 elements.

And of course we could simply select the H1

using this H1 element selector, right,

but actually I like to always select all the elements

using classes so no ID selectors and no elements selectors,

everything will always be selected using classes

because that will give our CSS code a lot more consistency.

Okay.

So we have the heading, then we have the description.

And now we also want two buttons here below this.

So just like in that layout pattern example

that we saw at the beginning of this lecture.

And for that, I'm actually going to use an anchor element,

so a link basically,

because links are foregoing somewhere on the page

or going to some other page

while a button element should only be used for actions.

So if something happens that is not related to navigation,

basically.

So here for now, we will create an empty link.

Okay.

And then let's see if in the content we have some texts

to put on the button, but actually there is nothing

and so these types of small texts,

so just a small piece of text, we usually call microcopy.

And many times we have to come up with those as we design

and build the websites ourselves.

Now this button here is going to be the main call

to action button of this page.

And so let's not think what we could write there.

So the main action that we want to use it to take here

is to basically subscribe to the Omnifood subscription,

right.

And so here we should write something related to that.

And since the focus of this company

is all on like healthy eating and things like that,

we can simply right here, "start eating well" for example.

Okay.

And it could be of course, anything similar,

but it should be like a specific action.

So it wouldn't be really helpful to just write here,

"sign up now" or "buy now" or something like that.

So that doesn't sound so nice

and so instead we want a very specific action like this

which makes the user feel better immediately.

So "start eating well" I think it's a lot more compelling

than like "sign up now" or "subscribe now" right.

And here, just adding the button a class, you know,

besides that we want another button,

which is usually like a secondary button,

which is going to be a secondary button.

And this is usually used for something like

getting additional information.

So a popular text here is simply learn more.

And then we can add some arrow here as well.

So using an HTML entity and we already used R

and then, I think, this here, which is the right arrow.

Yeah, you can see it there in the tool tip,

but then we also have DR which stands for down arrow,

and again, it's visible now they're in the tool tip.

And so this makes a bit more sense in this case.

Okay.

And with this, I think we are ready to check out

what we have already.

And as always, the image is really big

and so remember that we need to make it flexible now.

So that's one of the ingredients of responsive web design.

Remember that then there is also the rest of the content

and so let's now start styling this a little bit

and actually starting with the layout.

So putting these two boxes here, side by side,

so one with the image and one with this text, okay.

Now for doing this, I'm actually going to use CSS Grid,

even though it's actually more like

a one dimensional layout, so it's a really just a row,

but I'm still going to use CSS Grid

because it makes it really easy

to have equally sized columns

and also because I like to use the same tool for layout

across the entire page.

And later, of course, we are going to use CSS Grid

for some other layout stuff and then,

yeah, as I said,

I like to just use the same thing everywhere.

No, right.

But even if we used flexbox instead of CSS Grid,

we would still need some container element

for these two boxes, so the image-box and the text-box.

Right.

So that grid container could of course be this section here

or here, right.

But then if we were to choose this one as the container,

then we couldn't create a fixed sized container

like we want to, okay.

So let's actually create another element here.

So one that I'm going to call a "hero".

And if this doesn't make a lot of sense right now,

it will make sense in a minute once you actually see

what I'm talking about, okay.

So again, this hero here will actually be

our CSS Grid container.

So let's select that.

And now you can see how handy it is

to have these two panels here, side by side, right.

So display grid,

and now, as I said, we will make two equally sized columns.

So grid-template-columns, remember.

And so here, we just need to give them the same value.

And so usually that's 1fr and then another 1fr.

So two fractional units right there.

And so with this, they should now be side-by-side

and indeed they are,

but they do not have the same size, right.

And the reason for that is this huge image

which is still not really flexible.

So before we do anything else, let's actually fix that.

And so here, let's give it a class name.

So it's the "hero-image".

Oh, and actually we need to add the art-text as well.

So never forget to do that.

And so here, let's say that it's "a woman enjoying food"

but that's not all, there's also "meals in storage container

"and food bowls on a table."

So it really descriptive all text here,

but that's really nice for people who cannot see

these images or also remember for search engines.

Yeah.

And now selecting the image with the class we just gave it,

all we have to do now is to give it a width of exactly 100%,

because 100% will then fill the entire parent element

which is this hero-image box here,

which is exactly one of the two columns of the grid.

And so that column will have half the size

of the grid container and so then the image

of course, will also have half the width

of the container now.

Okay, and if we resize this year,

then you see that indeed the image does resize as well.

And so it is already at this point a flexible image.

Okay.

But now let's actually do what I mentioned to be the reason

why we need this hero element here,

which is to give it a fixed width, right.

So remember that we used to use the width property for that,

and I'm going to give it a 1300 pixels

but remember from the last lecture

that we will no longer use pixels now, right.

And remember what instead we use,

well, we use the rem unit,

which before we set one rem here to being exactly 10 pixels.

Right.

And so here we do not want 1300 pixels, but we want 130 rem.

Right.

So that's one thing that we needed to fix here

and the other one is actually this width property,

because what happens like this

and let's actually give it some background color here.

So just some random color here.

And so now let's decrease this a little bit.

And while just, as I mentioned in the last lecture

now, of course, this element does not adjust

to the view port, so to its parent element.

And so therefore we then created this vertical scroll bars,

which is of course not what we envision

for a real world website.

And so indeed what we want is max width, right?

And so now when the element is larger than the container,

it was simply occupy 100% of it.

And so you see that this starts to look quite nice, right?

So quite real world, at least.

And so then once it becomes larger than the specified width,

then it simply stays here.

Okay, let's get rid of this.

And then of course, we also want to center it

in the view port and for that we're actually going to use

our old trick of margin 0 auto.

Okay.

And so this is starting to look like a usable layout

that we can now improve upon.

And so let's do that next and take a small break now.