Before we get on with building our page, first I want to explain the structure of a web page. 1
Every web page is structured in a so-called Box Model. For the HTML 2
every element is, in reality, a box. No matter their final shape and content, 3
they all start as a box. And all of those boxes actually sit inside other big boxes. All the way down 4
to the final big box where everything else sits. 5
And that's our webpage. 6
When we were designing our navigation bar in Figma, we simply dragged our links exactly where we wanted 7
them to be placed. But Figma and other designed tools use a different model, the layer model. 8
You can think of it as paper shelves. In Figma, every new object sits on top of existing object. Not above 9
it, but right on top of it. It basically creates a new layer of space and is the king and only citizen 10
of that space. 11
And if something else is directly underneath it, the lower guy won't be visible at all, until we actually 12
push it up in the layer panel. 13
Exactly what happens when you place papers on top of each other. 14
Now web pages are more like drawer organizers. When a drawer is divided into boxes. Which on their own can 15
be divided into even smaller boxes. In drawers 16
things don't usually go on top of each other, they go either below or next to each other. 17
So when we build our navbar using HTML, we first are going to take an empty box and put our logo 18
and link boxes in it. 19
The bigger box is called the parent. And smaller boxes inside are called children. And those children 20
boxes are each other's siblings. 21
Just the way you'd expect it. By default, they're going to come one after the other, because that's how 22
HTML works without CSS. 23
Then we're going to apply a CSS style, so all of these boxes are arranged horizontally. Then using other 24
CSS properties and a couple more boxes, we can distribute them in exactly the way we want. 25
Don't worry you'll get the hang of this in no time. 26
If you ever get stuck trying to figure out how to make something work, the solution is most likely - another 27
box. Webflow is kind enough to show us the boundaries of our boxes. When you click on any element, it 28
will show you the full box that this element occupies. 29
As you can see, even though our headline is short, the box stretches on the entire page. 30
That's the default behaviour of most HTML boxes without any CSS applied to it. And by default 31
all of these boxes come one after another unless you put them inside another box.