0
1
00:00:00,270 --> 00:00:01,580
And we're back.
1

2
00:00:01,590 --> 00:00:07,140
Now, let's give this Div Block the same blue color from our designs. To grab the exact blue color from Figma,
2

3
00:00:07,380 --> 00:00:12,780
select the color box or a background rectangle and then copy the code from the fill color.
3

4
00:00:12,780 --> 00:00:17,070
If you can't select the background rectangle, don't forget to check
4

5
00:00:17,070 --> 00:00:22,320
maybe you have locked the layer. Because I know, this is what I've done inside the tutorial, so you might
5

6
00:00:22,320 --> 00:00:23,310
have locked it as well.
6

7
00:00:23,460 --> 00:00:28,410
So this the HEX code, which we can copy and use it on Webflow. And it's going to bring exactly the
7

8
00:00:28,410 --> 00:00:35,430
same identical color there as well. Inside Webflow, go to styles panel and scroll down to find a property
8

9
00:00:35,430 --> 00:00:36,740
called Backgrounds.
9

10
00:00:36,810 --> 00:00:42,120
There is the same field for the HEX code. So just paste your code in there. Always starts with a hash sign.
10

11
00:00:42,150 --> 00:00:43,550
But you don't have to copy that.
11

12
00:00:43,590 --> 00:00:46,620
If you do, make sure to replace existing hash sign too.
12

13
00:00:49,730 --> 00:00:53,660
Now we need to give our Div Block a similar size as our rectangle in Figma.
13

14
00:00:53,750 --> 00:00:57,070
And this is where things work a little different compared to Figma.
14

15
00:00:57,080 --> 00:00:59,340
The reason is that websites are responsive.
15

16
00:00:59,420 --> 00:01:03,260
They can grow and shrink based on screen sizes. In Figma
16

17
00:01:03,320 --> 00:01:09,280
everything has a fixed position and fixed size regardless of the screen or content. To start with,
17

18
00:01:09,290 --> 00:01:12,010
we do have similar controls like we do it in Figma.
18

19
00:01:12,650 --> 00:01:17,700
You have Width and Height. Where you can put exact values as you would put in Figma.
19

20
00:01:17,720 --> 00:01:22,750
We can't drag and resize a rectangle from the canvas, like we did in Figma.
20

21
00:01:22,790 --> 00:01:25,480
We have to input values in these boxes.
21

22
00:01:28,130 --> 00:01:34,370
We can put an exact pixel values. By grabbing them right from Figma. For some elements,
22

23
00:01:34,370 --> 00:01:35,990
this might be a fine thing to do.
23

24
00:01:36,020 --> 00:01:40,860
But for the background box, it isn't. Because it's not responsive
24

25
00:01:44,130 --> 00:01:50,640
If my screen is wider than that value, then I get this white gap. Because I've made the blue box only
25

26
00:01:50,640 --> 00:01:58,970
1400 pixels wide, whereas my screen, is wider than that. And if the screen is smaller it's still no
26

27
00:01:58,970 --> 00:02:01,240
good, because then the box overflows.
27

28
00:02:01,250 --> 00:02:06,920
You see those blue lines? Those are the boundaries of the blue box. And they are going off the page.
28

29
00:02:06,950 --> 00:02:10,230
Often exact pixel values aren't any good in Webflow.
29

30
00:02:10,640 --> 00:02:12,290
OK, then what is a good option?
30

31
00:02:15,150 --> 00:02:22,170
If you press on this PX value here, it will show you all the units you can input in these fields. After
31

32
00:02:22,170 --> 00:02:28,620
pixels we have a percentage. With percentages, we now enter a responsive web. It's a responsive value in
32

33
00:02:28,620 --> 00:02:35,340
response to the size of the parent. If we put 50% width of our box, it's going to take 50%
33

34
00:02:35,400 --> 00:02:40,980
of its parent element. And what's the parent of this element? If we check that on the bottom navigator,
34

35
00:02:40,980 --> 00:02:46,890
we can see that the body is the parent. The body of any website is responsive and it's sized by the browser width.
35

36
00:02:46,890 --> 00:02:52,740
This means 50% of the body, is 50% of the browser. So, if we shrink the browser width,
36

37
00:02:52,740 --> 00:02:58,770
and we can do that from here by dragging, we can see that our blue box automatically shrinks as
37

38
00:02:58,770 --> 00:03:01,620
the body shrinks. And there is no horizontal scroll.
38

39
00:03:04,380 --> 00:03:09,960
The next unit is EM. We're going to skip this one because it's a unit that is based on the font size
39

40
00:03:09,960 --> 00:03:16,620
and I never found any use for it, in the context of widths and heights. So we'll do just fine without
40

