Voiceover: Let's take a small break 2 2
and talk about a very important thing in modern web design, 3 3
responsive web design. 4 4
You have probably heard of it by now. 5 5
So, in this lecture we will set up our project 6 6
to that we can easily build a responsive website. 7 7
So, what is responsive web design? 8 8
Building a responsive website means that that website 9 9
will work well on any device 10 10
and with any screen resolution. 11 11
Working well means that that website is easy to read 12 12
and to navigate without needing to constantly zoom in 13 13
and zoom out, which is really annoying. 14 14
Here are just two examples of responsive websites. 15 15
You can see that they change with the browser's width 16 16
which means that they respond to the screen size; 17 17
therefore, the name responsive web design. 18 18
According to Google, 50% of all internet traffic 19 19
already happens on mobile phones 20 20
and this will even increase in the future. 21 21
In fact, Google recently announced 22 22
that mobile-friendly websites will be ranked higher 23 23
on their Search Results page. 24 24
So, it's really important 25 25
to embrace responsive web design right now. 26 26
So, there are three main ingredients 27 27
to responsive web design. 28 28
First is the fluid grid. 29 29
In a fluid grid all layout elements are sized 30 30
in relative units like percentages 31 31
instead of absolute units like pixels. 32 32
in the CSS section we used a static layout 33 33
and defined width with pixels. 34 34
Now we are leaving that behind and work with percentages. 35 35
We will set up the fluid grid in a minute. 36 36
And the same goes for images so as to prevent them 37 37
from displaying outside their parent elements. 38 38
And finally, media queries allow us to specify 39 39
different CSS rules for different browser width. 40 40
With media queries we can target different devices 41 41
like mobile phones and tablets 42 42
and make the website respond to their screen size. 43 43
So, now that we know the main ingredients 44 44
to responsive web design let's go back to brackets 45 45
and set up the fluid grid. 46 46
We will then build our website using that grid 47 47
in the next lectures. 48 48
We will take care of the media queries part later 49 49
after building our webpage. 50 50
While we build the webpage it's just important 51 51
that we always use the grid. 52 52
Now, the fluid grid we will use in this course 53 53
is based on this little responsive grid system, 54 54
which claims to be spectacularly easy responsive web design. 55 55
So you can build any layout you can imagine 56 56
with this fluid grid. 57 57
I actually made some changes that makes things easier for us 58 58
and compiled everything in one file. 59 59
Please go download that file 60 60
from the lecture description right now. 61 61
We will come back to this website later 62 62
so I can show you how that grid works. 63 63
So I hope you downloaded the file by now. 64 64
I actually already have it here on my desktop 65 65
so I will copy it. 66 66
And then we put it in the Vendors folder 67 67
because once again it's a file that we got from the internet 68 68
and then in the CSS folder. 69 69
And here we go, alright. 70 70
So now back to brackets. 71 71
Let's include that file. 72 72
I'll do it here. 73 73
Again, before the style CSS, which is our CSS file, 74 74
and let me just tell you another trick 75 75
which is I can 76 76
since I don't want to write all of this again 77 77
and instead of copying which is a little annoying 78 78
I can just do 79 79
duplicate, which is Command + D 80 80
or probably Control + D on Windows. 81 81
So right here just Command + D and here we go. 82 82
'Cause all I want to change now is this file. 83 83
So I want the grid file, right. 84 84
So now the grid file is included in our project. 85 85
Now let me show you how that grid works. 86 86
So on this website is a little example. 87 87
So all our content will be inside columns, 88 88
as you can see here. 89 89
And each of these group of columns is a row. 90 90
So in each row we can have two or three or four or five 91 91
all the way to 12 columns 92 92
which all have the same width. 93 93
And now as for the responsive part, 94 94
if we resize the browser window 95 95
all of them shrink 96 96
and that means that they are defined with a relative width 97 97
because their width is always relative 98 98
to the browser window. 99 99
So they get smaller and smaller 100 100
as I decrease the browser window. 101 101
And that's what responsive web design is all about. 102 102
And after a certain amount of width 103 103
they even stack. 104 104
So when they get too small we can't see any content 105 105
in this column here, right? 106 106
Then they will all stack 107 107
just like this. 108 108
In our website, since we will use this grid, 109 109
we'll do the same. 110 110
Okay, so then let's see the CSS file 111 111
that we just included and it's down here. 112 112
Let me just open it. 113 113
And if I click it twice, double click, 114 114
then it appears up here in the working files. 115 115
So we have a row 116 116
and columns 117 117
and then different spans 118 118
and each of this span will be a column. 119 119
For example this span one of two 120 120
is just columns. 121 121
But don't worry, we will use that in the next lecture 122 122
and then you will understand everything 123 123
just how this works. 124 124
Alright, let's get back to our HTML file. 125 125
And as I said, the content will be in rows. 126 126
So let's just define the row 127 127
and I will simply call it row. 128 128
And what I want for this row 129 129
is a maximum width 130 130
of 1,140 pixels 131 131
just as we used in our previous project. 132 132
So this is the only value 133 133
that will have an absolute value in pixels. 134 134
We will define all other layout margins 135 135
in pettings and percentages 136 136
and not in pixels. 137 137
And now I also want to center this row 138 138
on the webpage so all our rows will be centered. 139 139
So do you remember how we did that? 140 140
We'll just set margin 141 141
and then to center a container 142 142
inside another container 143 143
as you remember we set the left margin to auto 144 144
and the right margin to auto. 145 145
You probably also remember 146 146
that we can use a shorthand to set margins just like this. 147 147
Top and right 148 148
and bottom and left. 149 149
Alright, but there's an even simpler way of doing this. 150 150
So let me show you that as well. 151 151
Which is we can say zero and auto 152 152
and then top and bottom will be zero 153 153
and left and right will be auto. 154 154
Let me delete this 155 155
and now this row will be centered. 156 156
You can just try this out. 157 157
So I'll say div and class will be row. 158 158
Alright, just put us here. 159 159
And let's see how this looks like. 160 160
Okay, you'll see it's perfectly centered. 161 161
So now we have everything in place 162 162
so we can start building the first section of our webpage 163 163
which will be the header. 164 164
So don't wait, and join me in the next lecture.