All right. 1
In this section, we're going to learn by doing. Instead of learning Webflow feature by feature, we're 2
gonna, actually learn it by building our home page, that we have already designed. And little by little. 3
One step at a time. 4
Step by step ferociously. 5
Remember? Where you're going to learn all the ins and outs of Webflow. 6
Only as we need it. 7
I'm not going to cover any feature until we actually come to a point where we actually need it, to use 8
it while we are doing and building our home page. 9
So what we're gonna do is take that design that we have made, and then each section by section we're 10
going to go over it and kind of recreate and rebuild it inside Webflow. And let's start simple, with 11
our content on the left side on the hero section. Before you start building something in Webflow, 12
first, you have to plan in your head what sort of layout is going to be needed. 13
So, what do we have here? 14
We have a blue background. In Figma 15
we use a rectangle for that. In Webflow, 16
we don't have such things as rectangle. 17
We have boxes instead. 18
There are three types of empty boxes in Webflow. 19
You can find them right here in the elements panel. Elements panel is where Webflow keeps all the new 20
elements we need. 21
It's divided in neat categories like typography, where you have a heading, paragraph and all text related 22
elements. 23
So we have 3 empty boxes for our general use: Section, Container and a Div Block. A section is exactly 24
what it says. It's an empty box where we can organize a section of our page. Which is exactly how we have 25
our designs organized, don't we? 26
We have a hero section, then several sections below, 27
finally the footer section. 28
Those are all sections. And that's how we're going to organize inside Webflow as well. 29
Container is where we put the content of our page. In our designs, it's everything we have put in the 30
boundaries of our grid. 31
The most popular box in HTML is a Div Block. Short for a Division Block. 32
It's an empty box. And most useful, most basic building blocks of a webpage. 33
It's under Basic category. 34
So, which one of these do we need first? 35
Obviously a section. 36
So let's add a new section to our page. Section and the Div Block are identical elements. 37
They work exactly in the same way. 38
So, everything I describe for a section right now applies to the Div Block 39
too. 40
There is only one difference. You can't put a section inside another section. But with Div Blocks you 41
can, as much as you want. 42
So a section or a Div Block is an empty box. 43
There is nothing in it. This box doesn't actually have a height until we give it some height. 44
Webflow is showing us a little bit of height temporarily, so we can notice it and don't drive ourselves 45
crazy looking for it. 46
It's a stretchy box too. 47
When you place other elements inside it, it will grow to match the height of its child element. 48
Let's give it a color, so we can better understand what happens to it. 49
We can do that from Backgrounds. The basic things inside the style panel is very similar to Figma's 50
properties panel, so very easily you can work with it. 51
Now, if we enter the preview. The section disappears. 52
Why is that? 53
Because it's empty and has 0 pixel height. It's invisible. Webflow just gives it a temporary height. 54
just inside 55
the Designer. 56
So to help us to see it. If we drag an image element inside, it's going to stretch from 0 pixels to the 57
exact height of that image element that we just put inside. 58
Now the whole thing is visible in the preview mode as well. Because it's not zero pixel height anymore. 59
If you put something smaller inside, like a small text. Then is gonna shrink 60
But it didn't actually shrink. It was 0 pixels. It just shrank only inside the designer, because it had 61
this temporary height. 62
Hope you're getting a hang of it. 63
I remember this strange behaviour was a little confusing for me in the beginning. 64
So I wanted to clarify from the start, so you understand. And you also understand the basic logic of how 65
the structure is formed on the website. 66
Give it a go yourself right now. And then we'll continue styling our section.