-: Welcome back to the next lecture where we will now
finally start building our Omni food 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 layout gallery lecture.
Now, on top of this 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,
so of the beginning of the website
and so that's why I put it here as well.
Now also we will add this small component
that I have highlighted in red here in the bottom,
which is the 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 close 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 our 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 the 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 diff 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 here
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 then slash
and then it is our Hero image.
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 summary basically.
So let's just copy all this text
then 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 the tertiary headings
so the H2 and DH3 elements.
And of course we could simply select DH1
using this H1 element selector, right?
But actually I like to always select
all the elements using classes.
So no ID selectors and no element 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 forgoing 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 text to put on the button
but actually there is nothing
and so these types of small text
so just a small piece of text we usually call micro copy
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 now think what we could write there.
So the main action that we want the user to take here
is to basically subscribe
to the omni foot 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 write 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 right 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?
Then 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 tier 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 year, 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 there 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 here's 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 which is 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 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.
All right?
But even if we used flex box 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 Hero, 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 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 alt 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 a really descriptive alt 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 here
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 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 watch 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 create these 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 will 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 with
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 zero 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.