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