Webflow Sections and VH Units

All right guys.
This is exciting. Welcome back.

I wanna show you what I do next once
I've establish some of the basics styles.

If we remember back in the wireframe
stage in Figma in the previous course

we establish some sections, these are
the main sections of the landing page

this is exactly what we wanna do
so let's jump in to the home page

and using the + icon I'm gonna add
a couple of sections.

This first section we are gonna add
inside of that section a heading of

the H1, and this is going to be called
the Intro and we can duplicate this

exact section multiple times like
that, and just change it to whatever

the section is based on the design
that we have started right.

So we know for sure the homepage
has the Intro then we have the

features, the products, the parallax
and the sign up.

But before I do that I wanna create a
class on that section, so when I click

on the style panel I'm gonna call
this section "Section" and I'm going

to just make the size of it so that
it expands all the way to the 100%

of whatever the viewport height is.

So whatever device I'm coming from
and if it's a mobile device or if it's a

desktop or a macbook air or whatever
I want that to detect 100% of the size.

But the problem is, 100% is not really
gonna work the way for us to get the

actual percentage of the viewport we
need to use a different unit.

For that reason we have the VH unit
which is Viewport Height.

100% of the viewport height then that
section it's expanding all the way down

to the 100% of this particular viewport
that we are looking at, right now.

And if I add that section over to this
one over here, it's gonna duplicate that

class over to the next section, so let's
go ahead and add our sections.

Cool, so if I click on the preview icon
I can see now that the whole page

is a lot taller and it contains all of
our core sections. Right

We could even have background color
so that we identify, I typically like to

just add a simple border so if I click
on borders over here and I say

Ok I want the style* to be a solid border
with a with of 1px and I wanna make it

red, so I select that and if I click
preview all of those boxes or sections

are market by that border and I can
scroll down to see how much space

each one of these sections is actually
taking.

The reason I do this is because it
helps me visualize when I start adding

the navigational bar, when I click on
each element I want it to scroll down

to this specific spot and so we are gonna
see how we do that in the next lesson.