Original subtitles

To finish the section,

let's now build a typical web application layout.

And this is going to be a great learning project.

So let's get started.

And so here is the layout that we're gonna build

throughout this lecture and the next one.

So it's not very styled,

and it's not very detailed,

but what matters here is the layout itself.

So basically, we have some site navigation bar here.

So this would be for things like the image,

and maybe some profile menu or things like that.

Then here in the top,

we have a menu bar,

so basically for actions for this application.

And what we're making here

is basically a fake email application.

And so these menu items here are related to emails.

So new email, reply, forwards,

mark as unread,

and then also all the way here to the right side in red,

this trash button.

Then here we have the section

where we have different emails,

so where we can see all the emails in some inbox,

and then notice how we can actually scroll here.

So that's really nice feature

and it's actually very easy to do.

Then here in the middle,

this is kind of the main part of the fake application,

and then also here is like the sidebar,

which has some additional information on this email.

And this whole application layout

is of course exactly the height

and the size of this viewport here, all right?

So, this looks like fun I hope.

And so let's now actually get started.

So let's just review the main elements that we need,

are this navigation here,

then this menu bar,

then we have this section right here,

then this one

and then this one, all right?

So let's give ourselves yet another new file here.

So, 06

app layout.HTML.

Then we will again start from scratch here.

So exclamation mark, and then tab or enter,

and then let's get started.

And our HTML here is actually very simple.

So we have a nav element

and here I'm simply gonna write nav actually.

Let's use lowercase.

Then after that,

we have that menu bar.

And so here is a new HTML element,

which is exactly called menu.

So what's the difference between nav and menu you might ask?

Well, the nav element is for a typical navigation of a site.

So navigation, which contains a bunch of links,

which then points to other places in the application.

Menu here, on the other hand,

is actually for like menu buttons

in an actual web application.

So we use nav all the time,

so it's a very commonly used element,

but menu, not so much.

It's only used when we build a web application.

But that's the case right here

and so now we need this element.

Here for now,

I'm just writing menu.

Then here for this inbox view,

I'm going to use a section element.

Then for the main email view,

I will use the main element because this one, remember,

is really used to display the main piece of content

of the document.

So the most important one.

And so in this case,

that is basically the email itself.

Then that additional information

is exactly the main use case for the aside element.

So additional info

and for now that's actually it.

These are the four parts,

or actually five parts

of our application layout.

So I'll give it a save and then let's go back here,

removing this part here,

and then here is the app layout

and there we go.

So you see that actually for the menu,

HTML automatically applies some default,

a margin or padding here,

but that's not a problem,

because of course we're going to get rid

of all of that right now.

So again, doing everything in the same of file here,

let's start with our global reset,

margin zero

and padding zero.

And of course,

box sizing, for the box.

Nice, then let's start with some visual styles as always.

Now in this case,

I'm actually not going to include any third-party fund

and instead of just go with this one.

Now, the color,

well let's actually use the one from before,

or this one here.

And let's also give everything a nice,

font size of 24 pixels.

Okay, and now let's just style our different pieces here

with some background color as always

because that always makes it a lot easier

to see what is actually going on.

So this navigation bar had this color,

then the menu has that nice violet color,

and let's actually get that from open colors again.

So violet is one of these colors

that I really like for UI design.

And while this one here looks nice,

I think that's the one I am using.

Then of course the color needs to be white in this one.

And then also the aside

and the section,

have some different background colors.

So background color,

and let's go get dead gray color again.

So I think this is the one that we have been using

and actually the same also for the section.

Let's put the section here first,

and all right.

So that's it for the visual styles, right?

And so now we're actually ready to build that layout itself.

So let's analyze our original layout

so that we can think a little bit how we will do this.

So this layout here is very clearly

a two dimensional layout, right?

And so therefore, of course,

we're going to use CSS Grid to build it.

Now, how many columns and rows do we need?

Well, let's easily count them.

So one column right here,

then next one here to inbox, another column,

the email view, another column,

and this one here, yet another column.

So that looks like four columns.

And then as for the rows,

we have this one and this one,

