WEBVTT 0 00:00.600 --> 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 1 00:06.570 --> 00:08.600 element selectors together. 2 00:08.610 --> 00:11.890 So we've got the body up here and we've got a row of red. 3 00:11.940 --> 00:15.430 This is just something I like to do because it's so much easier to navigate. 4 00:15.450 --> 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 5 00:20.130 --> 00:22.000 place, especially in your CSS. 6 00:22.260 --> 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 7 00:29.010 --> 00:30.620 doing very specific things. 8 00:30.630 --> 00:36.900 For example, this section of code, even though it’s targeting all of the h1s, it's actually only really 9 00:36.900 --> 00:41.460 applying the style specifically for this title here. 10 00:41.490 --> 00:45.490 So these styles should not really be applied to the h1. 11 00:45.510 --> 00:51.540 Instead it should be applied more specifically to a type of heading. The kind of styles that you want to 12 00:51.540 --> 00:59.850 place across all of the h1, h2 and h3 are very very broad, things like, you know, font-family maybe, or 13 00:59.880 --> 01:01.090 a particular color 14 01:01.110 --> 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 15 01:07.320 --> 01:13.000 that's something that should really occur more specifically to a particular class. 16 01:13.020 --> 01:16.450 So let's go ahead and change this. Instead of targeting the h1, 17 01:16.470 --> 01:21.860 I'm going to add a class to the h1 and I'm going to call it big-heading. 18 01:21.900 --> 01:27.960 So this is the biggest heading that we have basically and I'm going to place that class somewhere down 19 01:27.960 --> 01:35.490 here and I'm going to have a section that's dedicated to headings and this one is the big-heading. 20 01:35.610 --> 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 21 01:40.980 --> 01:42.840 to paste it in here. 22 01:43.110 --> 01:47.370 So now what should we use the h1, h2, h3 selectors for? 23 01:47.380 --> 01:54.030 Well, you might notice that a lot of these elements already have the font-family Montserrat-Bold inside 24 01:54.030 --> 01:54.540 them. 25 01:54.540 --> 02:01.740 So it's worth actually targeting all of the heading elements, so h1 through to h6, and giving it the 26 02:01.740 --> 02:05.700 same font-family that you would want for a heading. 27 02:06.000 --> 02:14.690 And we can do that quite easily by simply saying h1, h2, h3, h4, h5, h6. 28 02:14.970 --> 02:21.990 And what this does is it applies the CSS rules inside these curly brackets to all of these heading 29 02:21.990 --> 02:22.540 types. 30 02:22.710 --> 02:29.470 And it's the equivalent of basically saying h1, font-family is Montserrat-Bold, 31 02:29.500 --> 02:38.430 h2, font-family is Montserrat-Bold, h3, and instead all we need to do is just to put it inside here. 32 02:38.490 --> 02:43.480 And that applies that font-family to all of the headings that we have. 33 02:43.500 --> 02:50.100 And this makes a lot of sense because if all of our headings have the default font of Montserrat-Bold and 34 02:50.130 --> 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 35 02:57.690 --> 03:00.870 the appearance of individual headings from there on out. 36 03:01.020 --> 03:06.860 So now we can delete all of this and this and this. 37 03:06.870 --> 03:08.390 So less repetition, 38 03:08.430 --> 03:13.390 much better structure, and more modular code. 39 03:13.500 --> 03:16.280 So those are the things that we are aiming for. 40 03:16.410 --> 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. 41 03:23.520 --> 03:25.320 We're refactoring the code. 42 03:25.320 --> 03:26.910 We're not trying to change the style. 43 03:26.910 --> 03:30.000 In fact, if it does change then we might have broken something, 44 03:30.000 --> 03:36.610 and we have to check regularly to make sure that our refactoring is not breaking our web site. 45 03:37.200 --> 03:43.160 So let's head back and let's look at the next thing we've got here which is the h2. 46 03:43.170 --> 03:45.500 Now let's take a look at where they occur. 47 03:45.510 --> 03:49.280 So we've got some of these which are the testimonials. 48 03:49.440 --> 03:54.910 And then we've got other ones which are the section headings. 49 03:55.080 --> 03:59.970 We've got another one which is the price in our pricing table. 50 03:59.970 --> 04:08.580 So, instead of having an h2 where we add all of these styles, I would recommend to actually give each 51 04:08.580 --> 04:12.050 of these h2s a specific class. 52 04:12.060 --> 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 53 04:20.880 --> 04:23.010 the price text h2s. 54 04:25.950 --> 04:33.600 And then we can go into our styles.css, find the pricing section, and then target the price-text and 55 04:33.660 --> 04:42.880 change its font-size to 3rem and line-height to 1.5. 56 04:43.770 --> 04:50.520 And let's go back over here and refresh and just make sure that we haven't broken anything, looks exactly 57 04:50.520 --> 04:51.050 the same, 58 04:51.060 --> 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. 59 04:59.680 --> 05:03.750 So the other place are these testimonial titles. 60 05:03.810 --> 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 61 05:11.160 --> 05:15.520 that class to the other testimonial also, which is here. 62 05:15.990 --> 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 63 05:22.120 --> 05:32.370 to add the class selector testimonial-text, and we're going to say that the font-size is 3rem and the 64 05:32.370 --> 05:39.040 line-height is 1.5. And the last place where we've got an h2 is this section heading. 65 05:39.090 --> 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 66 05:45.600 --> 05:51.900 date to give our web site more sections, sections that require section headings, then we can apply the 67 05:51.900 --> 05:58.130 same style by simply adding this class to whatever new section we need to create. 68 05:58.380 --> 06:00.000 So now let's go in here, 69 06:00.000 --> 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 70 06:05.340 --> 06:14.840 section-heading, which is going to have a font-size of 3rem and a line-height of 1.5 rem. 71 06:14.850 --> 06:18.410 So now we're able to delete this h2. 72 06:18.570 --> 06:25.470 And you might be wondering why I'm going to all this trouble of essentially, you know, kind of going back 73 06:25.470 --> 06:26.930 on what I said earlier, right? 74 06:26.940 --> 06:28.780 We said, ‘Don't repeat yourself’, 75 06:28.830 --> 06:32.810 and that's important when you're trying to refactor your code. 76 06:33.000 --> 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 77 06:38.850 --> 06:42.720 a little bit wrong with, you know, this part of the text. 78 06:42.750 --> 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- 79 06:50.520 --> 06:51.370 text, 80 06:51.380 --> 06:58.740 then scrolling to the right section, and we know exactly which part of our code affects the style of 81 06:58.830 --> 06:59.820 that section. 82 06:59.910 --> 07:06.790 And it's very unlikely that on your web site that’s the same at the h1 and h2 level. 83 07:06.840 --> 07:13.500 So this is what we mean about modularity, so it allows you to drill down on a specific section very very 84 07:13.500 --> 07:20.220 easily and figure out what the problems are or change the style of one particular section without affecting 85 07:20.250 --> 07:22.290 the rest of the web site. 86 07:22.290 --> 07:27.540 Now the last heading element that we've got here is an h3. 87 07:27.630 --> 07:32.000 And in our case we're setting the font size to 1.5 rem. 88 07:32.130 --> 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. 89 07:40.020 --> 07:49.080 And then we've got some h3s for our CTA heading, which is actually overwritten with the cta-heading 90 07:49.620 --> 07:51.850 class over here. 91 07:52.350 --> 07:57.150 And we've got one more h3 which are the feature titles. 92 07:57.150 --> 08:06.060 So it might be a good idea to add a class here and we call it feature-title, and we can 93 08:06.060 --> 08:11.100 apply this class to all three of these feature titles. 94 08:13.210 --> 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 95 08:21.010 --> 08:32.210 have the font-size 1.5rem, and we can now delete this rather specific h3 styling. 96 08:32.400 --> 08:40.170 So now all of our HTML elements are pretty much doing very very broad stroke across the web site 97 08:40.200 --> 08:43.830 type of styling, and there's nothing specific in here. 98 08:43.830 --> 08:50.730 Whenever you're trying to apply some specific styles you probably want to ask yourself if you want to 99 08:50.730 --> 08:52.190 use a class. 100 08:52.410 --> 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, 101 08:58.560 --> 09:04.350 all because I wanted to save up all of this juicy goodness for our refactoring lesson, 102 09:04.350 --> 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 103 09:10.830 --> 09:16.440 for refactoring, you would do it there and then, rather than waiting for some large refactoring session 104 09:16.440 --> 09:20.340 that's probably always going to be procrastinated on and it's never going to happen. 105 09:20.340 --> 09:20.600 All right. 106 09:20.610 --> 09:26.730 So the other thing that we noticed while we were scrolling through our HTML code was that if we look 107 09:26.730 --> 09:31.250 at the CTA heading here, it's got a class of cta-heading, 108 09:31.260 --> 09:37.050 but actually, if you look at it, it's basically the same as our big-heading. 109 09:37.050 --> 09:43.590 So in this case this kind of repetition is not really necessary because we can simply give it the rather 110 09:43.590 --> 09:53.700 specific class of big-heading. And you'll see that nothing changes here because the same CSS style is 111 09:53.790 --> 10:00.990 specified inside the cta-heading and also inside the big-heading. And this is almost like, you know how 112 10:00.990 --> 10:07.230 we're using Bootstrap classes which have defined specific styles for different types of headings or 113 10:07.290 --> 10:11.000 buttons and all we need to do is just add the class, 114 10:11.100 --> 10:13.200 well, we're kind of doing this for ourselves. 115 10:13.290 --> 10:15.700 We want our big headings to look a particular way, 116 10:15.720 --> 10:21.670 our section headings to look another way, and we can reuse these classes across our web site. 117 10:21.720 --> 10:27.840 Now the next thing that will be a bit of an eyesore that you might have noticed while you're scrolling 118 10:27.840 --> 10:34.770 through the web site is that you see text-align center. Let’s just control or command find that, and you 119 10:34.770 --> 10:42.450 can see that there's seven instances where we had to declare text-align center, text-align center, all 120 10:42.450 --> 10:43.240 over the place. 121 10:43.260 --> 10:49.410 So if it's occurring this commonly, and it's pretty much in every single section that we've had 122 10:49.410 --> 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 123 10:57.150 --> 11:00.200 body of our web site text-align, 124 11:00.360 --> 11:04.140 and that way we can delete all of these other instances. 125 11:09.630 --> 11:15.210 But remember to keep the one inside your media query, because that's a different use case, that's for 126 11:15.240 --> 11:17.870 when our title goes into the mobile mode. 127 11:17.880 --> 11:20.500 We still want to change it to text-align center. 128 11:20.700 --> 11:27.280 So let's hit save and refresh and you'll see that not much has happened, which is good, 129 11:27.420 --> 11:34.710 apart from the fact that our title section is now text-align centered and no longer text-align left, 130 11:35.040 --> 11:39.080 which looks kind of weird. But that's no problem. 131 11:39.090 --> 11:45.440 It's much easier to write text-align left once, rather than write text-align center seven times, 132 11:45.450 --> 11:45.990 right? 133 11:46.260 --> 11:54.750 So inside our title section we're going to set the text-align to left, and now everything is good as 134 11:54.760 --> 11:55.620 gold. 135 11:55.620 --> 12:07.790 The other thing that we see repeated pretty much across our CSS is this padding 7 percent 15 percent. 136 12:08.370 --> 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 137 12:16.650 --> 12:18.900 of needlessly like this. 138 12:18.900 --> 12:28.140 So this kind of padding is usually the container's job, but in our case the container-fluid has kind 139 12:28.140 --> 12:32.820 of been adapted specifically for our title section. 140 12:32.850 --> 12:40.140 This is the only place in our HTML where we've used container-fluid so far, because we've made the 141 12:40.140 --> 12:47.160 style too specific for this section, whereas it's meant to be something that you should really reuse. 142 12:47.160 --> 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 143 12:55.980 --> 13:04.350 put some container-fluids around all of the areas where we had this particular padding style specified. 144 13:04.350 --> 13:06.630 So the first one is inside features. 145 13:06.780 --> 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 146 13:17.890 --> 13:19.530 down to the bottom. 147 13:19.560 --> 13:23.110 All right. And then let's go on to the next one. 148 13:23.140 --> 13:25.280 Next one is the carousel-item. 149 13:25.330 --> 13:27.970 So let's find the carousel. 150 13:27.970 --> 13:31.080 It should be inside the testimonial section. 151 13:31.120 --> 13:33.540 So here's our carousel-item. 152 13:33.610 --> 13:40.060 And instead of applying the style of 7 percent top and bottom 15 percent left and right to the carousel- 153 13:40.060 --> 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 154 13:49.690 --> 13:57.980 to do it over here as well so that both carousel-item divs also have this container-fluid. 155 13:58.060 --> 14:01.350 Make sure that you don't have any typos like I just did just there. 156 14:01.510 --> 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, 157 14:07.300 --> 14:09.160 and I think that's the last of it. 158 14:09.190 --> 14:16.480 So let's go to our cta section and add a div that is going to be container-fluid, 159 14:18.840 --> 14:21.360 and the same in our footer. 160 14:25.800 --> 14:31.560 And I'm just going to beautify our code so that it's a little bit easier to see. 161 14:31.710 --> 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 162 14:38.790 --> 14:42.740 then it's a good time to delete it because we no longer need it. 163 14:42.810 --> 14:47.360 It's now covered by the container-fluid. 164 14:47.610 --> 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. 165 14:55.660 --> 14:59.570 So now there's just one found and that's for the container-fluid. 166 14:59.680 --> 15:01.030 So that's perfect. 167 15:01.030 --> 15:06.100 So now if we hit save and refresh our web site still looks OK. 168 15:06.370 --> 15:14.080 Now the only one that doesn't look the same is our title. Because the container-fluid has 7 percent top 169 15:14.430 --> 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. 170 15:22.840 --> 15:24.510 So how can we change this? 171 15:24.550 --> 15:32.380 Well, let's inspect using our Chrome Developer Tools, and you can see that we've got this container-fluid 172 15:32.380 --> 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. 173 15:40.450 --> 15:45.770 So all we need to do is to change this to a value that's a lot lower. 174 15:45.880 --> 15:50.090 So let's say, I don't know, say 3 percent, right? 175 15:50.120 --> 15:52.920 And we restore it to the previous look. 176 15:52.970 --> 15:55.910 So how can we implement this in our code? 177 15:55.970 --> 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 178 16:02.480 --> 16:04.040 class, container-fluid. 179 16:04.130 --> 16:09.530 I'm going to give it a custom class like title-container or something else like that. 180 16:09.530 --> 16:15.200 But remember container-fluid is actually a Bootstrap class, which is quite helpful when we're keeping 181 16:15.200 --> 16:17.540 our web site responsive and all of that. 182 16:17.570 --> 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. 183 16:23.450 --> 16:25.580 So how else can we do this? 184 16:25.640 --> 16:33.550 Well, what if we changed the padding for title? What if we targeted this specific id instead of the container- 185 16:33.550 --> 16:34.480 fluid? 186 16:34.700 --> 16:36.800 Well that doesn't really work. 187 16:36.800 --> 16:37.900 Let me show you why. 188 16:37.910 --> 16:44.120 So, at the moment we've got the container-fluid selected, but now I'm going to select the title section 189 16:44.600 --> 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 190 16:52.820 --> 16:55.050 of the padding that we've got for the container. 191 16:55.190 --> 17:02.090 So now the container-fluid has some padding and the the title section has some padding, so that doesn't 192 17:02.090 --> 17:02.820 work either. 193 17:02.820 --> 17:08.410 We're not overriding this by adding a padding to another HTML element. 194 17:08.420 --> 17:11.330 So what can we do? 195 17:11.330 --> 17:16.930 Well, we can combine some selectors in order to say that, 196 17:17.090 --> 17:17.420 all right, 197 17:17.420 --> 17:21.210 so the general container-fluid should have this padding, 198 17:21.650 --> 17:25.280 but in the title section, 199 17:25.280 --> 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- 200 17:33.340 --> 17:38.320 fluid up here because it's no longer just belonging in the title section, right? 201 17:38.360 --> 17:47.210 And we'll call this Containers, and I'm going to move the title section to below the navigation bar, say 202 17:47.300 --> 17:54.140 around here, so that it's together with the title image and the download buttons. 203 17:54.140 --> 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 204 17:59.870 --> 18:06.320 going to select the container-fluid, but we're going to say that we only want to change the style of 205 18:06.320 --> 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, 206 18:14.150 --> 18:18.050 15 percent left and right and 7 percent at the bottom. 207 18:18.050 --> 18:23.780 But this is going to apply this padding to all of the container-fluids, and that will conflict with 208 18:23.780 --> 18:26.080 our previous container-fluid selector. 209 18:26.240 --> 18:34.940 But what we can do is we can say that for the container-fluid class that is contained inside the title 210 18:34.940 --> 18:39.380 section then apply this specific padding. 211 18:39.680 --> 18:46.640 And because this rule is more specific than the one that only targets the container-fluid class, then 212 18:46.670 --> 18:49.430 this will override the previous one. 213 18:49.430 --> 18:51.330 So now let's hit save. 214 18:51.440 --> 18:57.320 And if you refresh, then you can see that we've gotten back our previous layout for our top container- 215 18:57.320 --> 18:57.870 fluid. 216 18:58.010 --> 19:03.770 And if you inspect, and you click on the container-fluid in this top section, you can see that the previous 217 19:03.770 --> 19:08.520 padding was overridden by the more specific one that we created just now. 218 19:08.630 --> 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 219 19:14.930 --> 19:18.800 selectors in CSS. So, to learn about that and more, 220 19:18.850 --> 19:19.910 I’ll see you on the next lesson.