Original subtitles

0 All right guys. It is a new week and we are on to a new topic. 1

So for all of you guys who are still sticking with me, a big pat on the back, because we are now going 2

to do more and more exciting things as we learn more 3

and as we go along. 4

So today I'm going to talk about Bootstrap, and this is what's called a front end library. 5

Now, you'll hear these words quite often: front end, back end, interface... What does it all mean? 6

So, this cartoon is one of the ways that best represents this concept. 7

So the front end is basically what the user sees. It’s the beautiful mermaid. It’s the face of your web 8

site or your mobile app. 9

Now the back end tends to reside on the server, and is basically behind the scenes sort of business logic 10

of how your web site or how your app is going to work, 11

so things that it has to do. 12

So this is where you code a lot of the functionality of the web site or the app. 13

So you've got your web sites and your apps that can be designed to have a beautiful user interface, 14

and, you know, things like animations or buttons. 15

Basically whatever the user sees is the front end. 16

Now in the back you've got the server, you've got the databases, you know, less exciting, less pretty, 17

but nonetheless it's a really really important part of any web site or app, because it's going to determine 18

how everything is going to work. 19

These two parts will need to talk to each other in order for data to be delivered. 20

So for example if you're AirBnB, then in the back end you've got your listings, you can search and 21

query for them, and then you can deliver them to the front end, say the web site or the app. 22

Now this division is the front end back end division. 23

And usually you'll see different languages being used for the front end and the back end. 24

So on the front we'll be using things like HTML, CSS, Javascript, and this is a lot of the stuff that 25

you see in web design. Now on the back end you have slightly more powerful languages like C#, Ruby, 26

PHP, Java, NodeJS, 27

or SQL 28

if you're dealing with databases. And this is what will enable your web apps. And it will give your web site 29

functionality, business logic, data storage, and a whole bunch of really exciting things that we're going 30

to explore later on in the course. 31

Now Bootstrap is very firmly on the front end. 32

It's a bunch of code that was written to be reusable that you can drop into your site and it'll make 33

designing the web site much much easier for you. 34

Now Bootstrap was originally developed by Twitter in order to try and get more consistence across web sites 35

that they design. 36

But since then they've made it free and open source, 37

so that means you can see all of the source code on GitHub. 38

And in fact if you go there you'll notice that it has a whopping 122,000 stars, and 39

it's in fact the second most starred repository on all of GitHub, so that just shows you how popular 40

it is. 41

And this is definitely the most popular front end framework or library that you'll ever come across. 42

Now what does it allow you to do? 43

Well, one of the most important things is that, as the number of users are moving away from desktop towards 44

mobile, a lot of web sites need to be responsive. 45

Now this is probably not the best term for what this means, because when people think responsive they 46

think, ‘Oh, it has to be fast’, or, you know, ‘It has to load up immediately’. 47

But actually that's not what responsive is at all. Responsive just means that it responds to the viewport. 48

So that means if you're looking at the same web site on mobile or on iPad or on desktop it should have 49

a different layout to be able to best take advantage of the size of the screen real estate. 50

So I think a better word would almost be something like adaptable layout. 51

So your web site changes its design depending on where it's being displayed. And Bootstrap makes this 52

super super easy as we'll see in the coming lessons. Now 53

the other really awesome thing about Bootstrap is that you get access to a whole bunch of pre-styled 54

elements that you can simply just drop into your code with very very minimal effort. 55

So let me show you how it works. 56

Now remember how in the last module in order to create a button that was styled and it had a hover state 57

and it looked generally nice we had to go to CSS Button Generator and put in the requirements that 58

we needed, and it generated a whole bunch of CSS code that either we had to write or we had to find 59

somewhere like the CSS Button Generator where it would generate this code for you. 60

What about things that are not buttons? 61

What if you wanted a slider or a navigation bar? Then, you know, if there isn't a generator out there then 62

you would have to write all of this code yourself. 63

Now if we copy this code and we go over to Code Ply. And the reason why we're using Code Ply rather 64

than Code Pen is because they are a playground that allows you to include these frameworks, for example 65

Bootstrap and a number of other ones. 66

So let's go ahead and create a new playground on here and I'm going to go into the settings and I'm 67

going to remove the Bootstrap framework so we have no frameworks, and then I'm going to create a button 68

as we did before, and we're going to give it a class of btn, to match what we had over here as the selector, 69

and then I'm going to give our button, maybe let's call it Hello World, and let's go ahead and run. 70

And then you'll see there's our button. 71

This is plain HTML button. 72

It looks pretty boring and pretty bland. 73

And in order to make it look a bit nicer we have to add all of this code in order to make it look 74

like this and have a hover state. 75

Now I want to show you what you can do with Bootstrap. 76

You don't need any of this. 77

You don't have to write your own CSS code, or you don't have to find it somewhere and paste in snippets. 78

All you have to do is add in the Bootstrap framework. And we're going to be working with the latest version 79

of Bootstrap, so Bootstrap 4, throughout this course. 80

So it's been a long time coming and it was only really released in January 2018. 81

So this is a fantastic time to start learning Bootstrap, because you'll be working with the latest 82

version and the gold standard. 83

So, you know, if you've learnt Bootstrap before, or if you have web sites created using earlier versions, 84

even Bootstrap 3, or even some of the alphas, there's been a lot of changes, and it's great that we're 85

starting with the proper official version of Bootstrap 4.0. 86

So now that we’ve selected our framework, let's go ahead and hit save, and now what we can do is, we can add 87

