Original subtitles

This entire section is all about building layouts.

And so before we actually start doing that,

let's talk about what layout actually means.

And also the three major ways in which we can build layouts

in CSS right now.

So in web design and web development, when we say layout,

what we mean is basically the way that text images and all

the other content is placed and arranged on the webpage.

So here on the right side,

I have an example of a very simple website and

there are a couple of pieces of content,

and clearly they are arranged in a certain way, right?

And so again,

the way in which they are arranged and placed here on this

website is the layout of the design, essentially.

So the layout gives this page,

what we call a visual structure,

and then into that structure, we can place the content.

Now, one of the main jobs as front-end developers.

So as HTML, CSS and JavaScript developers

is to build layouts,

which is the reason why we have an entire section on

building layouts alone.

So according to this definition of layout,

building a layout means to arrange page elements

into some kind of visual structure,

instead of simply having all of four elements.

So all of our content basically placed one after another.

Just imagine that in this example website,

all these seven pieces of content would simply be laid out

one after the other.

That wouldn't look very interesting visually, right?

And it also would it make a lot harder to actually

understand the content that is being transmitted here.

So layout exists for a reason because it makes our sites

easier to understand

and also makes it visually more pleasing.

Now, there are basically two types of layouts

which are page layout and component layout.

So page layout is basically what I've been talking about up

until this point, which is laying out the elements,

so the big pieces of content

inside of a webpage or a website.

Now on the other hand,

these bigger page layouts are themselves made of of

components like this one.

And these components themselves need to have some kind of

layout because these components themselves

are made out of smaller pieces of content,

which also need to be arranged in some kind of way.

And so we can say that components themselves

also have a layout.

So once again,

we wouldn't want to have these 12 pieces of content simply

laid out one after another, right.

That wouldn't make a lot of sense.

And so therefore we also need to give the smaller

components, some kind of layout.

Okay, so now that we know what layouts are

and what type of layouts we can build, now,

let's see how we can actually build them with CSS.

And the first technique of building layouts in CSS

is using float layouts,

which is basically the old way of building layouts

using the float CSS property.

Now these types of layouts are quickly getting replaced by

newer technologies, such as Flexbox and CSS grid,

but in some cases they are still being used and especially

on all their websites.

So we will still learn how to build float layouts,

just so you know,

how they work in case you ever see one at some point in your

career, for example, when you're working on

an older website, but for the main part,

we will then quickly move on to one of the newer ways of

building layouts, which is using Flexbox.

So Flexbox is one of the modern ways of laying out elements.

And in the case of Flexbox,

it is perfect for building one dimensional layouts.

So basically a layout,

which is just a row and all without using floats.

So Flexbox might be perfect for simpler component layouts,

just like we saw in the last slide.

Then the other modern way of laying out elements

is CSS grid. So with CSS grid,

we can actually build complete two dimensional layout,

which is perfect for big page layouts and also more complex

components. Like the one that we saw in the last slide.

So Flexbox and CSS grid have completely revolutionized the

way in which we build layouts in CSS right now.

And so we will spend most of the course learning them and

using them in our big website project later.

But for now let's actually start quickly learning float

layouts in the next lecture.