On this Webflow lesson we structure our homepage based on our previous UX Essentials course. We also learn how expand sections using VH units.
Take a moment to download this Webflow Template so you can practice, experiment and use however you want!
All our project files for you to practice and play with along with some bonus materials.
Student reviews coming soon
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
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.
Access our premium community including all courses, resources & offline downloads.UNLIMITED ACCCESS