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