so just two rows.

Now let's just see what happens when we make this smaller.

So, you see that this column and this column stays the same

and this one in the middle

basically occupies the remaining space here, right?

And so with this I think we have enough information

to build our layout with CSS Grid.

And which is actually the parent element of all of this.

So all of these,

or in other words,

what do we want to be our grid container?

Well, we can simply use the body, right?

That's not a problem at all.

So, this play grid

and now grit template columns,

and that first column,

so that navigation bar basically,

let's make it 80 pixels.

Then that inbox is the second column,

I will make that 400 pixels.

And as always,

these values are kind of random.

Then the third column remember is the main view,

so the email view,

and this one is supposed to occupy all the remaining space.

And that means when it comes to CSS Grid,

that it should be 1fr,

right?

And then finally, the fourth column,

which is the additional info

has also a fixed width,

and so let's choose 250 for that.

All right, and now the grid template rows,

which sometimes we do actually not define, remember,

but in this case,

since we want to fill the entire screen,

we will basically do it,

here automatically in the rows.

So the first one is fixed,

again, 80 pixels for that menu bar.

And then here the second row,

we wanted to go all the way to the end.

Or in other words,

we wanted to occupy all the remaining space,

all right?

However, this is not yet going to work as we expect.

So let's see that.

And while first of all, of course,

these elements are not yet in the right position,

but also the second row

is actually not going all the way to the end here, right?

Now, why do you think that is?

And let's actually inspect this

because we will be able to find the answer there.

So here we have to body element

and you see that it does indeed end

right here after this element.

So the height of the body is in fact only 136 pixels.

So just like any other element,

the body element does not magically occupy

this entire space here, all right?

It only occupies, well,

the place that it needs for its content.

And so that's only until here.

So what if we want, actually,

for this row here to go all the way to the end.

In that case,

we need the body to be as high as the viewport, right?

Well, luckily for us,

we already learned how to do that, right?

So the solution is to set the height

to 100 viewport height units,

okay?

And there we go.

So now it occupies the entire space

and we see that our body is now 503 pixels high.

And of course,

if we make it higher and lower,

then this value changes,

okay?

But now let's actually place all these five items

in the correct position.

So, first this navigation here,

it goes all the way from the first row

to the end of the second row.

So it spans across all of this.

Then, also the menu

spans across this column and this one and this one, right?

So the grid lines here are one, two, three, four and five.

But well, why not actually show it to you?

So,

yeah, this is the one.

So here we see the grid lines, right?

And so this one here,

will go from two all the way to the end,

right?

So let's do that.

So we want to span across multiple rows

here in the nav, right?

And so we say grid row from the first,

all the way to the end.

And let's actually not specified that manually,

but instead we can do it automatically with -1.

Remember that?

And so if for some reason we were to add another row,

then this navigation

would still go all the way until the end, all right?

Then we have the menu here,

which we want to span across multiple columns.

And so we use the grid column.

So this starts in the second

and again goes all the way to the end.

And so this is where our -1 trick gets really handy,

okay?

And then the other ones should be automatically placed

and indeed, they are.

Great, so let's see what happens

if we make our viewport smaller

and then that's exactly as expected.

Beautiful.

Now let's just style this here a little bit nicer.

So the color might be white.

Then, let's also center the text in all of the elements.

And for that,

we can actually set it in the body

because text align does actually get inherited.

And let's also make the font-weight bold,

which again will get inherited.

And so usually we don't put these things on the body,

but since we have such an easy page

and such an easy layout,

well, we can simply put it here

and then it will get inherited.

Now let's just add some padding here

to all of these elements.

So the nav,

menu,

section,

main

and aside.

So basically all of them.

Let's give them some padding at the top of 24 pixels,

but this is really just a small cosmetic change.

All right?

Beautiful.

So we already did our layout,

so that's pretty nice already.

So, this looks already almost the same,

but now we're just missing two things.

So two a little bit more detailed things,

which is this menu bar with these buttons,

and then also this kind of inbox view here, right?

And so let's do these two things in the next

and final lecture of the section.