0
1
00:00:00,180 --> 00:00:04,630
Before we get on with building our page, first I want to explain the structure of a web page.
1

2
00:00:04,650 --> 00:00:08,900
Every web page is structured in a so-called Box Model. For the HTML
2

3
00:00:08,940 --> 00:00:13,050
every element is, in reality, a box. No matter their final shape and content,
3

4
00:00:13,050 --> 00:00:18,750
they all start as a box. And all of those boxes actually sit inside other big boxes. All the way down
4

5
00:00:18,750 --> 00:00:21,380
to the final big box where everything else sits.
5

6
00:00:21,420 --> 00:00:22,650
And that's our webpage.
6

7
00:00:22,680 --> 00:00:27,660
When we were designing our navigation bar in Figma, we simply dragged our links exactly where we wanted
7

8
00:00:27,660 --> 00:00:32,880
them to be placed. But Figma and other designed tools use a different model, the layer model.
8

9
00:00:32,880 --> 00:00:38,580
You can think of it as paper shelves. In Figma, every new object sits on top of existing object. Not above
9

10
00:00:38,580 --> 00:00:44,190
it, but right on top of it. It basically creates a new layer of space and is the king and only citizen
10

11
00:00:44,190 --> 00:00:45,200
of that space.
11

12
00:00:45,240 --> 00:00:50,280
And if something else is directly underneath it, the lower guy won't be visible at all, until we actually
12

13
00:00:50,280 --> 00:00:51,970
push it up in the layer panel.
13

14
00:00:52,050 --> 00:00:55,410
Exactly what happens when you place papers on top of each other.
14

15
00:00:55,560 --> 00:01:02,160
Now web pages are more like drawer organizers. When a drawer is divided into boxes. Which on their own can
15

16
00:01:02,160 --> 00:01:04,860
be divided into even smaller boxes. In drawers
16

17
00:01:04,860 --> 00:01:09,260
things don't usually go on top of each other, they go either below or next to each other.
17

18
00:01:09,270 --> 00:01:15,570
So when we build our navbar using HTML, we first are going to take an empty box and put our logo
18

19
00:01:15,570 --> 00:01:17,340
and link boxes in it.
19

20
00:01:17,340 --> 00:01:23,250
The bigger box is called the parent. And smaller boxes inside are called children. And those children
20

21
00:01:23,250 --> 00:01:25,230
boxes are each other's siblings.
21

22
00:01:25,230 --> 00:01:29,700
Just the way you'd expect it. By default, they're going to come one after the other, because that's how
22

23
00:01:29,700 --> 00:01:31,640
HTML works without CSS.
23

24
00:01:31,650 --> 00:01:37,500
Then we're going to apply a CSS style, so all of these boxes are arranged horizontally. Then using other
24

25
00:01:37,500 --> 00:01:42,840
CSS properties and a couple more boxes, we can distribute them in exactly the way we want.
25

26
00:01:42,840 --> 00:01:45,590
Don't worry you'll get the hang of this in no time.
26

27
00:01:45,660 --> 00:01:50,900
If you ever get stuck trying to figure out how to make something work, the solution is most likely - another
27

28
00:01:50,910 --> 00:01:56,220
box. Webflow is kind enough to show us the boundaries of our boxes. When you click on any element, it
28

29
00:01:56,220 --> 00:01:59,430
will show you the full box that this element occupies.
29

30
00:01:59,430 --> 00:02:04,710
As you can see, even though our headline is short, the box stretches on the entire page.
30

31
00:02:04,710 --> 00:02:10,380
That's the default behaviour of most HTML boxes without any CSS applied to it. And by default
31

32
00:02:10,380 --> 00:02:15,290
all of these boxes come one after another unless you put them inside another box.