So, the first thing I want to do is, I want to structure our code so that we keep all of our HTML 1
element selectors together. 2
So we've got the body up here and we've got a row of red. 3
This is just something I like to do because it's so much easier to navigate. 4
And when you're trying to find things it can be such a pain when you've got things dotted all over the 5
place, especially in your CSS. 6
So, now that we've got all of these HTML elements up here, you'll realize that some of these are actually 7
doing very specific things. 8
For example, this section of code, even though it’s targeting all of the h1s, it's actually only really 9
applying the style specifically for this title here. 10
So these styles should not really be applied to the h1. 11
Instead it should be applied more specifically to a type of heading. The kind of styles that you want to 12
place across all of the h1, h2 and h3 are very very broad, things like, you know, font-family maybe, or 13
a particular color 14
if you have a color scheme. You don't want specific things like, you know, a font size or a line height, because 15
that's something that should really occur more specifically to a particular class. 16
So let's go ahead and change this. Instead of targeting the h1, 17
I'm going to add a class to the h1 and I'm going to call it big-heading. 18
So this is the biggest heading that we have basically and I'm going to place that class somewhere down 19
here and I'm going to have a section that's dedicated to headings and this one is the big-heading. 20
So the big-heading is basically going to be all of this code, so I'm going to cut it and then I'm going 21
to paste it in here. 22
So now what should we use the h1, h2, h3 selectors for? 23
Well, you might notice that a lot of these elements already have the font-family Montserrat-Bold inside 24
them. 25
So it's worth actually targeting all of the heading elements, so h1 through to h6, and giving it the 26
same font-family that you would want for a heading. 27
And we can do that quite easily by simply saying h1, h2, h3, h4, h5, h6. 28
And what this does is it applies the CSS rules inside these curly brackets to all of these heading 29
types. 30
And it's the equivalent of basically saying h1, font-family is Montserrat-Bold, 31
h2, font-family is Montserrat-Bold, h3, and instead all we need to do is just to put it inside here. 32
And that applies that font-family to all of the headings that we have. 33
And this makes a lot of sense because if all of our headings have the default font of Montserrat-Bold and 34
all of our bodies for the rest of the text has the font-family Montserrat, then it's very easy to customize 35
the appearance of individual headings from there on out. 36
So now we can delete all of this and this and this. 37
So less repetition, 38
much better structure, and more modular code. 39
So those are the things that we are aiming for. 40
Now if we go ahead and hit save and refresh our web site, now we're not expecting to see any changes. 41
We're refactoring the code. 42
We're not trying to change the style. 43
In fact, if it does change then we might have broken something, 44
and we have to check regularly to make sure that our refactoring is not breaking our web site. 45
So let's head back and let's look at the next thing we've got here which is the h2. 46
Now let's take a look at where they occur. 47
So we've got some of these which are the testimonials. 48
And then we've got other ones which are the section headings. 49
We've got another one which is the price in our pricing table. 50
So, instead of having an h2 where we add all of these styles, I would recommend to actually give each 51
of these h2s a specific class. 52
So, in this case, this class might be called price-text and we can add the same class to all three of 53
the price text h2s. 54
And then we can go into our styles.css, find the pricing section, and then target the price-text and 55
change its font-size to 3rem and line-height to 1.5. 56
And let's go back over here and refresh and just make sure that we haven't broken anything, looks exactly 57
the same, 58
so that's all good, and then we can head back and we look for the next place where we used an h2. 59
So the other place are these testimonial titles. 60
So let's go ahead and add a class here, and we'll just call it testimonial-text, and I'm going to add 61
that class to the other testimonial also, which is here. 62
And then we're going to hit save and we're going to go and find the testimonial section and we're going 63
to add the class selector testimonial-text, and we're going to say that the font-size is 3rem and the 64
line-height is 1.5. And the last place where we've got an h2 is this section heading. 65
So I'm just going to give it the class of section-heading, and this means that if we decide at a later 66
date to give our web site more sections, sections that require section headings, then we can apply the 67
same style by simply adding this class to whatever new section we need to create. 68
So now let's go in here, 69
and, in the headings section we've got up here, we've got a big-heading and we're now going to add our 70
section-heading, which is going to have a font-size of 3rem and a line-height of 1.5 rem. 71
So now we're able to delete this h2. 72
And you might be wondering why I'm going to all this trouble of essentially, you know, kind of going back 73
on what I said earlier, right? 74
We said, ‘Don't repeat yourself’, 75
and that's important when you're trying to refactor your code. 76
But, at the same time, say if you're looking at your web site and you realize, wait a minute, there's something 77
a little bit wrong with, you know, this part of the text. 78
Well, then it's as easy as going to Inspect and finding the class that we've got here which is testimonial- 79
text, 80
then scrolling to the right section, and we know exactly which part of our code affects the style of 81
that section. 82
And it's very unlikely that on your web site that’s the same at the h1 and h2 level. 83
So this is what we mean about modularity, so it allows you to drill down on a specific section very very 84
easily and figure out what the problems are or change the style of one particular section without affecting 85
the rest of the web site. 86
Now the last heading element that we've got here is an h3. 87
And in our case we're setting the font size to 1.5 rem. 88
So let's check the h3s that we've got on our page. And we've got some of these h3s for our card-header. 89
And then we've got some h3s for our CTA heading, which is actually overwritten with the cta-heading 90
class over here. 91
And we've got one more h3 which are the feature titles. 92
So it might be a good idea to add a class here and we call it feature-title, and we can 93
apply this class to all three of these feature titles. 94
And now, if we go into our features section, we can target the feature-title and we can update its style to 95
have the font-size 1.5rem, and we can now delete this rather specific h3 styling. 96
So now all of our HTML elements are pretty much doing very very broad stroke across the web site 97
type of styling, and there's nothing specific in here. 98
Whenever you're trying to apply some specific styles you probably want to ask yourself if you want to 99
use a class. 100
Now, in our case, I've been a little bit lazy about adding classes as we're going along with our coding, 101
all because I wanted to save up all of this juicy goodness for our refactoring lesson, 102
but normally what you would do is, as you go along, as you're writing the code and as you realize opportunities 103
for refactoring, you would do it there and then, rather than waiting for some large refactoring session 104
that's probably always going to be procrastinated on and it's never going to happen. 105
All right. 106
So the other thing that we noticed while we were scrolling through our HTML code was that if we look 107
at the CTA heading here, it's got a class of cta-heading, 108
but actually, if you look at it, it's basically the same as our big-heading. 109
So in this case this kind of repetition is not really necessary because we can simply give it the rather 110
specific class of big-heading. And you'll see that nothing changes here because the same CSS style is 111
specified inside the cta-heading and also inside the big-heading. And this is almost like, you know how 112
we're using Bootstrap classes which have defined specific styles for different types of headings or 113
buttons and all we need to do is just add the class, 114
well, we're kind of doing this for ourselves. 115
We want our big headings to look a particular way, 116
our section headings to look another way, and we can reuse these classes across our web site. 117
Now the next thing that will be a bit of an eyesore that you might have noticed while you're scrolling 118
through the web site is that you see text-align center. Let’s just control or command find that, and you 119
can see that there's seven instances where we had to declare text-align center, text-align center, all 120
over the place. 121
So if it's occurring this commonly, and it's pretty much in every single section that we've had 122
to add text-align center, then it makes sense to simply add this web site wide. So we can make the entire 123
body of our web site text-align, 124
and that way we can delete all of these other instances. 125
But remember to keep the one inside your media query, because that's a different use case, that's for 126
when our title goes into the mobile mode. 127
We still want to change it to text-align center. 128
So let's hit save and refresh and you'll see that not much has happened, which is good, 129
apart from the fact that our title section is now text-align centered and no longer text-align left, 130
which looks kind of weird. But that's no problem. 131
It's much easier to write text-align left once, rather than write text-align center seven times, 132
right? 133
So inside our title section we're going to set the text-align to left, and now everything is good as 134
gold. 135
The other thing that we see repeated pretty much across our CSS is this padding 7 percent 15 percent. 136
And if I hit find then you see we've actually specified it in four places and we’ve repeated our code sort 137
of needlessly like this. 138
So this kind of padding is usually the container's job, but in our case the container-fluid has kind 139
of been adapted specifically for our title section. 140
This is the only place in our HTML where we've used container-fluid so far, because we've made the 141
style too specific for this section, whereas it's meant to be something that you should really reuse. 142
So let's change container-fluid to 7 percent top and bottom and 15 percent left and right, and then let's 143
put some container-fluids around all of the areas where we had this particular padding style specified. 144
So the first one is inside features. 145
So let's scroll to the features section and let's add a div that is a container-fluid and move the closing div 146
down to the bottom. 147
All right. And then let's go on to the next one. 148
Next one is the carousel-item. 149
So let's find the carousel. 150
It should be inside the testimonial section. 151
So here's our carousel-item. 152
And instead of applying the style of 7 percent top and bottom 15 percent left and right to the carousel- 153
item, all we need to do is just add container-fluid to the list of classes for this div. And we're going 154
to do it over here as well so that both carousel-item divs also have this container-fluid. 155
Make sure that you don't have any typos like I just did just there. 156
So let's go to the next place where we've got our padding 7 and 15, so that's the cta and the footer, 157
and I think that's the last of it. 158
So let's go to our cta section and add a div that is going to be container-fluid, 159
and the same in our footer. 160
And I'm just going to beautify our code so that it's a little bit easier to see. 161
So now that we've narrowed down all of our padding 7 and 15 percent so all the places where this occurs 162
then it's a good time to delete it because we no longer need it. 163
It's now covered by the container-fluid. 164
And in fact if you do keep it you end up with two sets of paddings which is not what you want. 165
So now there's just one found and that's for the container-fluid. 166
So that's perfect. 167
So now if we hit save and refresh our web site still looks OK. 168
Now the only one that doesn't look the same is our title. Because the container-fluid has 7 percent top 169
and bottom padding, then it pushes down our nav bar by quite a bit at the top, which is not what we want. 170
So how can we change this? 171
Well, let's inspect using our Chrome Developer Tools, and you can see that we've got this container-fluid 172
here that has all of that padding at the top, 100 at the top, 100 at the bottom, which is roughly the 7 percent. 173
So all we need to do is to change this to a value that's a lot lower. 174
So let's say, I don't know, say 3 percent, right? 175
And we restore it to the previous look. 176
So how can we implement this in our code? 177
Well, one way of doing it would be, let's say that we decided, oh, you know what, I'm going to abandon this 178
class, container-fluid. 179
I'm going to give it a custom class like title-container or something else like that. 180
But remember container-fluid is actually a Bootstrap class, which is quite helpful when we're keeping 181
our web site responsive and all of that. 182
So we do want to keep it and we don't want to just, you know, give up and give it a custom class. 183
So how else can we do this? 184
Well, what if we changed the padding for title? What if we targeted this specific id instead of the container- 185
fluid? 186
Well that doesn't really work. 187
Let me show you why. 188
So, at the moment we've got the container-fluid selected, but now I'm going to select the title section 189
and, if I change the padding up here to 3 percent, you'll see that it'll actually add more padding on top 190
of the padding that we've got for the container. 191
So now the container-fluid has some padding and the the title section has some padding, so that doesn't 192
work either. 193
We're not overriding this by adding a padding to another HTML element. 194
So what can we do? 195
Well, we can combine some selectors in order to say that, 196
all right, 197
so the general container-fluid should have this padding, 198
but in the title section, 199
so let's make sure that we actually have a title section that's commented out and let's move our container- 200
fluid up here because it's no longer just belonging in the title section, right? 201
And we'll call this Containers, and I'm going to move the title section to below the navigation bar, say 202
around here, so that it's together with the title image and the download buttons. 203
All right. So instead of adding the padding to our title section, what we're going to do is that we're 204
going to select the container-fluid, but we're going to say that we only want to change the style of 205
the container-fluid, and we're going to set it to have a different padding of say 3 percent at the top, 206
15 percent left and right and 7 percent at the bottom. 207
But this is going to apply this padding to all of the container-fluids, and that will conflict with 208
our previous container-fluid selector. 209
But what we can do is we can say that for the container-fluid class that is contained inside the title 210
section then apply this specific padding. 211
And because this rule is more specific than the one that only targets the container-fluid class, then 212
this will override the previous one. 213
So now let's hit save. 214
And if you refresh, then you can see that we've gotten back our previous layout for our top container- 215
fluid. 216
And if you inspect, and you click on the container-fluid in this top section, you can see that the previous 217
padding was overridden by the more specific one that we created just now. 218
And I'm just going to pause here for a moment because I want to explain to you how you would combine 219
selectors in CSS. So, to learn about that and more, 220
I’ll see you on the next lesson.