41
00:03:16,620 --> 00:03:16,770
it.
41

42
00:03:19,690 --> 00:03:24,010
VH and VW on the other hand, are important and very useful units.
42

43
00:03:24,020 --> 00:03:30,010
They stand for Viewport Height and Viewport Width. Viewport is same as the browser size.
43

44
00:03:30,230 --> 00:03:37,220
For example, as we drag this handle here, we can see the change in viewport width. Or the browser width.
44

45
00:03:37,610 --> 00:03:39,800
Shown directly in pixels.
45

46
00:03:39,800 --> 00:03:41,660
So that would be Viewport Width.
46

47
00:03:41,720 --> 00:03:44,300
Similarly this is the Viewport Height.
47

48
00:03:44,330 --> 00:03:52,910
These units work in percentage so 100 VW is 100% of the Viewport With. And 50 VH is 50%
48

49
00:03:52,910 --> 00:03:54,510
of the Viewport Height.
49

50
00:03:54,530 --> 00:03:57,680
Let's drop another box inside so we can see this in practice better.
50

51
00:04:11,800 --> 00:04:14,440
The yellow box is sitting inside the blue box.
51

52
00:04:14,440 --> 00:04:21,750
If we use percentage values, the yellow box will resize relative to the blue box. Because it's the parent.
52

53
00:04:21,830 --> 00:04:29,080
So 50% and 100%. So100% height covers 100% of the blue box height. Which has its
53

54
00:04:29,080 --> 00:04:31,420
own value of 600 pixels.
54

55
00:04:31,420 --> 00:04:39,770
Now, look what happens if we put 100 VH instead. It covers an entire visible screen.
55

56
00:04:39,840 --> 00:04:42,600
It even goes outside of the parent's borders.
56

57
00:04:42,600 --> 00:04:44,940
The same thing applies to VW.
57

58
00:04:44,940 --> 00:04:51,630
100% makes it stretch until the edges of the parent element. But 100 VW makes it stretch all the
58

59
00:04:51,630 --> 00:04:55,130
way to fill the entire width of the visible screen.
59

60
00:04:55,290 --> 00:05:01,260
To note, we usually use these values to their corresponding field, so VW in the width field and VH for
60

61
00:05:01,260 --> 00:05:04,250
the height field. Although that doesn't mean you cannot switch them around.
61

62
00:05:04,290 --> 00:05:09,230
Usually, there is no need. But there are some rare cases that you might want to do that.
62

63
00:05:09,240 --> 00:05:13,200
Here's another cool demonstration of comparing percentages to a viewport units.
63

64
00:05:13,280 --> 00:05:15,650
We have identical boxes in the above example.
64

65
00:05:15,660 --> 00:05:22,410
Let's give a yellow box 50% width. And on the yellow box below.
65

66
00:05:22,440 --> 00:05:24,600
Let's give it 50 VW.
66

67
00:05:26,940 --> 00:05:28,500
Right now they're identical.
67

68
00:05:28,500 --> 00:05:28,890
Why?
68

69
00:05:28,920 --> 00:05:32,180
Because the parent blue boxes stretch from edge to edge.
69

70
00:05:32,250 --> 00:05:40,630
But let's give a top blue box a width of 900 pixels. As expected the yellow box shrank with it, to
70

71
00:05:40,630 --> 00:05:43,300
make 50% of the blue boxes with.
71

72
00:05:43,630 --> 00:05:50,440
But see what happens on the bottom version when we give the blue box 900 pixel width. The bottom yellow
72

73
00:05:50,440 --> 00:05:54,490
box didn't change shape, because it's relative to the browser size.
73

74
00:05:54,770 --> 00:06:00,730
And as you change screens and shrink the browser, the bottom yellow box shrinks with it. Because it needs
74

75
00:06:00,730 --> 00:06:03,820
to maintain 50% of the viewport no matter what.
75

76
00:06:06,830 --> 00:06:09,950
The last unit is auto, meaning auto-sizing.
76

77
00:06:10,070 --> 00:06:15,680
This is default value in Width and Height. When the size is set to Auto in the height, the size of the
77

78
00:06:15,680 --> 00:06:20,060
element will change based on how much content is inside it.
78

79
00:06:20,060 --> 00:06:24,080
For example. Let's set the Height to Auto on our blue box.
79

80
00:06:24,080 --> 00:06:27,220
It disappeared. Because it's empty. And when it's empty and it's auto,
80

81
00:06:27,230 --> 00:06:29,490
that means it has 0 pixel height.
81

82
00:06:29,510 --> 00:06:34,730
Let's put some elements inside. To add something new inside an existing element, have that element selected
82

