0
1
00:00:00,180 --> 00:00:03,660
The desktop version of the hero section is completely done.
1

2
00:00:03,690 --> 00:00:10,590
We haven't optimized it for mobile devices and tablets. Yet. But what we are going to do is actually we're
2

3
00:00:10,590 --> 00:00:16,880
first going to finish the entire page and then we're going to do the responsiveness and mobile optimization.
3

4
00:00:16,890 --> 00:00:19,020
This is sort of my habit of doing it.
4

5
00:00:19,140 --> 00:00:24,990
Some web designers, what they're going to do is they will each section by section, each individual block
5

6
00:00:24,990 --> 00:00:30,500
that they are building, they're also doing mobile optimization at the same time.
6

7
00:00:30,570 --> 00:00:38,660
I like to finish the entire page first and then go to the mobile optimization and responsiveness.
7

8
00:00:38,670 --> 00:00:39,400
Why?
8

9
00:00:39,420 --> 00:00:45,990
Because what often happens for me, is that I send desktop versions or whatever the page that I'm basically
9

10
00:00:45,990 --> 00:00:51,240
designing, I send it to the client for their review and they come back with revisions.
10

11
00:00:51,240 --> 00:00:54,330
So what happens they will be like, even though we agreed on the design,
11

12
00:00:54,510 --> 00:00:57,280
sometimes you know there's animations involved, right?
12

13
00:00:57,300 --> 00:01:01,590
There's interactions involved, some hover effect so different things are involved that haven't been
13

14
00:01:01,590 --> 00:01:07,020
part of the design phase. Or they might just change their mind when they see the page in reality.
14

15
00:01:07,050 --> 00:01:12,450
So what happens is that they might come back with some different changes that I have to make. And I might
15

16
00:01:12,450 --> 00:01:19,590
completely remove part of the section, or completely change the way it's laid out and so on. And now
16

17
00:01:19,620 --> 00:01:24,990
all that responsiveness and all the mobile optimization that I have put inside, is sort of lost all the
17

18
00:01:24,990 --> 00:01:25,660
time.
18

19
00:01:25,950 --> 00:01:32,190
And this way I know that you know, I don't have to spend any extra time on mobile versions, until we are
19

20
00:01:32,190 --> 00:01:37,890
sure and until my client has signed off on the designs and we know this is ready to go.
20

21
00:01:37,980 --> 00:01:43,860
Then at the final stage, I'll fix the mobile and then create the responsiveness of the page. And we'll
21

22
00:01:43,860 --> 00:01:51,030
use that process. Finished the page first. And then go over it and go through the entire tablets and mobile
22

23
00:01:51,030 --> 00:01:58,930
versions and all of that. Now it's time to build this middle section. Which is going to be much simpler.
23

24
00:01:59,320 --> 00:02:06,730
So what do we need first? We can have a look at our hero structure to get a clue. So it looks like we
24

25
00:02:06,730 --> 00:02:12,410
have 2 div blocks, one named hero section and another container that sits inside that hero section.
25

26
00:02:12,460 --> 00:02:16,860
If you remember, we made a container as a generic block, to center our content.
26

27
00:02:16,860 --> 00:02:20,300
We even reused this container inside the navigation bar.
27

28
00:02:20,320 --> 00:02:24,210
It's a great idea to reuse this container again everywhere on our website.
28

29
00:02:24,250 --> 00:02:30,010
This way we have a uniform layout. And if we ever decide to change the maximum width, make it
29

30
00:02:30,010 --> 00:02:31,330
wider or narrower,
30

31
00:02:31,330 --> 00:02:37,780
we can do so, on entire website, in a couple of clicks. For the hero section, we haven't done anything standardized
31

32
00:02:37,780 --> 00:02:38,590
like that.
32

33
00:02:38,740 --> 00:02:40,760
Otherwise we would reuse it here as well.
33

34
00:02:40,870 --> 00:02:41,710
But that's OK.
34

35
00:02:41,710 --> 00:02:46,900
We can create a generic section now, which we can reuse later like we did with container.
35

36
00:02:47,230 --> 00:02:49,240
So, we're going to add a new section.
36

37
00:02:55,430 --> 00:03:02,760
We'll put another div block inside. Will apply container class to that div block.
37

38
00:03:05,900 --> 00:03:15,660
And we're going to create a new class named Section, for that section block. And now let's add some style
38

39
00:03:15,660 --> 00:03:17,760
to this newly created section class.
39

40
00:03:17,760 --> 00:03:21,090
One thing we can borrow from the hero section is the side padding.
40

41
00:03:21,270 --> 00:03:26,440
Remember this side padding we applied to the hero section, so the content doesn't go to the edges?
41

42
00:03:26,460 --> 00:03:32,250
We know there's going to be uniform across our website and between pages. Just like our generic container.
42

43
00:03:32,280 --> 00:03:38,340
So we're going to apply the same padding to our generic section. Later if we ever decide to change that
43

44
00:03:38,340 --> 00:03:43,470
padding, we can do so on the entire website just by changing one instance of that section.
44

45
00:03:46,860 --> 00:03:49,040
We can also add top and bottom padding.
45

46
00:03:49,050 --> 00:03:55,450
This information we can find in Figma. We have used a 90 pixel spacing in Figma to distance
46

47
00:03:55,460 --> 00:04:02,210
this headline from the hero section above. So we can reuse that same value here. And we can apply it as
47

48
00:04:02,210 --> 00:04:03,770
both top and bottom padding.
48

49
00:04:07,000 --> 00:04:07,290
There.
49

50
00:04:07,310 --> 00:04:12,850
Now we have a generic section layout with a generic container inside. We'll reuse this exact same structure
50

51
00:04:13,180 --> 00:04:16,250
on other similar sections on our page.
51

52
00:04:16,270 --> 00:04:21,130
Now we can put our elements inside and start styling them to make it look like our designs.
52

53
00:04:21,160 --> 00:04:22,720
We'll do that in the next video.