All language subtitles for 9. Put it into Practice - Refactor our Website Part 1

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.