83
00:06:34,760 --> 00:06:36,790
and Webflow will drop it inside.
83

84
00:06:36,830 --> 00:06:40,400
When you click something from the new elements panel.
84

85
00:06:40,400 --> 00:06:42,560
If I have a section selected it will drop inside.
85

86
00:06:42,560 --> 00:06:45,830
But if you don't want it inside any other element then select body.
86

87
00:06:45,840 --> 00:06:48,770
So it will kind of drop outside on the general canvas.
87

88
00:06:52,300 --> 00:06:52,840
If you want,
88

89
00:06:52,840 --> 00:06:57,970
you can also drag elements directly on the canvas from the Layers Panel, not the Layers Panel, but the
89

90
00:06:57,970 --> 00:06:58,920
Elements Panel.
90

91
00:06:59,380 --> 00:07:01,290
But that's not usually what I do.
91

92
00:07:01,330 --> 00:07:03,610
I like the other way, but up to you.
92

93
00:07:03,610 --> 00:07:04,640
Which one you want to, prefer.
93

94
00:07:04,630 --> 00:07:10,950
If you want to drag, your drag. If you want to just click, click.
94

95
00:07:11,130 --> 00:07:14,940
And so as you add more elements inside the Div Block, it will stretch.
95

96
00:07:18,680 --> 00:07:24,560
If we set a specific pixel height, then the Div Blog will abide to that height no matter how much things
96

97
00:07:24,650 --> 00:07:31,190
you stuff inside. The elements will just overflow from it, just like your garbage bin when you're too lazy
97

98
00:07:31,190 --> 00:07:32,720
to take it out.
98

99
00:07:32,720 --> 00:07:37,520
As for the Auto on the width, the box will stretch to the edges of its parent.
99

100
00:07:37,520 --> 00:07:43,430
In this case - the full page, because the parent element is the body.
100

101
00:07:43,550 --> 00:07:45,810
Finally, we have minimums and maximums.
101

102
00:07:45,860 --> 00:07:50,360
These rules work in conjunction with the regular width and height.
102

103
00:07:50,360 --> 00:07:54,010
It's an extra rule to set floors and ceilings on our elements.
103

104
00:07:54,010 --> 00:08:00,350
For example, if we set the height to Auto, the blue box will stretch based on the content inside.
104

105
00:08:00,890 --> 00:08:06,190
But if we set a maximum height, then it will stretch only until that point.
105

106
00:08:20,610 --> 00:08:24,290
Minimums and maximums are super useful in many different scenarios.
106

107
00:08:24,300 --> 00:08:30,810
For example, if we have a card element like this, where we want to put some content. It can be information,
107

108
00:08:30,810 --> 00:08:35,740
form, pricing whatever. We could set an exact height on it to match our content.
108

109
00:08:35,750 --> 00:08:37,830
Just like the way we would do it in Figma.
109

110
00:08:37,860 --> 00:08:44,730
But because web is responsive, the size of the content can change from screen to screen. And then we're
110

111
00:08:44,730 --> 00:08:50,700
going to get something like this. A better way is to use minimum height, instead of the exact height in
111

112
00:08:50,700 --> 00:08:51,610
this case.
112

113
00:08:51,720 --> 00:08:58,230
If we put minimum 400 pixels, we'll make sure that the box doesn't shrink, because there
113

114
00:08:58,230 --> 00:08:59,630
is not enough content inside.
114

115
00:09:00,150 --> 00:09:04,320
And we also make sure it grows when content grows with it.
115

116
00:09:04,320 --> 00:09:05,580
Same goes for the width.
116

117
00:09:11,460 --> 00:09:12,730
Setting 400 pixels
117

118
00:09:12,720 --> 00:09:19,000
look good here, but if we shrink it, we get the overflow. And it's going to stubbornly maintain as
118

119
00:09:19,020 --> 00:09:19,950
400 pixels.
119

120
00:09:19,950 --> 00:09:26,740
A better option is to set 400 maximum width.
120

121
00:09:26,810 --> 00:09:33,290
This means it will not stretch more than 400 pixels no matter what. But it will shrink below that,
121

122
00:09:33,290 --> 00:09:34,600
if there is a necessity.
122

123
00:09:37,840 --> 00:09:44,390
So let's see now what value and units do we need to enter, to make that box look like our design.
123

124
00:09:44,390 --> 00:09:44,780
For the width,
124

125
00:09:44,780 --> 00:09:45,730
it's obvious, right?
125

126
00:09:45,740 --> 00:09:50,750
We're gonna go with Auto, because we want it to stretch from edge to edge. 100% width would bring
126