some classes that are predefined by Bootstrap to start styling our button. 88

So for example we can say that this is a btn and it's going to be a btn-primary. 89

Now if I run that code you'll see that Bootstrap has generated this button for me with no CSS code 90

on my part. 91

All I needed to do was add in three words in order to activate those selectors so that I can get this 92

style. 93

And you can see that it's beautifully rounded in its corners, and it's got a hover state, and it just 94

generally looks really really nice with very very minimal effort. 95

So we can do other things as well. 96

So for example if I didn't want the blue one then I can say btn btn-dark, and this will give me 97

a nice black colored button. 98

Now there's a whole bunch of other types of buttons, for example btn-outline-dark, which gives me a 99

outline button and when I hover it, 100

it becomes filled. I can make it bigger by just saying btn-lg, 101

and that gets me a larger button. 102

So let me show you how Bootstrap works. 103

Now, in order to do that we can go over to the Bootstrap web site, which is getbootstrap.com, and 104

you'll see that we've got version 4.0 selected in the top right corner. 105

And I want to just go ahead and download the source code for Bootstrap. 106

And once you've done that you should have a folder called bootstrap-4.0 or or 4.1 or whatever it may 107

be. 108

As long as it's got the 4 in front then we are good to go. 109

Now once you open that file, you should see that there's a folder called dist, and inside here there's 110

a folder called css. 111

Now we're going to go into the bootstrap.css, which is the main CSS file, and you're going to open 112

it up inside Atom. 113

Now if you scroll through this code you can see that it's got a whole bunch of predefined styles for 114

our HTML elements, 115

for example the body, or the horizontal rule, or the h1 through to h6, and this isn't new for us. 116

We've seen that inside the browser, 117

we’ve got this thing called user agent stylesheet, which is the CSS that gets applied to our web sites 118

by the browser. 119

Now in addition to that if you include Bootstrap on your web site, then it will change the style of your 120

elements. 121

So if you use a horizontal rule while using Bootstrap, then it will look like this, and it will override some 122

of those browser based styles. 123

But more importantly to how Bootstrap works is that it's got a whole bunch of classes that they have styled 124

and specified code for. 125

So that means that if you add a particular class name then it will automatically style it in the way that 126

has been specified by the Bootstrap code. 127

So let's see that in action. 128

I want to show you one of the components that you see a lot on Bootstrap web sites, 129

and this is the jumbotron. 130

This is basically just a header for your web site, and you can see that they've already specified styles, 131

for example the padding, the margin, the background color, the border radius, and all we need to do is just 132

go into our code and add this class. 133

So I'm going to delete the button class and I'm going to create a div that has a class called jumbotron. 134

And inside this div I'm just going to create a h1 that says Hello World, 135

because remember that divs have no dimension themselves unless they have some content. 136

So let's hit run, and you can see that we've got this brilliant jumbotron that is going to occupy and 137

I can pop this out to show you what the web site would look like as it is. 138

So you've got this header, which is the jumbotron, and you've got your h1, which has been styled by Bootstrap 139

to have a different font and different size from what you would normally see if you just had HTML, 140

and all I need to do to get all of this was just to include the class jumbotron. 141

Now if you have a look on Bootstrap and you go into the documentation and look through its components, 142

you'll find that there is the jumbotron, and they tell you exactly how you can use this particular class 143

to get something that looks like this or like this just by including some of their pre-specified classes. 144

So if you wanted to recreate this design here, then you could just copy their code snippet and paste it 145

into here. 146

And because we've already got Bootstrap installed on this playground, then if we just hit run and we 147

can pop this out, you can see that you've got this enabled on your web site. 148

And there was literally zero effort. 149

So if you liked this particular format then you could just go in here and change the text and change 150

the background color, for example, and you would already have a pretty nicely styled web site. 151

Now that's not all. 152

If you go into Bootstrap and you go to Examples, you can see that they've created more extensive 153

components using Bootstrap. 154

For example, if you ever wanted the Apple web site designed, then you can simply look at their product 155

example, and in fact if you go into that download that you had previously for bootstrap-4.0 and you go 156

into docs and you go into 4.0 or 4.1 or whatever your version may be, then you go into examples, and 157

you can see it's got all of the examples that they show here. 158

For example Pricing, Checkout, Product, Album, and if you open up index.html, you can see that this 159

is what the site looks like and you can view all of the code that was required to create this inside 160

Atom. 161

So this is the HTML that they wrote, and this is some custom CSS that modifies the bootstrap and customizes it 162

it a little bit. 163

So say if this is the web site that you wanted to make, 164

so say you wanted to make a company that was an Apple rip off like Grapple, then you could make this web 165

site by simply copying this product.css and index.html file, and then modifying the text. 166

So for example this is the h1. 167

You could just change it to whatever you want to call it for your web site, you know, 168

Grapple. And now if you refresh, here’s your web site. So you modify a lot of these examples very easily. 169

Or you can simply add these components by copying the code into your web site. But instead of just modifying 170

these examples let's take it step by step so that we really understand what we're doing. 171

And I want to show you exactly how Bootstrap works so that you can not just, you know, rip off these designs, 172

but you'll be able to design any sort of layout or design that you want by fully understanding this 173

framework. 174

So the first thing that we need to do is that we need to know how we can install Bootstrap onto our 175

web sites when we're not using something that's pre-loaded up like on Code Ply. 176

So in the next lesson we'll be showing you all the different ways how you can install Bootstrap onto 177

your own web site. 178

So for all of that and more I'll see you on the next lesson.