0
1
00:00:00,720 --> 00:00:02,860
So, what have we got here?
1

2
00:00:02,880 --> 00:00:09,500
This is a flexbox that has columns inside. The columns have this percentage width applied to them.
2

3
00:00:09,570 --> 00:00:13,260
Let's keep mobile views in mind when creating a solution here.
3

4
00:00:13,320 --> 00:00:16,140
We will need some sort of vertical alignment.
4

5
00:00:16,170 --> 00:00:21,450
We could go for vertical option from the flexbox, but that sets everything vertical even when there
5

6
00:00:21,450 --> 00:00:22,810
is space on the sides.
6

7
00:00:22,830 --> 00:00:25,770
A better option is to use a wrap feature.
7

8
00:00:28,440 --> 00:00:30,630
We've discussed this option in flexbox video,
8

9
00:00:30,660 --> 00:00:37,950
but let me refresh your memory. By default, flexbox tries to fit all children in one single line. Be it horizontal
9

10
00:00:37,950 --> 00:00:39,470
line or vertical line.
10

11
00:00:39,750 --> 00:00:45,330
But when we enable wrap option, then children will jump to the next line, or wrap to the next line one
11

12
00:00:45,330 --> 00:00:47,170
by one, as needed.
12

13
00:00:47,260 --> 00:00:50,500
Let's change the justify settings to the left or start.
13

14
00:00:50,520 --> 00:00:52,550
Now let's tweak the columns.
14

15
00:00:52,550 --> 00:00:58,100
There is this empty column, which was nice on desktop, but not needed for tablet and mobile views.
15

16
00:00:58,100 --> 00:01:01,940
We would like columns to align to the left without extra spacing.
16

17
00:01:02,010 --> 00:01:06,380
We can't remove this empty column because it's going to remove from the desktop as well.
17

18
00:01:06,390 --> 00:01:09,400
But what we can do, is hide using styles.
18

19
00:01:09,450 --> 00:01:12,570
Let's give it a combo class, so we don't mess with other columns.
19

20
00:01:12,570 --> 00:01:20,460
And then from display option, select hide. The display non property hides the element and frees up
20

21
00:01:20,460 --> 00:01:22,400
the space it was occupying.
21

22
00:01:22,410 --> 00:01:22,990
What else?
22

23
00:01:23,040 --> 00:01:25,150
The columns have the left and right margins.
23

24
00:01:25,170 --> 00:01:28,950
So, when they jump to the next line, it's going to create this extra space.
24

25
00:01:29,310 --> 00:01:32,620
Let's remove that left margin and only use right.
25

26
00:01:32,640 --> 00:01:36,360
But make sure, to edit the column that has only a global class.
26

27
00:01:36,360 --> 00:01:39,500
The first and last column have a combo class applied to them.
27

28
00:01:39,510 --> 00:01:42,210
We used to fix some margins on the desktop.
28

29
00:01:49,000 --> 00:01:49,760
That's pretty good.
29

30
00:01:49,780 --> 00:01:54,730
And let's add a bottom margin, so the columns on the second line don't jam into the first line.
30

31
00:02:00,090 --> 00:02:05,550
On smaller sizes, you'll see that they don't really wrap properly and instead the columns squeeze themselves
31

32
00:02:05,580 --> 00:02:06,690
very tightly.
32

33
00:02:06,690 --> 00:02:11,640
That's because they have the percentage width applied to them, which is fine on the desktop, but becomes
33

34
00:02:11,670 --> 00:02:14,020
unnecessary in this sort of layout.
34

35
00:02:14,100 --> 00:02:15,150
So let's get rid of it.
35

36
00:02:18,060 --> 00:02:23,250
Now that column width is automatic. It grows with the content inside. And that makes the first column
36

37
00:02:23,250 --> 00:02:24,240
too wide.
37

38
00:02:24,240 --> 00:02:27,570
We gotta give it a maximum width, so it doesn't grow this much.
38

39
00:02:32,520 --> 00:02:33,270
And that's better.
39

40
00:02:43,710 --> 00:02:46,710
And the whole thing wraps nicely across all views.
40

41
00:02:53,610 --> 00:02:57,960
One last thing we should tweak is the spacing between the copyright and the links.
41

42
00:03:00,740 --> 00:03:03,320
I think 60 pixels will be much better.
42

43
00:03:04,600 --> 00:03:07,110
Let's have the final look at the whole thing.
43

44
00:03:38,820 --> 00:03:42,810
And that concludes our entire page development. In the next section,
44

45
00:03:42,810 --> 00:03:45,480
we're going to go over finalizing our page.
45

46
00:03:45,480 --> 00:03:48,540
Things like publishing, SEO and so on.
46

47
00:03:48,540 --> 00:03:53,220
This doesn't mean that we're completely done with Webflow designer and the development process.
47

48
00:03:53,280 --> 00:03:59,040
There is still more to learn things like CMS and forms, and interactions, and animations that can
48

49
00:03:59,040 --> 00:04:04,740
make any website look so amazing and so fresh, and so modern, and so professional looking.
49

50
00:04:04,800 --> 00:04:08,680
But all of those concepts we're gonna learn in other parts of this course.
50

51
00:04:08,820 --> 00:04:14,400
One part we're going to learn them inside this big client project that we're going to do from start
51

52
00:04:14,400 --> 00:04:15,030
to finish.
52

53
00:04:15,030 --> 00:04:21,000
So you get this hands on experience on how to start everything with a client. With things like project
53

54
00:04:21,000 --> 00:04:28,740
brief and wire framing, and designs, and then moving to Webflow and developing CMS, and blog Inside
54

55
00:04:28,800 --> 00:04:34,800
Webflow. And then interactions and then finally delivering everything, publishing with a custom domain,
55

56
00:04:34,830 --> 00:04:35,870
all of that stuff.
56

57
00:04:36,060 --> 00:04:42,750
And also some parts I'm going to put inside the advanced part of this of course, because you don't need
57

58
00:04:42,750 --> 00:04:46,470
everything. You don't need to learn everything in one single go.
58

59
00:04:46,470 --> 00:04:53,820
So I put everything that is not essential skill and essential knowledge for you to start freelancing,
59

60
00:04:54,240 --> 00:04:55,500
inside the advance part.
60

61
00:04:55,530 --> 00:05:00,030
So once you've reached the final part of this course, which is advanced you already know everything that
61

62
00:05:00,030 --> 00:05:05,450
is essential, and that can get you started with freelancing. And while you're freelancing, while
62

63
00:05:05,480 --> 00:05:10,860
you're looking for jobs, you can also continue with the advanced parts. And kinda hone your skill
63

64
00:05:10,890 --> 00:05:11,970
and get better at.