WEBVTT 0 00:00.230 --> 00:00.560 All right. 1 00:00.560 --> 00:06.740 So now that you've learned all about Bootstrap, it's time to apply what we've learned and build a project. 2 00:06.770 --> 00:12.620 I want you to imagine that a startup has approached you to build their landing page. 3 00:12.620 --> 00:20.480 So the company is called TinDog, and they make basically Tinder for dogs, helping dogs meet new and 4 00:20.480 --> 00:22.460 interesting dogs nearby. 5 00:22.640 --> 00:26.720 Obviously this is a fake startup that I've created. 6 00:26.750 --> 00:30.520 Now, if you want to go ahead and steal this idea, then I fully support you. 7 00:30.530 --> 00:32.770 But essentially the idea is very simple. 8 00:32.780 --> 00:37.100 You have a dog, you want your dog to have friends, so let's use TinDog. 9 00:37.130 --> 00:42.770 Now, our website is pretty fully-fledged, and if you want to look at what the finished product looks like, 10 00:42.770 --> 00:46.700 head over to appbrewery.github.io/tindog. 11 00:46.820 --> 00:48.480 And this is what you'll see, 12 00:48.500 --> 00:56.600 it's a really simple startup website with an animated gradient background with buttons to download the 13 00:56.600 --> 01:03.230 app, as well as features, testimonials, pricing, and a footer. 14 01:03.530 --> 01:09.710 We're going to be creating this beautiful website, and the way we're going to do it is through the 15 01:09.710 --> 01:17.510 use of the different Snippets that are provided by Bootstrap as well as the different Components and 16 01:17.510 --> 01:25.160 using Bootstrap Layout to get it responsive and looking beautiful on desktop and mobile straight out 17 01:25.160 --> 01:26.150 of the box. 18 01:26.540 --> 01:34.070 To get started first download the TinDog project, unzip the file and open it inside VS Code. 19 01:34.490 --> 01:43.430 Now here I want you to open up the index.html and you can see I've provided some comments and some section 20 01:43.700 --> 01:44.810 HTML elements. 21 01:44.840 --> 01:53.300 These section elements are mostly used to separate different sections of a website, so it's just a 22 01:53.300 --> 01:55.790 group or area of the website, 23 01:55.790 --> 01:59.660 and in modern websites, you'll see very often these sections. 24 01:59.760 --> 02:06.750 So this one is a section, this is a section, this is a section and it keeps the code nice and organized 25 02:06.750 --> 02:11.790 and you're going to be writing your code in between these section elements in order to create each of 26 02:11.790 --> 02:13.000 these areas. 27 02:13.020 --> 02:15.150 Now, what are you aiming for? 28 02:15.150 --> 02:22.530 Well, you can always refer to the live website at appbrewery.github.io/tindog to see what everything 29 02:22.530 --> 02:23.850 should look like. 30 02:23.850 --> 02:31.170 But I've also provided goal images for each individual section that's marked up to point you to certain 31 02:31.170 --> 02:33.030 areas that need more attention. 32 02:33.030 --> 02:36.900 For example, what's the name of the image that's going to be displayed here? 33 02:36.900 --> 02:43.200 Well, it's iphone.png and you can find it inside the images folder, but also things like this 34 02:43.200 --> 02:48.900 little Apple icon is actually an SVG and you can find those inside the README. 35 02:48.930 --> 02:55.890 So I've included all the SVG code in here and I want you to copy and pasting these SVGs because some 36 02:55.890 --> 03:01.440 of them have different heights, they have different sizes and instead of getting it from the Bootstrap 37 03:01.440 --> 03:05.220 website, which this is from, I want you to use this version. 38 03:05.220 --> 03:08.070 So just copy and paste it into your code. 39 03:08.190 --> 03:15.840 Also, if you scroll down, there's the text copy that you'll need on your website and so you can either 40 03:15.840 --> 03:22.680 copy it straight from the final finished website or you can use the text from the README and just copy 41 03:22.710 --> 03:23.580 it from here. 42 03:23.820 --> 03:27.540 If you're working as a web developer, this is a very common workflow. 43 03:27.570 --> 03:33.120 You'll want your client to create the text copy because they know the most about what they want on their 44 03:33.120 --> 03:38.730 website, and all you have to do is just to place it and style it in the right ways. 45 03:39.000 --> 03:45.180 Now, the final thing I want to mention is if you look inside the style.css, this is going to be your 46 03:45.180 --> 03:47.820 CSS style sheet for the website, 47 03:47.820 --> 03:49.770 you can see that already in there, 48 03:49.770 --> 03:57.900 I've got a class called "gradient-background," and this code comes from a codepen by Manuel Pinto where 49 03:57.900 --> 04:05.550 he created a pure CSS gradient background, and we're simply just using this code but defining some 50 04:05.550 --> 04:07.530 unique colors of our own. 51 04:07.530 --> 04:14.730 And you can see in here we are having our animated gradient, hovers between these three colors, a blue, 52 04:14.760 --> 04:16.830 a red and a sort of peachy color. 53 04:17.160 --> 04:21.570 And that's how we're going to get this gradient background. Similar to other things you've been doing 54 04:21.570 --> 04:22.470 with Bootstrap, 55 04:22.470 --> 04:28.590 in order to get this gradient to show, all you have to do is to add this class to your HTML element 56 04:28.590 --> 04:33.300 and then it will automatically animate with this beautiful color scheme. 57 04:33.600 --> 04:40.140 This project is going to require a little bit of exploration, a little bit of looking around the Bootstrap 58 04:40.140 --> 04:47.760 example, seeing which ones might work and comparing them, for example, which of the Heroes might 59 04:47.760 --> 04:54.840 be the one that we could use, or which of the features might match the one that we've got here, and 60 04:54.840 --> 04:59.270 customizing it and checking its CSS, and 61 04:59.280 --> 05:03.990 making sure that things look pretty much the same as the final outcome. 62 05:04.350 --> 05:09.030 Now it's time for you to pause the video and give this challenge a good go. 63 05:09.060 --> 05:12.000 You might have to spend half an hour, an hour on it, 64 05:12.000 --> 05:14.610 just give yourself lots of time to make mistakes. 65 05:14.610 --> 05:15.600 Try things out. 66 05:15.600 --> 05:17.030 Don't be too harsh on yourself, 67 05:17.040 --> 05:19.830 this is a big project, but I believe in you. 68 05:19.830 --> 05:21.000 I think you can do it. 69 05:21.030 --> 05:23.280 Pause the video now and see how you get on. 70 05:28.770 --> 05:29.130 All right. 71 05:29.130 --> 05:34.880 Hopefully you've completed this challenge and you're just here to see how I'm doing it. 72 05:34.890 --> 05:41.460 If you haven't given this a go, I really recommend you to stop, pause the video and actually try it 73 05:41.460 --> 05:47.190 first because you can listen to me all day long, but you're not going to learn until you actually take 74 05:47.190 --> 05:49.560 the first step and write the code yourself. 75 05:49.560 --> 05:55.020 I know it can be really, really tempting, but I promise you this is the only way you're going to be 76 05:55.020 --> 06:00.480 able to move on to harder things in the future by struggling through each and every single step. 77 06:00.480 --> 06:06.660 Because once we start moving on, I'm going to assume that all of these things are in your toolbelt. 78 06:06.660 --> 06:09.600 So make sure you practice, practice, practice, 79 06:09.600 --> 06:11.790 and this is a perfect opportunity. 80 06:12.060 --> 06:12.420 All right, 81 06:12.420 --> 06:13.230 pep talk over. 82 06:13.230 --> 06:16.200 Let's go ahead and build out this website. 83 06:16.320 --> 06:19.590 Now, the first thing I'm going to do is build out this Title section. 84 06:19.590 --> 06:25.260 So if we take a look at the title-goal, we can see it's pretty much what we call a Hero section. 85 06:25.260 --> 06:32.500 If we take a look inside the Bootstrap Examples and we look inside the Heroes area, you can see 86 06:32.500 --> 06:35.200 it looks incredibly similar to the layout here. 87 06:35.200 --> 06:40.780 It's got some big text, some buttons and an image to the right, which is pretty much what we have. 88 06:40.780 --> 06:48.760 So let's go ahead and right-click, Inspect and scroll up to the top level that contains everything 89 06:48.760 --> 06:53.320 just after the divider and let's copy the entire element. 90 06:53.560 --> 07:01.720 I'm going to paste that element into this section area and let's hit Save and see what it looks like. 91 07:01.720 --> 07:08.350 So I'm going to Show Preview just to get this URL and I'm going to open it inside Chrome so I can see 92 07:08.350 --> 07:09.790 it in full screen. 93 07:09.790 --> 07:13.030 Now you can see this doesn't look like Bootstrap at all. 94 07:13.060 --> 07:15.490 The text is not the right font, 95 07:15.670 --> 07:16.780 and the buttons are not styled, 96 07:16.780 --> 07:18.580 this is just pure HTML. 97 07:18.580 --> 07:22.450 This should give you a big hint as to what is wrong. 98 07:22.450 --> 07:27.670 And that is because we have not yet added a link to the Bootstrap CSS. 99 07:27.820 --> 07:29.920 So let's go ahead and do that now. 100 07:29.920 --> 07:37.750 So if we go back to the main Bootstrap Docs and go to the home page, we should be able to grab hold 101 07:37.750 --> 07:42.310 of the link and we can paste it into our project. 102 07:42.310 --> 07:46.090 So now let's hit Save and go back to our TinDog. 103 07:46.090 --> 07:52.630 We should see that we have what is closer to the example that we saw right here. 104 07:53.200 --> 07:55.720 There's a couple of things that we will need to fix. 105 07:55.720 --> 08:00.430 First, let's go ahead and get rid of this broken image and put in the image that we want. 106 08:00.730 --> 08:02.920 Here is the image. 107 08:02.920 --> 08:09.670 So let's go ahead and change the src to our image, which is inside the images folder. 108 08:09.670 --> 08:11.530 And it's called iphone.png. 109 08:12.040 --> 08:15.430 And let's change the alt to "app demo". 110 08:15.430 --> 08:20.680 Let's hit Save and go back and we can see this is absolutely massive. 111 08:20.680 --> 08:23.470 So now we're going to have to adjust the size. 112 08:23.470 --> 08:27.760 So here it's set to width 700, height 500. 113 08:27.760 --> 08:29.620 I'm going to keep the aspect ratio, 114 08:29.620 --> 08:35.740 so I'm going to delete just the width and hopefully, it will adjust proportionally and I'm going to change 115 08:35.740 --> 08:37.870 the height to 200px. 116 08:37.870 --> 08:40.750 And this looks more or less the right size. 117 08:40.780 --> 08:43.480 Now yours might be a little bit bigger, a little bit smaller. 118 08:43.480 --> 08:46.810 It doesn't really matter as long as it looks good to your eye. 119 08:46.990 --> 08:53.080 Now the next thing we're going to do is let's change all of this text so that it reads the same as the 120 08:53.080 --> 08:54.220 final copy. 121 08:54.220 --> 09:01.210 And to do that, I'm going to find the text inside my README, go ahead and copy and paste it into 122 09:01.210 --> 09:02.530 the right areas. 123 09:02.530 --> 09:09.160 So we've got an h1 and that's where we're going to replace with our big heading, "Meet new and interesting 124 09:09.160 --> 09:10.360 dogs nearby." 125 09:10.360 --> 09:16.510 And then I'm going to delete this paragraph element because we don't actually have it in our final design. 126 09:16.510 --> 09:20.170 And I'm going to change the two buttons to both say "Download." 127 09:20.470 --> 09:28.780 In addition to the Download, there's obviously two SVGs as well, and these are the icons from Bootstrap, 128 09:28.780 --> 09:34.840 but remember I mentioned that you can get hold of these SVGs in the README file, so I'm going to wholesale 129 09:34.840 --> 09:39.880 just copy this Apple SVG and paste it into here. 130 09:39.880 --> 09:48.610 Add a space between the SVG and Download and now hopefully we have a good-looking Apple symbol in the 131 09:48.640 --> 09:53.650 Download button and I'm going to do the same with the Google Play logo. 132 09:56.060 --> 09:57.520 Hit Save and that's it. 133 09:57.520 --> 09:58.310 There it is. 134 09:58.330 --> 10:00.730 We're going to change the color scheme here a little bit. 135 10:00.760 --> 10:06.550 We've got a btn-light and we've got a btn-outline-light so that it would look the same as the 136 10:06.550 --> 10:07.760 final design. 137 10:07.780 --> 10:16.060 Now, right now, this button is a btn- primary, so we're going to have to change that to light. 138 10:16.060 --> 10:19.660 And this one, instead of btn-outline-secondary, 139 10:19.690 --> 10:23.110 we're going to change that to btn-outline-light. 140 10:23.290 --> 10:26.260 Let's hit Save and see what we have. 141 10:26.290 --> 10:32.650 Now you'll notice that this button is almost completely disappeared if not for this rollover effect, 142 10:32.650 --> 10:36.400 and the reason is because it's more or less a white outline. 143 10:36.520 --> 10:39.400 In order for this to show we need a background. 144 10:39.400 --> 10:44.380 So let's go ahead and set it up with this CSS gradient background. 145 10:44.470 --> 10:51.040 Remember I mentioned that if you look inside the style.css file, there is already a class called 146 10:51.040 --> 10:56.540 gradient-background, which we can add into our HTML for it to show up. 147 10:56.540 --> 11:00.350 Now where do we add it? Before we can add it 148 11:00.380 --> 11:07.400 we need to import our CSS and as always, we put our custom CSS after the Bootstrap. 149 11:07.400 --> 11:13.940 So in case there are any collisions in terms of targeting the same selectors, the final one wins out, 150 11:13.940 --> 11:17.180 which hopefully is our CSS. 151 11:17.420 --> 11:23.960 So I'm going to link to the style CSS and then I'm going to put that class gradient-background into 152 11:23.960 --> 11:25.820 my Title section. 153 11:25.820 --> 11:27.560 So where do I put it? 154 11:27.560 --> 11:33.350 Now, if I put it inside the container, you'll see that it's only inside the container and the container's 155 11:33.350 --> 11:35.270 got these big margins on the left and right. 156 11:35.270 --> 11:37.850 So this is not the look that we want. 157 11:37.880 --> 11:42.710 Instead, we're going to put this inside the section. 158 11:42.860 --> 11:47.660 We can't put it into the ID because it's not an ID, it's actually a class. 159 11:47.660 --> 11:51.980 So make sure you've got it set inside the class property. 160 11:52.040 --> 11:53.420 Now let's take a look, 161 11:53.420 --> 11:55.520 and this looks pretty good. 162 11:55.580 --> 12:01.820 Now, the only difference between what we have and what we're aiming for is a lot of padding. 163 12:02.030 --> 12:08.600 Now, the reason I can tell this padding and not margin is because padding extends the background. 164 12:08.600 --> 12:12.560 So if this was an extra margin, then this area would be white, 165 12:12.560 --> 12:16.570 but instead, it's actually the same as the background color. 166 12:16.580 --> 12:19.070 So where does this margin come from? 167 12:19.070 --> 12:26.300 Let's go ahead and hit, Inspect and make this just a little bit smaller so we can see this padding. 168 12:26.300 --> 12:33.080 And if we scroll up until we see the padding show up, you can see that orange down there when I hover 169 12:33.080 --> 12:33.740 over it. 170 12:33.770 --> 12:36.490 Well, that is what we need to get rid of. 171 12:36.500 --> 12:39.800 So you can see we've got padding-top and padding-bottom, 172 12:39.800 --> 12:45.530 and if we get rid of the top and bottom, it will look a little bit too much. 173 12:45.530 --> 12:51.530 So if we just target the bottom, then we've got more or less the right layout. 174 12:51.620 --> 12:56.720 So let's go in here and find that "py-5" for the container which is right here. 175 12:56.720 --> 13:01.880 And remember, the "p" stands for padding, the "y" stands for the y-axis. 176 13:01.880 --> 13:05.210 So it means it's adding padding to the top and the bottom. 177 13:05.210 --> 13:12.770 So if we want to change this to only have it on the top, then we change this to "pt", padding-top and then 178 13:12.770 --> 13:16.760 we've got another div that has the padding on top and bottom as well, 179 13:16.760 --> 13:18.200 so let's change it there. 180 13:18.200 --> 13:23.690 And then when we go back we should see that we have pretty much the same layout. 181 13:23.780 --> 13:30.140 And now if we compare our layout to the final outcome, it looks pretty much exactly the same. 182 13:30.500 --> 13:35.120 So we can now move on to our next section, which is the Features section. 183 13:35.780 --> 13:43.580 If we open up our features-goal, you can see that we've got three different areas with all of the features 184 13:43.580 --> 13:48.200 that we want to show off, and we've got this sort of rough layout. 185 13:48.500 --> 13:55.160 If we go back to the Bootstrap Examples and if we look inside the Snippets at the features, you can 186 13:55.160 --> 13:59.090 see this is pretty much the same layout as what we're aiming for. 187 13:59.090 --> 14:05.710 So let's go ahead and Inspect and find that row that we need to get hold of. 188 14:05.720 --> 14:11.330 Let's copy the element and put it inside our index.html. 189 14:12.200 --> 14:16.640 Now once we paste it in, let's hit Save and see it. 190 14:16.670 --> 14:23.090 You can see this is occupying pretty much the entire full width, which is not quite what we want. 191 14:23.120 --> 14:28.220 We actually want it all to be roughly along the same vertical line. 192 14:28.220 --> 14:29.740 So why is this? 193 14:29.750 --> 14:35.240 Well, it's because the top level here is a Bootstrap row. 194 14:35.270 --> 14:40.160 If we want it to be contained, then we need to add a container. 195 14:40.160 --> 14:47.930 So let's add that container class and then let's move this closing tag to wrap it around all of this. 196 14:47.960 --> 14:48.950 Hit Save. 197 14:48.950 --> 14:53.000 And now you can see we've got that perfect alignment. 198 14:53.570 --> 14:55.520 The next thing we need to do is 199 14:55.540 --> 15:00.820 we need to get rid of all of these buttons and that is pretty easy. 200 15:00.820 --> 15:02.730 They're just these anchor tags. 201 15:02.740 --> 15:07.120 So there's one there, there's one here and there's one up here. 202 15:08.170 --> 15:11.470 So now we're pretty much on the design we're looking for, 203 15:11.500 --> 15:14.080 all we need to do is replace the text. 204 15:14.170 --> 15:19.600 This is probably a little bit boring, so I'm going to use video editing to speed things up a bit for 205 15:19.600 --> 15:20.050 you. 206 15:21.560 --> 15:21.950 All right. 207 15:21.950 --> 15:28.780 So now that we've got all of our custom copy in, the final thing we need to fix are these SVGs. 208 15:28.790 --> 15:35.350 So let's go ahead and replace the SVGs that are in the example with the ones that we want. 209 15:35.360 --> 15:40.580 So the first one is going to be the Checkmark SVG. Let's copy and paste it in. 210 15:40.970 --> 15:44.720 The second one is the graduation Hat. 211 15:47.260 --> 15:51.490 And the final one is the Heart with an arrow through it. 212 15:52.420 --> 16:00.370 So now that we've replaced all of our SVGs, you can see them show up, but the background doesn't look 213 16:00.370 --> 16:01.270 quite the same. 214 16:01.270 --> 16:05.020 It should have these rounded corners, it should be a little bit larger, 215 16:05.020 --> 16:08.980 and when look on the Bootstrap example where we copied our code from, 216 16:08.980 --> 16:10.570 they look perfect. 217 16:10.570 --> 16:14.920 But why is it that when it's in our website it doesn't quite look the same? 218 16:15.040 --> 16:20.470 Now this might be something that you got stuck on, but in order to figure this out, the easiest way 219 16:20.470 --> 16:22.090 is to Inspect on it 220 16:22.090 --> 16:29.770 in Chrome. You can see right now I'm highlighting the SVG, but if I go one level above and hover on 221 16:29.770 --> 16:34.270 that div, that is the one with all of that fancy styling. 222 16:34.360 --> 16:41.350 And if we look inside the styles, you can see there's actually some custom CSS in here because it's 223 16:41.350 --> 16:45.190 not in the utilities which comes from Bootstrap. 224 16:45.220 --> 16:49.970 This is actually custom CSS just for this Feature section. 225 16:49.970 --> 16:57.320 So what we need to do is we need to copy all of the CSS and put it inside our style.css. 226 16:57.740 --> 17:05.720 So now this icon square, which is the class for this div, can be activated 227 17:05.720 --> 17:12.650 and when we look at it now, you can see that they all have the right styling that we expected. 228 17:12.770 --> 17:19.040 So the final thing we need to sort out is just to add a little bit more margin in this Features section 229 17:19.040 --> 17:20.710 and then we're pretty much done. 230 17:20.720 --> 17:28.070 So if we look at the features-goal, you can see I've given you a hint that it's actually margin-top 231 17:28.070 --> 17:29.000 5. 232 17:29.210 --> 17:36.200 If we want to add some margin to this entire container, then we can go up to the div class where we 233 17:36.200 --> 17:41.210 have the container and then we add margin-top 5, mt-5, 234 17:41.210 --> 17:47.180 and now we should have enough space between that top-title section and our Feature section. 235 17:47.180 --> 17:51.320 So we're now ready to move on to the Testimonial section. 236 17:51.770 --> 17:55.210 Again, let's take a look at the goal that we're looking for. 237 17:55.220 --> 18:00.800 So the first section is an h2 with an image and some paragraph text. 238 18:01.160 --> 18:09.740 This area comes from this Jumbotron section, and if we scroll down, we can see this full width jumbotron 239 18:09.740 --> 18:10.790 right here. 240 18:10.790 --> 18:18.950 So let's go ahead and Inspect on it and let's take the entire section just after the divider. 241 18:18.950 --> 18:25.670 So let's copy the element and paste it into our Testimonial section. 242 18:26.180 --> 18:28.430 Let's take a look at what that looks like. 243 18:28.460 --> 18:32.900 It looks pretty good, but we need to modify it for our purposes. 244 18:32.900 --> 18:35.690 So let's change the text inside. 245 18:35.690 --> 18:43.550 If we go over to our README, we should see our quote here from Pebbles and we can replace the text 246 18:43.550 --> 18:45.050 inside the h1. 247 18:45.530 --> 18:51.710 Remember from our HTML classes we should only have one h1 per website, 248 18:51.710 --> 18:56.600 and remember at the beginning in our Title section we've already got our big heading. 249 18:56.600 --> 19:00.170 So here it should really not be a h1. 250 19:00.170 --> 19:05.060 Let's turn it into a subheading by changing that to a h2. 251 19:06.620 --> 19:14.150 Now this paragraph element, I could delete it, but I'm actually going to keep it and use it for showing 252 19:14.150 --> 19:19.640 the name where the quote comes from, which is Pebbles from New York. 253 19:19.670 --> 19:28.910 And all I have to do now is add an image in between, and the image is going to be our dog-img and 254 19:28.910 --> 19:31.460 I'm going to add the alt text as well. 255 19:32.510 --> 19:34.790 Let's take a look at what that looks like. 256 19:34.820 --> 19:35.700 It looks great. 257 19:35.720 --> 19:41.960 Other than the fact that this should be rounded and it should be a little bit smaller. If we look at 258 19:41.960 --> 19:46.460 the goal, we can see it should be 100px high and it should be circular. 259 19:46.550 --> 19:49.730 So how do we make it custom? 260 19:49.730 --> 19:52.980 Well, we're going to need to create some styling, right? 261 19:53.000 --> 20:03.110 So let's create a class called "profile-img" and let's set it to have a height of 100px, 262 20:03.110 --> 20:09.240 and in order to make it circular, remember, we need to set the border-radius to 50%. 263 20:09.300 --> 20:19.470 Now, if we apply that class to our image, profile-img and we look at our website and you can 264 20:19.470 --> 20:24.570 see that looks pretty much perfect and similar to what we've got here. 265 20:24.780 --> 20:28.800 Now, the only thing we need to add is just a little bit more margin. 266 20:29.580 --> 20:36.120 We should have a margin of 5 between these two sections and a margin of 2 between these two sections. 267 20:36.120 --> 20:39.540 So I'm just going to add some margin top to the image. 268 20:39.540 --> 20:49.610 So a size 5 margin to the image so I can hit space on the class and then do mt-5, 269 20:49.620 --> 20:56.370 and then for the text, I'm going to do a class of mt-2. 270 20:56.670 --> 21:04.320 And now we should have enough space in between everything and it looks pretty much the same as the example. 271 21:04.710 --> 21:12.480 Now we need to add in all of these outlets that have featured our startup, and you can see from the 272 21:12.510 --> 21:21.510 goal-image here that we've got a 12-column grid here from Bootstrap and they're each occupying a fourth 273 21:21.510 --> 21:22.710 of the space. 274 21:22.740 --> 21:29.790 But notice here where I've said it should take up three columns on desktop, but a full width, 12 columns 275 21:29.790 --> 21:30.630 on mobile. 276 21:30.630 --> 21:36.540 So it should be responsive and we can find all these images in the images folder. 277 21:36.660 --> 21:46.140 Let's go ahead and add that below this container. In order to create the Bootstrap 12-column layout system, 278 21:46.140 --> 21:49.430 the first thing we always need is a container. 279 21:49.440 --> 21:58.860 So let's create a div of class container, and inside here is where we need our div that has a class of 280 21:58.860 --> 21:59.810 row. 281 21:59.820 --> 22:02.810 So now we're ready to create our columns. 282 22:02.820 --> 22:13.110 Each of the columns are going to be three columns in the desktop format, so that's col-lg (large) 283 22:13.110 --> 22:18.360 and it's going to be -3, but on mobile, 284 22:18.360 --> 22:22.500 so col-sm, small is going to be full width, 285 22:22.500 --> 22:29.730 so 12. And inside here we can place our image which is from the images folder and we're going to start 286 22:29.730 --> 22:34.860 off with TechCrunch and I'm going to add the alt text as that. 287 22:35.100 --> 22:42.750 Now I'm going to copy this and paste it three times and now I'm just going to replace each of these 288 22:42.750 --> 22:45.480 images with the ones that we have here. 289 22:45.480 --> 22:49.140 So Mashable, Business Insider and TMW. 290 22:50.100 --> 22:50.580 All right. 291 22:50.580 --> 22:56.250 So now we should have all of our images, but they are a little bit large. 292 22:57.000 --> 23:03.780 One thing we can do is we can limit their height so that they are all equal in height instead of having 293 23:03.780 --> 23:06.660 this uneven start and end line. 294 23:06.660 --> 23:15.780 So I'm going to set the height to 30 and that should be enough height to be visible, but not so much 295 23:15.780 --> 23:21.090 height that it takes up too much space and that looks pretty good. 296 23:21.210 --> 23:27.660 So now we're done with our Testimonial section and we are on our penultimate section, which is the 297 23:27.660 --> 23:28.920 Pricing plan. 298 23:28.920 --> 23:35.940 And as you'll remember, Bootstrap has the Pricing plan section right here. 299 23:36.600 --> 23:40.560 And these three cards are the ones that we want to get hold of. 300 23:40.590 --> 23:46.970 So let's Inspect on that and find the area that we need, which is probably this div row. 301 23:46.980 --> 23:50.880 So let's copy it and put it inside the pricing section, 302 23:50.880 --> 23:56.630 but as you remember, a div row needs to go inside a container. 303 23:56.640 --> 23:58.740 So let's go ahead and do that. 304 23:58.740 --> 24:04.050 And if we look at our pricing table then it's already in and looks pretty good. 305 24:04.260 --> 24:11.820 The other section we need is a title for the pricing table, which is this area right here, and this 306 24:11.820 --> 24:15.210 is the div that contains all of that content. 307 24:15.210 --> 24:21.960 So let's just copy it and put it at the beginning of our container right here. 308 24:22.290 --> 24:26.430 So now we've pretty much got the pricing table down. 309 24:26.430 --> 24:33.000 We just need to update all of the text here to the ones that we have in our copy. 310 24:33.030 --> 24:35.370 So I'm going to do this again quickly. 311 24:35.370 --> 24:38.890 I'm going to fast forward and replace all the text. 312 24:47.070 --> 24:53.460 All right, so now all the text has been replaced and you should see all of that text inside the Pricing 313 24:53.460 --> 24:54.240 section. 314 24:54.240 --> 24:56.790 So now we need to update the design a little bit. 315 24:56.790 --> 25:04.620 And the main difference is the color scheme here is all using the Bootstrap primary color, which is 316 25:04.620 --> 25:05.640 this blue, 317 25:05.640 --> 25:12.030 but we need to change it all to the dark kind of color, which is this kind of black color. 318 25:12.270 --> 25:18.300 And if you look inside the pricing goal, you can see the parts that we need to change. 319 25:18.960 --> 25:20.910 This needs to become outline-dark, 320 25:20.940 --> 25:22.980 this needs to be btn-dark, btn-dark, 321 25:22.980 --> 25:24.570 and this also needs to be dark. 322 25:24.810 --> 25:32.790 A shortcut here is to simply use the Ctrl + F on Windows or command + F on Mac in order to bring up our 323 25:32.790 --> 25:33.660 search bar. 324 25:33.660 --> 25:41.460 And if we search for the word primary and we replace it with dark, then we can actually go through 325 25:41.460 --> 25:45.700 each of these examples and see if we want to replace it. 326 25:45.700 --> 25:50.770 What I recommend doing is to actually do this one by one. 327 25:50.770 --> 25:56.230 So instead of doing replace all, because that way you can see which parts you're replacing, 328 25:56.230 --> 26:02.200 and many times I've done replace all only to find out that I've messed up the entire project in some 329 26:02.200 --> 26:02.860 big way. 330 26:02.860 --> 26:04.840 So just a word of advice, 331 26:04.870 --> 26:06.340 go through it one by one, 332 26:06.340 --> 26:10.150 make sure that it makes sense and it's the right area that you're changing. 333 26:10.150 --> 26:15.550 But hopefully, when we go back to our website, we can see we've now updated all of the right places 334 26:15.550 --> 26:17.650 to this dark color scheme. 335 26:18.220 --> 26:26.740 Coming back to our pricing-goal, we can see that this title needs to be an h2 and this subtitle needs 336 26:26.740 --> 26:28.120 to be a paragraph element. 337 26:28.120 --> 26:35.470 So let's go into our section and make sure that is the case, because when we copied it over, it actually 338 26:35.470 --> 26:37.240 gave us an h1. 339 26:37.270 --> 26:42.790 Now the styling is not going to change because it actually comes from the display for class. 340 26:42.790 --> 26:49.660 So you won't see the size change that much or the color scheme because it is actually not dependent 341 26:49.660 --> 26:51.760 on the HTML element. 342 26:51.760 --> 26:57.400 And this happens very frequently with Bootstrap, so we're able to adjust that pretty easily. 343 26:57.490 --> 27:01.870 And now we're ready for our final section, which is the Footer. 344 27:01.870 --> 27:08.920 So let's find ourselves the Footer Snippets and let's find the one that looks like one that we want, 345 27:08.920 --> 27:14.260 or one that is similar to the one in the Example, which is this one right here. 346 27:14.260 --> 27:21.220 And let's find the container that we can copy and put into our Footer section. 347 27:21.940 --> 27:29.560 So now straight up we can see our Footer section show up and all we need to do is to adapt it to our 348 27:29.560 --> 27:30.460 design. 349 27:30.700 --> 27:35.950 Firstly, you'll notice there's this area that you can't really see, but when you hover it, it seems 350 27:35.950 --> 27:37.120 to be clickable. 351 27:37.120 --> 27:44.080 And if we refer to our code, you can see this is actually a link that links to the Bootstrap logo. 352 27:44.080 --> 27:46.810 So let's go ahead and delete that, 353 27:46.810 --> 27:54.880 but let's change this paragraph class to copyright (@) and then the name of our company, TinDog. 354 27:55.030 --> 28:01.030 And I'm going to leave these links alone because I don't know, maybe in the future you'll want to use 355 28:01.030 --> 28:05.440 this website and put in some different links to different sections. 356 28:05.440 --> 28:11.230 But for now it just kind of looks more or less the right kind of style that we would want on a startup 357 28:11.230 --> 28:11.950 website. 358 28:11.950 --> 28:16.240 So let's leave that alone, but let's get rid of this border line here. 359 28:16.240 --> 28:18.220 And this border came from the footer. 360 28:18.220 --> 28:20.530 So there should be a hint in here. 361 28:20.530 --> 28:26.590 If we look at the footer element, you can see there's the border-top class, which again comes from 362 28:26.590 --> 28:31.750 Bootstrap, but it's a really simple way of adding some borders to the top left or right. 363 28:31.750 --> 28:34.630 But once we delete it and that's completely gone. 364 28:34.630 --> 28:40.990 So the final thing we need to do is just to add that gradient background to the footer area and then 365 28:40.990 --> 28:42.430 we are pretty much done. 366 28:42.430 --> 28:51.240 So let's take that section footer and add the class gradient-background, and now hit Save, 367 28:51.240 --> 28:58.260 and we should see that we have almost the same website as the final result. 368 28:58.410 --> 29:03.840 The only thing that we need to do now is to get rid of this little bit of space at the bottom. 369 29:03.960 --> 29:07.950 And the fact that it's white should give you a hint as to what it is. 370 29:08.910 --> 29:17.430 If we select our Footer section and we go into the section, look inside the container, at some point 371 29:17.430 --> 29:21.180 our hover is going to show us where that margin comes from. 372 29:21.180 --> 29:26.220 And right here you can see that orange box showing that margin at the bottom. 373 29:26.220 --> 29:30.780 So if we select it, we should see there are some margin classes applied. 374 29:30.780 --> 29:36.600 So there's a margin-top, which I think we should probably keep because it adds a good amount of spacing 375 29:36.600 --> 29:38.130 between the different sections. 376 29:38.130 --> 29:44.100 But the margin-bottom we could probably get rid of so that we don't have that white space down there. 377 29:44.100 --> 29:45.570 So let's find this 378 29:45.990 --> 29:55.050 my-5 class in our footer element and it's right here and let's change it instead of y to just having 379 29:55.050 --> 29:56.340 it on top. 380 29:56.340 --> 29:59.220 And now let's hit Save and Refresh. 381 29:59.220 --> 30:04.470 And you can see we have now completed our design for our website. 382 30:04.890 --> 30:06.720 In less than half an hour, 383 30:06.720 --> 30:14.760 we've managed to build an incredibly complex and beautiful website for our TinDog startup. 384 30:14.790 --> 30:21.090 I hope our clients will be pleased because we've created this amazing, incredibly modern looking website 385 30:21.090 --> 30:28.170 for them and we should be pleased because it only took us so little time to do by leveraging the power 386 30:28.170 --> 30:34.980 of the Bootstrap Components and using the different Helper Classes, Utilities, as well as Snippets 387 30:34.980 --> 30:36.210 that they provide. 388 30:36.420 --> 30:42.720 Hopefully, this gives you an insight into how we can use Bootstrap to create beautiful, complex websites 389 30:42.720 --> 30:43.560 quickly. 390 30:43.560 --> 30:50.830 And also you see the difference between what CSS grid, Flexbox and Bootstrap are all good for. 391 30:50.860 --> 30:58.330 They all have different strengths and weaknesses and I think Bootstrap is really good for throwing some 392 30:58.330 --> 31:03.220 components down and creating something that looks incredibly modern very, very quickly. 393 31:03.220 --> 31:08.980 Whereas Flexbox and Grid are great when you want to get into the nitty-gritty of creating a very, very 394 31:08.980 --> 31:12.370 custom layout for your website. 395 31:12.670 --> 31:15.130 So well done on completing this section. 396 31:15.130 --> 31:20.110 And in the next section we've got the Capstone project for CSS. 397 31:20.110 --> 31:22.660 So once you're ready, head over to the next section.