The desktop version of the hero section is completely done. 1
We haven't optimized it for mobile devices and tablets. Yet. But what we are going to do is actually we're 2
first going to finish the entire page and then we're going to do the responsiveness and mobile optimization. 3
This is sort of my habit of doing it. 4
Some web designers, what they're going to do is they will each section by section, each individual block 5
that they are building, they're also doing mobile optimization at the same time. 6
I like to finish the entire page first and then go to the mobile optimization and responsiveness. 7
Why? 8
Because what often happens for me, is that I send desktop versions or whatever the page that I'm basically 9
designing, I send it to the client for their review and they come back with revisions. 10
So what happens they will be like, even though we agreed on the design, 11
sometimes you know there's animations involved, right? 12
There's interactions involved, some hover effect so different things are involved that haven't been 13
part of the design phase. Or they might just change their mind when they see the page in reality. 14
So what happens is that they might come back with some different changes that I have to make. And I might 15
completely remove part of the section, or completely change the way it's laid out and so on. And now 16
all that responsiveness and all the mobile optimization that I have put inside, is sort of lost all the 17
time. 18
And this way I know that you know, I don't have to spend any extra time on mobile versions, until we are 19
sure and until my client has signed off on the designs and we know this is ready to go. 20
Then at the final stage, I'll fix the mobile and then create the responsiveness of the page. And we'll 21
use that process. Finished the page first. And then go over it and go through the entire tablets and mobile 22
versions and all of that. Now it's time to build this middle section. Which is going to be much simpler. 23
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
have 2 div blocks, one named hero section and another container that sits inside that hero section. 25
If you remember, we made a container as a generic block, to center our content. 26
We even reused this container inside the navigation bar. 27
It's a great idea to reuse this container again everywhere on our website. 28
This way we have a uniform layout. And if we ever decide to change the maximum width, make it 29
wider or narrower, 30
we can do so, on entire website, in a couple of clicks. For the hero section, we haven't done anything standardized 31
like that. 32
Otherwise we would reuse it here as well. 33
But that's OK. 34
We can create a generic section now, which we can reuse later like we did with container. 35
So, we're going to add a new section. 36
We'll put another div block inside. Will apply container class to that div block. 37
And we're going to create a new class named Section, for that section block. And now let's add some style 38
to this newly created section class. 39
One thing we can borrow from the hero section is the side padding. 40
Remember this side padding we applied to the hero section, so the content doesn't go to the edges? 41
We know there's going to be uniform across our website and between pages. Just like our generic container. 42
So we're going to apply the same padding to our generic section. Later if we ever decide to change that 43
padding, we can do so on the entire website just by changing one instance of that section. 44
We can also add top and bottom padding. 45
This information we can find in Figma. We have used a 90 pixel spacing in Figma to distance 46
this headline from the hero section above. So we can reuse that same value here. And we can apply it as 47
both top and bottom padding. 48
There. 49
Now we have a generic section layout with a generic container inside. We'll reuse this exact same structure 50
on other similar sections on our page. 51
Now we can put our elements inside and start styling them to make it look like our designs. 52
We'll do that in the next video.