All right. 1
So now that you've learned all about Bootstrap, it's time to apply what we've learned and build a project. 2
I want you to imagine that a startup has approached you to build their landing page. 3
So the company is called TinDog, and they make basically tinder for dogs, helping dogs meet new and 4
interesting dogs nearby. 5
Obviously this is a fake startup that I've created. 6
Now, if you want to go ahead and steal this idea, then I fully support you. 7
But essentially the idea is very simple. 8
You have a dog, you want your dog to have friends, so let's use tin dog. 9
Now our website is pretty fully fledged and if you want to look at what the finished product looks like, 10
head over to appbrewery.github.io/tindog 11
And this is what you'll see. 12
It's a really simple startup website with an animated gradient background with buttons to download the 13
app, as well as features, testimonials, pricing, and a footer. 14
We're going to be creating this beautiful website, and the way we're going to do it is through the 15
use of the different Snippets that are provided by Bootstrap as well as the different Components and 16
using Bootstrap Layout to get it responsive and looking beautiful on desktop and mobile straight out 17
of the box. 18
To get started first download the TinDog project, unzip the file and open it inside VS Code. 19
Now here I want you to open up the index.html and you can see I've provided some comments and some Section 20
HTML elements. 21
These section elements are mostly used to separate different sections of a website, so it's just a 22
group or area of the website. 23
And in modern websites you'll see very often these sections. 24
So this one is a section, this is a section, this is a section and it keeps the code nice and organized 25
and you're going to be writing your code in between these section elements in order to create each of 26
these areas. 27
Now, what are you aiming for? 28
Well, you can always refer to the live website at appbrewery.github.io/tindog to see what everything 29
should look like. 30
But I've also provided goal images for each individual section that's marked up to point you to certain 31
areas that need more attention. 32
For example, what's the name of the image that's going to be displayed here? 33
Well, it's iPhone.png and you can find it inside the images folder, but also things like this 34
little Apple icon is actually an SVG and you can find those inside the README. 35
So I've included all the SVG code in here and I want you to be copy and pasting these svgs because some 36
of them have different heights, they have different sizes and instead of getting it from the Bootstrap 37
website, which this is from, I want you to use this version. 38
So just copy and paste it into your code. 39
Also, if you scroll down, there's the text copy that you'll need on your website and so you can either 40
copy it straight from the final finished website or you can use the text from the README and just copy 41
it from here. 42
If you're working as a web developer, this is a very common workflow. 43
You'll want your client to create the text copy because they know the most about what they want on their 44
website, and all you have to do is just place it and style it in the right ways. 45
Now, the final thing I want to mention is if you look inside the style.css, this is going to be your 46
CSS style sheet for the website. 47
You can see that already in there. 48
I've got a class called "gradient-background," and this code comes from a codepen by Manuel Pinto where 49
he created a pure CSS gradient background, and we're simply just using this code but defining some 50
unique colors of our own. 51
And you can see in here we are having our animated gradient, hovers between these three colors, a blue, 52
a red and a sort of peachy color. 53
And that's how we're going to get this gradient background. Similar to other things you've been doing 54
with Bootstrap, 55
in order to get this gradient to show, all you have to do is to add this class to your HTML element 56
and then it will automatically animate with this beautiful color scheme. 57
This project is going to require a little bit of exploration, a little bit of looking around the Bootstrap 58
example, seeing which ones might work and comparing them, for example, which of the Heroes might 59
be the one that we could use, or which of the features might match the one that we've got here, and 60
customizing it and checking its CSS, and 61
making sure that things look pretty much the same as the final outcome. 62
Now it's time for you to pause the video and give this challenge a good go. 63
You might have to spend half an hour, an hour on it. 64
Just give yourself lots of time to make mistakes. 65
Try things out. 66
Don't be too harsh on yourself. 67
This is a big project, but I believe in you. 68
I think you can do it. 69
Pause the video now and see how you get on. 70
All right. 71
Hopefully you've completed this challenge and you're just here to see how I'm doing it. 72
If you haven't given this a go, I really recommend you to stop, pause the video and actually try it 73
first because you can listen to me all day long, but you're not going to learn until you actually take 74
the first step and write the code yourself. 75
I know it can be really, really tempting, but I promise you this is the only way you're going to be 76
able to move on to harder things in the future by struggling through each and every single step. 77
Because once we start moving on, I'm going to assume that all of these things are in your tool belt. 78
So make sure you practice, practice, practice. 79
And this is a perfect opportunity. 80
All right, 81
pep talk over. 82
Let's go ahead and build out this website. 83
Now, the first thing I'm going to do is build out this Title section. 84
So if we take a look at the title-goal, we can see it's pretty much what we call a Hero section. 85
If we take a look inside the Bootstrap Examples and we look inside the Hero's area, you can see 86
it looks incredibly similar to the layout here. 87
It's got some big text, some buttons and an image to the right, which is pretty much what we have. 88
So let's go ahead and right-click, Inspect and scroll up to the top level that contains everything 89
just after the divider and let's copy the entire element. 90
I'm going to paste that element into this section area and let's hit save and see what it looks like. 91
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
it in full screen. 93
Now you can see this doesn't look like Bootstrap at all. 94
The text is not the right font, 95
and the buttons are not styled, 96
this is just pure HTML. 97
This should give you a big hint as to what is wrong. 98
And that is because we have not yet added a link to the Bootstrap CSS. 99
So let's go ahead and do that now. 100
So if we go back to the main Bootstrap Docs and go to the home page, we should be able to grab hold 101
of the link and we can paste it into our project. 102
So now let's hit, save and go back to our TinDog. 103
We should see that we have what is closer to the example that we saw right here. 104
There's a couple of things that we will need to fix. 105
First, let's go ahead and get rid of this broken image and put in the image that we want. 106
Here is the image. 107
So let's go ahead and change the source to our image, which is inside the images folder. 108
And it's called iPhone.png. 109
And let's change the alt to "app demo". 110
Let's hit, save and go back and we can see this is absolutely massive. 111
So now we're going to have to adjust the size. 112
So here it's set to width, 700 height, 500. 113
I'm going to keep the aspect ratio. 114
So I'm going to delete just the width and hopefully it will adjust proportionally and I'm going to change 115
the height to 200px. 116
And this looks more or less the right size. 117
Now yours might be a little bit bigger, a little bit smaller. 118
It doesn't really matter as long as it looks good to your eye. 119
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
final copy. 121
And to do that, I'm going to find the text inside my README, go ahead and copy and paste it into 122
the right areas. 123
So we've got an h1 and that's where we're going to replace with our big heading, "Meet new and interesting 124
dogs nearby." 125
And then I'm going to delete this paragraph element because we don't actually have it in our final design. 126
And I'm going to change the two buttons to both say "Download." 127
In addition to the download, there's obviously two SVGs as well, and these are the icons from Bootstrap, 128
but remember I mentioned that you can get hold of these SVGs in the README file, so I'm going to wholesale 129
just copy this Apple SVG and paste it into here. 130
Add a space between the SVG and Download and now hopefully we have a good-looking Apple symbol in the 131
Download button and I'm going to do the same with the Google Play logo. 132
Hit save and that's it. 133
There it is. 134
We're going to change the color scheme here a little bit. 135
We've got a btn-light and we've got a btn-outline-light so that it would look the same as the 136
final design. 137
Now, right now, this button is a btn- primary, so we're going to have to change that to light. 138
And this one, instead of btn-outline-secondary, 139
we're going to change that to btn-outline-light. 140
Let's hit, save and see what we have. 141
Now you'll notice that this button is almost completely disappeared if not for this rollover effect, 142
and the reason is because it's more or less a white outline. 143
In order for this to show we need a background. 144
So let's go ahead and set it up with this CSS gradient background. 145
Remember I mentioned that if you look inside the style.css file, there is already a class called 146
gradient-background, which we can add into our HTML for it to show up. 147
Now where do we add it? Before we can add it 148
we need to import our CSS and as always, we put our custom CSS after the Bootstrap. 149
So in case there are any collisions in terms of targeting the same selectors, the final one wins out, 150
which hopefully is our CSS. 151
So I'm going to link to the style CSS and then I'm going to put that class gradient-background into 152
my Title section. 153
So where do I put it? 154
Now, if I put it inside the container, you'll see that it's only inside the container and the container's 155
got these big margins on the left and right. 156
So this is not the look that we want. 157
Instead, we're going to put this inside the section. 158
We can't put it into the ID because it's not an ID, it's actually a class. 159
So make sure you've got it set inside the class property. 160
Now let's take a look, 161
and this looks pretty good. 162
Now, the only difference between what we have and what we're aiming for is a lot of padding. 163
Now, the reason I can tell this padding and not margin is because padding extends the background. 164
So if this was an extra margin, then this area would be white, 165
but instead, it's actually the same as the background color. 166
So where does this margin come from? 167
Let's go ahead and hit, Inspect and make this just a little bit smaller so we can see this padding. 168
And if we scroll up until we see the padding show up, you can see that orange down there when I hover 169
over it. 170
Well, that is what we need to get rid of. 171
So you can see we've got padding-top and padding-bottom, 172
and if we get rid of the top and bottom, it will look a little bit too much. 173
So if we just target the bottom, then we've got more or less the right layout. 174
So let's go in here and find that py-5 for the container which is right here. 175
And remember, the P stands for padding, the Y stands for the y-axis. 176
So it means it's adding padding to the top and the bottom. 177
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
we've got another div that has the padding on top and bottom as well, 179
so let's change it there. 180
And then when we go back we should see that we have pretty much the same layout. 181
And now if we compare our layout to the final outcome, it looks pretty much exactly the same. 182
So we can now move on to our next section, which is the Features section. 183
If we open up our features goal, you can see that we've got three different areas with all of the features 184
that we want to show off, and we've got this sort of rough layout. 185
If we go back to the Bootstrap examples and if we look inside the Snippets at the features, you can 186
see this is pretty much the same layout as what we're aiming for. 187
So let's go ahead and Inspect and find that row that we need to get hold of. 188
Let's copy the element and put it inside our index.html. 189
Now once we paste it in, let's hit, save and see it. 190
You can see this is occupying pretty much the entire full width, which is not quite what we want. 191
We actually want it all to be roughly along the same vertical line. 192
So why is this? 193
Well, it's because the top level here is a Bootstrap row. 194
If we want it to be contained, then we need to add a container. 195
So let's add that container class and then let's move this closing tag to wrap it around all of this. 196
Hit save. 197
And now you can see we've got that perfect alignment. 198
The next thing we need to do is. 199
Is that we need to get rid of all of these buttons and that is pretty easy. 200
They're just these anchor tags. 201
So there's one there, there's one here and there's one up here. 202
So now we're pretty much on the design we're looking for. 203
All we need to do is replace the text. 204
This is probably a little bit boring, so I'm going to use video editing to speed things up a bit for 205
you. 206
All right. 207
So now that we've got all of our custom copy in, the final thing we need to fix are these SVGs. 208
So let's go ahead and replace the SVGs that are in the example with the ones that we want. 209
So the first one is going to be the Checkmark SVG. Let's copy and paste it in. 210
The second one is the Graduation Hat. 211
And the final one is the Heart with an arrow through it. 212
So now that we've replaced all of our SVGs, you can see them show up, but the background doesn't look 213
quite the same. 214
It should have these rounded corners, it should be a little bit larger, 215
and when look on the Bootstrap example where we copied our code from, 216
they look perfect. 217
But why is it that when it's in our website it doesn't quite look the same? 218
Now this might be something that you got stuck on, but in order to figure this out, the easiest way 219
is to Inspect on it 220
in Chrome. You can see right now I'm highlighting the SVG, but if I go one level above and hover on 221
that div, that is the one with all of that fancy styling. 222
And if we look inside the styles, you can see there's actually some custom CSS in here because it's 223
not in the Utilities which comes from Bootstrap. 224
This is actually custom CSS just for this feature section. 225
So what we need to do is we need to copy all of the CSS and put it inside our style.css. 226
So now this icon square, which is the class for this div, can be activated 227
and when we look at it now, you can see that they all have the right styling that we expected. 228
So the final thing we need to sort out is just to add a little bit more margin in this Features section 229
and then we're pretty much done. 230
So if we look at the features goal, you can see I've given you a hint that it's actually margin-top 231
5. 232
If we want to add some margin to this entire container, then we can go up to the div class where we 233
have the container and then we add margin-top 5, mt-5, 234
and now we should have enough space between that top title section and our feature section. 235
So we're now ready to move on to the Testimonial Section. 236
Again, let's take a look at the goal that we're looking for. 237
So the first section is an h2 with an image and some paragraph text. 238
This area comes from this Jumbotron section, and if we scroll down, we can see this full width jumbotron 239
right here. 240
So let's go ahead and Inspect on it and let's take the entire section just after the divider. 241
So let's copy the element and paste it into our Testimonial section. 242
Let's take a look at what that looks like. 243
It looks pretty good, but we need to modify it for our purposes. 244
So let's change the text inside. 245
If we go over to our README, we should see our quote here from Pebbles and we can replace the text 246
inside the h1. 247
Remember from our HTML classes we should only have one h1 per website, 248
and remember at the beginning in our title section we've already got our big heading. 249
So here it should really not be an h1. 250
Let's turn it into a subheading by changing that to an h2. 251
Now this paragraph element, I could delete it, but I'm actually going to keep it and use it for showing 252
the name where the quote comes from, which is Pebbles from New York. 253
And all I have to do now is add an image in between, and the image is going to be our dog image and 254
I'm going to add the alt text as well. 255
Let's take a look at what that looks like. 256
It looks great. 257
Other than the fact that this should be rounded and it should be a little bit smaller. If we look at 258
the goal, we can see it should be 100px high and it should be circular. 259
So how do we make it custom? 260
Well, we're going to need to create some styling, right? 261
So let's create a class called profile-img and let's set it to have a height of 100px, 262
and in order to make it circular, remember, we need to set the border radius to 50%. 263
Now, if we apply that class to our image, profile-img and we look at our website and you can 264
see that looks pretty much perfect and similar to what we've got here. 265
Now, the only thing we need to add is just a little bit more margin. 266
We should have a margin of 5 between these two sections and a margin of 2 between these two sections. 267
So I'm just going to add some margin top to the image. 268
So a size 5 margin to the image so I can hit space on the class and then do mt-5, 269
and then for the text, I'm going to do a class of mt-2. 270
And now we should have enough space in between everything and it looks pretty much the same as the example. 271
Now we need to add in all of these outlets that have featured our startup, and you can see from the 272
goal-image here that we've got a 12-column grid here from Bootstrap and they're each occupying a fourth 273
of the space. 274
But notice here where I've said it should take up three columns on desktop, but a full width, 12 columns 275
on mobile. 276
So it should be responsive and we can find all these images in the images folder. 277
Let's go ahead and add that below this container. In order to create the Bootstrap 12-column layout system, 278
the first thing we always need is a container. 279
So let's create a div of class container and inside here is where we need our div that has a class of 280
row. 281
So now we're ready to create our columns. 282
Each of the columns are going to be three columns in the desktop format, so that's col-large 283
and it's going to be -3, but on mobile, 284
so col-sm, small is going to be full width, 285
so 12. And inside here we can place our image which is from the images folder and we're going to start 286
off with TechCrunch and I'm going to add the alt text as that. 287
Now I'm going to copy this and paste it three times and now I'm just going to replace each of these 288
images with the ones that we have here. 289
So Mashable, Business Insider and TMW. 290
All right. 291
So now we should have all of our images, but they are a little bit large. 292
One thing we can do is we can limit their height so that they are all equal in height instead of having 293
this uneven start and end line. 294
So I'm going to set the height to 30 and that should be enough height to be visible, but not so much 295
height that it takes up too much space and that looks pretty good. 296
So now we're done with our Testimonial Section and we are on our penultimate section, which is the 297
Pricing plan. 298
And as you'll remember, Bootstrap has the Pricing Plan section right here. 299
And these three cards are the ones that we want to get hold of. 300
So let's Inspect on that and find the area that we need, which is probably this div row. 301
So let's copy it and put it inside the pricing section, 302
but as you remember, a div row needs to go inside a container. 303
So let's go ahead and do that. 304
And if we look at our pricing table then it's already in and looks pretty good. 305
The other section we need is a title for the pricing table, which is this area right here, and this 306
is the div that contains all of that content. 307
So let's just copy it and put it at the beginning of our container right here. 308
So now we've pretty much got the pricing table down. 309
We just need to update all of the text here to the ones that we have in our copy. 310
So I'm going to do this again quickly. 311
I'm going to fast forward and replace all the text. 312
All right, so now all the text has been replaced and you should see all of that text inside the Pricing 313
Section. 314
So now we need to update the design a little bit. 315
And the main difference is the color scheme here is all using the Bootstrap primary color, which is 316
this blue, 317
but we need to change it all to the dark kind of color, which is this kind of black color. 318
And if you look inside the pricing goal, you can see the parts that we need to change. 319
This needs to become outline-dark. 320
this needs to be btn-dark, btn-dark, 321
and this also needs to be dark. 322
A shortcut here is to simply use the Ctrl + F on Windows or command + F on Mac in order to bring up our 323
search bar. 324
And if we search for the word primary and we replace it with dark, then we can actually go through 325
each of these examples and see if we want to replace it. 326
What I recommend doing is to actually do this one by one. 327
So instead of doing replace all, because that way you can see which parts you're replacing, 328
and many times I've done replace all only to find out that I've messed up the entire project in some 329
big way. 330
So just a word of advice, 331
go through it one by one, 332
make sure that it makes sense and it's the right area that you're changing. 333
But hopefully, when we go back to our website, we can see we've now updated all of the right places 334
to this dark color scheme. 335
Coming back to our pricing-goal, we can see that this title needs to be an h2 and this subtitle needs 336
to be a paragraph element. 337
So let's go into our section and make sure that is the case, because when we copied it over, it actually 338
gave us an h1. 339
Now the styling is not going to change because it actually comes from the display for class. 340
So you won't see the size change that much or the color scheme because it is actually not dependent 341
on the HTML element. 342
And this happens very frequently with Bootstrap, so we're able to adjust that pretty easily. 343
And now we're ready for our final section, which is the Footer. 344
So let's find ourselves the Footer Snippets and let's find the one that looks like one that we want, 345
or one that is similar to the one in the Example, which is this one right here. 346
And let's find the container that we can copy and put into our footer section. 347
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
design. 349
Firstly, you'll notice there's this area that you can't really see, but when you hover it, it seems 350
to be clickable. 351
And if we refer to our code, you can see this is actually a link that links to the Bootstrap logo. 352
So let's go ahead and delete that, 353
but let's change this paragraph class to copyright (@) and then the name of our company, TinDog. 354
And I'm going to leave these links alone because I don't know, maybe in the future you'll want to use 355
this website and put in some different links to different sections. 356
But for now it just kind of looks more or less the right kind of style that we would want on a startup 357
website. 358
So let's leave that alone, but let's get rid of this border line here. 359
And this border came from the footer. 360
So there should be a hint in here. 361
If we look at the footer element, you can see there's the border-top class, which again comes from 362
Bootstrap, but it's a really simple way of adding some borders to the top left or right. 363
But once we delete it and that's completely gone. 364
So the final thing we need to do is just to add that gradient background to the footer area and then 365
we are pretty much done. 366
So let's take that section footer and add the class gradient-background, and now hit save, 367
and we should see that we have almost the same website as the final result. 368
The only thing that we need to do now is to get rid of this little bit of space at the bottom. 369
And the fact that it's white should give you a hint as to what it is. 370
If we select our footer section and we go into the section, look inside the container, at some point 371
our hover is going to show us where that margin comes from. 372
And right here you can see that orange box showing that margin at the bottom. 373
So if we select it, we should see there are some margin classes applied. 374
So there's a margin-top, which I think we should probably keep because it adds a good amount of spacing 375
between the different sections. 376
But the margin-bottom we could probably get rid of so that we don't have that white space down there. 377
So let's find this 378
y-5 class in our footer element and it's right here and let's change it instead of y to just having 379
it on top. 380
And now let's hit, save and refresh. 381
And you can see we have now completed our design for our website. 382
In less than half an hour, 383
we've managed to build an incredibly complex and beautiful website for our TinDog startup. 384
I hope our clients will be pleased because we've created this amazing, incredibly modern looking website 385
for them and we should be pleased because it only took us so little time to do by leveraging the power 386
of the Bootstrap Components and using the different Helper Classes, Utilities, as well as Snippets 387
that they provide. 388
Hopefully, this gives you an insight into how we can use Bootstrap to create beautiful, complex websites 389
quickly. 390
And also you see the difference between what CSS grid, Flexbox and Bootstrap are all good for. 391
They all have different strengths and weaknesses and I think Bootstrap is really good for throwing some 392
components down and creating something that looks incredibly modern very, very quickly. 393
Whereas Flexbox and Grid are great when you want to get into the nitty-gritty of creating a very, very 394
custom layout for your website. 395
So well done on completing this section. 396
And in the next section we've got the Capstone project for CSS. 397
So once you're ready, head over to the next section.