127
00:09:50,750 --> 00:09:51,890
us the same result
127

128
00:09:51,890 --> 00:09:56,990
in this case. Often in web design there are multiple ways to achieve the intended result.
128

129
00:09:56,990 --> 00:10:02,840
Sometimes they are equally good, but sometimes one might be slightly more superior. With practice and
129

130
00:10:02,840 --> 00:10:03,620
some failures,
130

131
00:10:03,620 --> 00:10:05,900
you'll soon learn which is better.
131

132
00:10:05,900 --> 00:10:09,840
In this case, Auto is better because it's default and it means no extra code.
132

133
00:10:09,860 --> 00:10:17,150
Here is a pro Webflow tip. To return any property to its default value, hold ALT or OPTION key and CLICK
133

134
00:10:17,150 --> 00:10:18,470
on the property.
134

135
00:10:18,560 --> 00:10:22,250
It will clear all the changes that you have made. And return to the default values.
135

136
00:10:22,250 --> 00:10:25,850
It's a very handy shortcut. Another tip, if the property is in blue,
136

137
00:10:25,850 --> 00:10:31,580
it means you have changed it. When you're facing some sort of a bug, trying to figure out why something
137

138
00:10:31,610 --> 00:10:33,470
isn't acting in a way it should.
138

139
00:10:33,470 --> 00:10:38,840
You can easily scan this to identify what properties are applied. And what could be contributing to the
139

140
00:10:38,840 --> 00:10:44,480
issue. When it's orange like this, it means we have changed the default values. Although not on this element
140

141
00:10:44,480 --> 00:10:48,640
directly, but on one of the parents. In this case on the body element.
141

142
00:10:48,650 --> 00:10:51,720
In other words, it's being inherited from the body element.
142

143
00:10:51,830 --> 00:10:56,110
Again this a great way to identify where are some style is coming from.
143

144
00:10:56,130 --> 00:11:02,090
Okay now for the height. Based on what we have learned, we know that we cannot use an exact value like
144

145
00:11:02,170 --> 00:11:08,000
in Figma. Because when screen expands or shrinks on to a mobile, it will not adopt.
145

146
00:11:08,030 --> 00:11:10,420
So how can we make it adaptable?
146

147
00:11:10,430 --> 00:11:11,720
We have two solid options.
147

148
00:11:11,720 --> 00:11:16,230
First, we can keep it Auto and let the content define its size.
148

149
00:11:16,250 --> 00:11:18,170
And second we can use VH,
149

150
00:11:18,170 --> 00:11:19,730
the Viewport Height.
150

151
00:11:20,000 --> 00:11:21,690
Since we didn't put our content yet,
151

152
00:11:21,740 --> 00:11:27,770
let's try this second option, 100 VH. Meaning 100% of a visible screen.
152

153
00:11:27,770 --> 00:11:32,900
This means no matter how much we shrink or expand our browser, the box will adapt instantly to match
153

154
00:11:32,900 --> 00:11:33,770
the visible screen.
154

155
00:11:38,710 --> 00:11:45,520
But if our browser is too small, then sometimes blue box might not be enough for our content. And content
155

156
00:11:45,520 --> 00:11:47,860
will overflow from the box.
156

157
00:11:47,890 --> 00:11:49,270
So, why is this happening?
157

158
00:11:49,420 --> 00:11:54,910
Because the blue box has a defined height. It doesn't stretch with content and that define height is
158

159
00:11:54,940 --> 00:11:57,000
only as tall as the browser window.
159

160
00:11:57,190 --> 00:11:58,480
So, how can we fix this?
160

161
00:11:58,480 --> 00:12:04,090
We know that, to have the parent box stretched to accommodate its content, we need to use auto-sizing.
161

162
00:12:04,090 --> 00:12:04,970
Right?
162

163
00:12:05,020 --> 00:12:11,800
This way we make sure that blue box grows with content. And the 100 VH value we can put as a minimum
163

164
00:12:11,800 --> 00:12:12,580
height.
164

165
00:12:12,610 --> 00:12:19,000
Now the blue box will be at least same height as the browser, but not smaller than its content.
165

166
00:12:19,030 --> 00:12:21,190
That's a perfect arrangement for us.
166

167
00:12:28,430 --> 00:12:33,500
So to recap. We have pixel values, to input exact fixed dimensions.
167

168
00:12:33,500 --> 00:12:37,670
We have percentage values, to size an element relative to its parent.
168

169
00:12:37,670 --> 00:12:45,230
We have VH and VW two size elements relative to the browser size. And we have minimums and maximums to
169

170
00:12:45,230 --> 00:12:47,320
set floors and ceilings on elements.