Instructor: 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 our 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 up 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 older 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 a 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 layouts
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.