So we've talked a little bit about layout using CSS. 1
Now a really important concept in terms of layout is how it should change depending on the size of the 2
screen, 3
because these days there are many different screen sizes: desktops, laptops, iPads, mobile phones 4
and we want our website to look good on all of them. 5
And in order to do that, we need to make our websites responsive, so it responds to the changes in the 6
screen size. 7
The next time you go on to the web, I want you to try and change the size of your window. 8
So grab one of the sides or grab one of the corners and simply move it so that we change the width of 9
the screen. 10
And what I want you to notice is how the website responds to that. 11
Notice how here in my full width you can see all of these things up here, the different parts of the 12
navigation bar. 13
But when I make this a little bit narrower, you'll see that at some point it suddenly will disappear. 14
And where has it gone? 15
Well, it's gone into a menu now. 16
So if you're on iPad or if you're on an iPhone where there's not enough width to display all of these 17
items, then it gets collapsed into a little menu system, which is really neat. 18
Right? 19
And at various points of the width, for example, right about here, you can see the navigation bar 20
collapse and go into a menu. 21
And then if we go even further, you can see that search button even disappears, so that on mobile 22
maybe you're not able to use that search bar very well. 23
So they've hidden it on this particular size. 24
Have a look at your favorite websites and see how they're designed to be responsive and come back and 25
I'll show you how we can do it as well. 26
There are four main ways of doing this. 27
One is through the use of what's called Media Queries, 28
and then there is CSS Grid, CSS Flexbox, 29
and you can also get really good responsiveness by using external frameworks such as Bootstrap. 30
So we're going to talk about all three of these in this lesson. 31
The first one is the media query, and this is essentially something that you put in instead of a selector 32
in your CSS. 33
As you remember, this is normally the part before the curly braces where you add your selector, your 34
.class or your # ID, but instead we use an @ sign and then the word media, 35
and afterwards we have some brackets and we add in a breakpoint. 36
This essentially says that look inside these braces to apply the CSS when you are displaying the website 37
on a screen that is below or equal to 600px wide. Here we've set the max-width to 600 and everything 38
that is up to that size will have a different CSS, which we can define in here. 39
And this is how a media query works. 40
It's pretty simple. 41
We can define various different widths. Coming back to here, 42
notice how when we go from this width to this width, there is a breakpoint right there that changes 43
the display and tells the navigation bar to have a different CSS layout. 44
So we could do exactly that using media queries. 45
Now, another common method for creating responsiveness is through something called CSS G rid. 46
This is a little bit harder to understand, which is why we're dedicating a whole section to teaching 47
you about it. 48
But it also means that it's a lot more flexible. 49
So you could create any of these designs, but let's say we pick one of these, for example, this layout 50
right here, and we want to do that on our website. 51
Well, we could use CSS Grid by simply creating a div that contains five divs. 52
So notice there's five squares here. 53
One, two, three, four, five. 54
And each of these divs are given a class called ".card," but the containing div gets a different style 55
and we apply the display grid to the containing div. 56
So this is going to be applied to this one right here. 57
And remember, previously we learned about display and we saw how it could be inline, it could be block, 58
it could be none, 59
and in this case, if we set it to grid, then we're basically saying that we're going to use this system 60
of CSS Grid to do the layout. 61
And CSS Grid is a pretty simple system where you can define how you want the columns and rows to be 62
laid out. 63
If we go to the next line here, let me talk you through it. 64
So here we're saying that we're going to have some columns in our grid where we're going to have two 65
columns. 66
So there are two bits here that I've defined and they're both one fraction (1fr). 67
What this says is we want two columns, one and two, and on our website we would create these two columns 68
one and two. 69
And what the "fr" stands for is to make it an equal fraction. 70
One and two basically have the same width and it's just divided the screen into two columns. 71
The next line, if we look at this, says we should also create some rows in our grid. 72
And because there are three different values here, then we're creating one, two and three rows and 73
we're creating these rows a little bit differently from our columns. 74
Now, we could do the same thing, 75
we could have three equal size columns, or we could use fractions to figure out maybe one has to be 76
twice as big as the other, but we can also define it simply in terms of pixels. 77
And for rows you'll often see this. 78
So what we said is that the top-row should have 100px in height, the next one should be 200px 79
in height and the next one is also 200px. 80
CSS Grid, as you can see, is an incredibly flexible way of creating very complex layout very quickly. 81
And if we go to the next line, this gap basically says that there should be a gap of 30px between 82
each of the rows and the columns, which you'll see right here and right here. 83
Now, finally we can change the first div here, which has a class of ".first" which we target right here 84
so that we make the column span two columns. 85
So now instead of just being a single column like the rest of these, which is one column width, this 86
one is spanning two of the columns on our grid, and our entire website only has two columns. 87
So it makes it go full width 88
basically. To achieve this layout 89
maybe we'll put a header in there, maybe we'll put a big heading, maybe we'll put some big text, 90
etcetera. 91
And this complex layout is very easily done using just five six lines of code using CSS Grid. 92
Now we're going to be diving much, much deeper into CSS Grid and I'm going to be showing you and walking 93
you through a lot of the different features, 94
but we're going to be dedicating a whole section to it. 95
So don't worry if you don't fully understand it 96
right now. 97
I just want to show you quickly how it would work. 98
Similarly, I want to show you another powerful system that's often used, which is called Flexbox. 99
And this, again, is a big system which we're going to dive deep into 100
but for now, I just want you to get a quick overview and a brief understanding of how it works. 101
If grid is something that applies to 2D layouts, where you've got columns and you've got rows, then 102
what Flexbox is really good at is allowing you to create 1D layouts, whether if you want everything 103
laid out as boxes on the horizontal or if you want everything laid out vertically as boxes on the vertical, 104
then you're probably going to be using Flexbox for this. 105
So here's another simple demo. 106
We've got a div container that contains four divs and you can see them right here: one, two, three 107
and four. 108
If we make the parent container, so similar to last time where we made it use a display of grid, but 109
instead this time we use a display of flex. 110
Then we're saying to the CSS that we're using this Flexbox system. 111
And what this system then allows us to do is to set each of the divs inside the flex container. 112
So notice we're targeting each of these cards here and we can give them different settings. 113
Let's say that for all of them, by default, we want them to have a flex of one. 114
So what this does is it makes each of these cards have an equal width distribution. 115
So divide up the width equally between these four cards. 116
So one, two, three and four. 117
Now I've added a fixed height of 100px, so each of these cards should all have 100px in height, 118
but then I've gone and done 119
some customizations to the default layout that's set out here. 120
What I've done is I've added some extra classes to the first two divs. 121
This first div has, instead of a flex of one where it has equal width to everybody else, I've set 122
it to have a flex of two. 123
So what this means is this is going to be twice the width of each of these unmodified ones. 124
And then for the second card here, I've set the flex to be 0.5. 125
So this should have half the width of the normal cards. 126
And by using that flex property, I've managed to set up a very complex width ratio to create this particular 127
layout that I wanted. 128
And as you can imagine, if we were working with floats, margin and all of these things that we've 129
learnt about, it would be possible, but a lot more complicated to achieve this. 130
And you can use this really flexible system with Flexbox to determine how you want the layout to be 131
laid out horizontally. 132
So maybe you could have a navigation bar on the right, which is flex of one, and then you have a main 133
content that's flex of three. 134
So then this is three times the width of this one. 135
But alternatively, you can flex in this direction. 136
So maybe you want a heading section that is a flex of one, and then you have the main content here, 137
which is a flex of three, and then you have a footer which is also a one. 138
So then it's going to divide up the total height that you have on the web page. 139
So in this case, we have five units and then divide it up according to what you've set for the flex. 140
So again, this is a more complex layout system which we're going to dive into and we're going to learn 141
more about, 142
but essentially in terms of the gist, it's just about dividing up the width or dividing up the height 143
based on these ratios that you provide. 144
And because everything is a ratio and a percentage, then that means it is by default responsive. 145
Because if this width changes, then everything is going to change proportionally. 146
So none of these will have a fixed width like say 400px or something, but instead, it's going to 147
work that number out based on what the total width is because it's a percentage of the total width. 148
Now the very last method of creating responsiveness that I want to talk about is using the Bootstrap 149
framework. 150
And the reason why it's called a framework is because it's external. 151
So it's not something that's built into CSS like Grid or Flexbox, but it's actually something that 152
we have to bring in so other people's code that we're going to use. 153
And essentially what they've done is they've defined a whole bunch of classes in their CSS. 154
So they've written an extensive amounts of CSS and they've put different rules for different selectors. 155
For example, you could have something called Card. 156
You could have something called Row and you could have something called Container. 157
And these all will point to some CSS code inside the Bootstrap container, which has predefined layout. 158
For example, here I've got three cards and notice how they've all got rounded corners and how they 159
have a specific type of font and all of that styling is applied automatically to your code by simply 160
putting in the Bootstrap framework and then adding a particular class name. 161
Now in terms of responsiveness, they also have a sort of flex system because Bootstrap is in fact built 162
on top of Flexbox. 163
Now, this system is a 12 division system. 164
So let me explain this. 165
If the full width of your website can be divided into 12 equal portions, so then you have one, two, 166
three. 167
One, two, three. 168
One, two, three. 169
Now, if you count these, you'll find that there are 12 little sections and they divide up the entire 170
website. 171
Now you can say if I want a particular div that is going to take up half of the width, then I can use 172
this class called ".col-6". 173
So column-six and it's basically going to take up six of these columns right here. 174
So six of these little sections. 175
And as you can see, this first card indeed does take up six of the sections. 176
Now I can create other cards in here. 177
So this one's going to take up two of the columns and this one's going to take up four of the columns 178
and added together they add up to 12, which means that it's going to take up the entire width. 179
So we've now got three cards taking up the entire width of the website. 180
But as we resize the website, then it's going to respond. 181
So a column 6 is going to be a 50% width. 182
If the width was 1000px, then this one is going to be 500px wide. 183
If the width was 2000px, then the width will be 1000pv. 184
ecetera. 185
And this is not only really good for responsiveness, but it's also really good because I mentioned 186
we can get styling brought into our website really easily just by using some of the pre-built components 187
that comes with this framework similar to Grid Flexbox. 188
We're going to be doing a section on Bootstrap as well so that you can learn more about this system 189
and all of the features that are available to you once you understand how it works. 190
But these are some of the main ways that we can create responsive websites very easily in our web design 191
using CSS. 192
In the next lesson, I'm going to dive deeper into media queries because it's a relatively easy to understand 193
system and it's not as complex as some of these three, which we'll need to dedicate an individual section 194
to. 195
And quite a lot of time too. 196
Now, at this point, you might be thinking, well, there are all these different methods and they 197
all seem great, but which one is the best and which one should I choose? 198
This is often such a common question I get from students, and I want to say to you that there is no 199
such thing as the best when it comes to any sort of programming. 200
These are just tools and they could be tools like a hammer or a chisel or a drill. 201
They all have different specialties. 202
They're all good at different things, basically. 203
And as you'll see in the coming lessons, where we get to learn a little bit more about each of these 204
different styles of creating responsiveness and adding layout to our websites, They all have strengths 205
and weaknesses, so keep an open mind and all that you need to know for this lesson is just to realize 206
that there are many different ways of creating responsive websites, and these are the most common ways. 207
There's quite a lot of demo code that I showed you in this lesson, and I want you to be able to play 208
around with it because you're really only going to learn code when you actually try and make mistakes 209
and change things and mess with things in order to see how it works. 210
So download 8.2 Responsiveness from this lesson and then open it up inside VS Code. 211
If you go into the index.html and show it as a preview, you can see all the different ways that we 212
can create responsiveness and then go to the media query to see how we've used media queries in order 213
to achieve this kind of breakpoint responsiveness and then maybe go back and try a different method 214
like CSS grid and see how our grid is responsiveness. 215
But again, done using a different method and the same with Flexbox or Bootstrap and just examine some 216
of the code and play around with it or change things. 217
I know right now you don't have complete information because we haven't gone into this in detail yet, 218
but just get a feel of how it might work and see how is its responsiveness, test it out. 219
So I'll leave you to do that. 220
And then once you're done, head over back here and we'll go into the next lesson where we're going 221
to learn more about media queries in detail. 222
For all of that and more, I'll see you there.