Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:02,482 --> 00:00:04,284
Let's take a small break
2
2
00:00:04,284 --> 00:00:08,315
and talk about a very important thing in modern web design,
3
3
00:00:08,315 --> 00:00:10,428
responsive web design.
4
4
00:00:10,428 --> 00:00:13,142
You have probably heard of it by now.
5
5
00:00:13,142 --> 00:00:16,263
So, in this lecture we will set up our project
6
6
00:00:16,263 --> 00:00:20,346
to that we can easily build a responsive website.
7
7
00:00:21,789 --> 00:00:25,089
So, what is responsive web design?
8
8
00:00:25,089 --> 00:00:29,055
Building a responsive website means that that website
9
9
00:00:29,055 --> 00:00:31,022
will work well on any device
10
10
00:00:31,022 --> 00:00:33,785
and with any screen resolution.
11
11
00:00:33,785 --> 00:00:38,011
Working well means that that website is easy to read
12
12
00:00:38,011 --> 00:00:41,132
and to navigate without needing to constantly zoom in
13
13
00:00:41,132 --> 00:00:44,350
and zoom out, which is really annoying.
14
14
00:00:44,350 --> 00:00:48,933
Here are just two examples of responsive websites.
15
15
00:00:48,933 --> 00:00:52,737
You can see that they change with the browser's width
16
16
00:00:52,737 --> 00:00:56,183
which means that they respond to the screen size;
17
17
00:00:56,183 --> 00:01:00,035
therefore, the name responsive web design.
18
18
00:01:00,035 --> 00:01:04,277
According to Google, 50% of all internet traffic
19
19
00:01:04,277 --> 00:01:07,024
already happens on mobile phones
20
20
00:01:07,024 --> 00:01:10,015
and this will even increase in the future.
21
21
00:01:10,015 --> 00:01:12,681
In fact, Google recently announced
22
22
00:01:12,681 --> 00:01:16,061
that mobile-friendly websites will be ranked higher
23
23
00:01:16,061 --> 00:01:19,166
on their Search Results page.
24
24
00:01:19,166 --> 00:01:21,376
So, it's really important
25
25
00:01:21,376 --> 00:01:24,959
to embrace responsive web design right now.
26
26
00:01:27,309 --> 00:01:29,942
So, there are three main ingredients
27
27
00:01:29,942 --> 00:01:32,527
to responsive web design.
28
28
00:01:32,527 --> 00:01:34,527
First is the fluid grid.
29
29
00:01:35,509 --> 00:01:39,053
In a fluid grid all layout elements are sized
30
30
00:01:39,053 --> 00:01:41,773
in relative units like percentages
31
31
00:01:41,773 --> 00:01:45,719
instead of absolute units like pixels.
32
32
00:01:45,719 --> 00:01:48,842
in the CSS section we used a static layout
33
33
00:01:48,842 --> 00:01:51,342
and defined width with pixels.
34
34
00:01:52,960 --> 00:01:57,443
Now we are leaving that behind and work with percentages.
35
35
00:01:57,443 --> 00:02:00,943
We will set up the fluid grid in a minute.
36
36
00:02:02,736 --> 00:02:06,343
And the same goes for images so as to prevent them
37
37
00:02:06,343 --> 00:02:10,940
from displaying outside their parent elements.
38
38
00:02:10,940 --> 00:02:14,427
And finally, media queries allow us to specify
39
39
00:02:14,427 --> 00:02:18,431
different CSS rules for different browser width.
40
40
00:02:18,431 --> 00:02:21,706
With media queries we can target different devices
41
41
00:02:21,706 --> 00:02:23,928
like mobile phones and tablets
42
42
00:02:23,928 --> 00:02:28,095
and make the website respond to their screen size.
43
43
00:02:29,522 --> 00:02:31,821
So, now that we know the main ingredients
44
44
00:02:31,821 --> 00:02:35,384
to responsive web design let's go back to brackets
45
45
00:02:35,384 --> 00:02:37,551
and set up the fluid grid.
46
46
00:02:38,756 --> 00:02:41,706
We will then build our website using that grid
47
47
00:02:41,706 --> 00:02:44,062
in the next lectures.
48
48
00:02:44,062 --> 00:02:47,357
We will take care of the media queries part later
49
49
00:02:47,357 --> 00:02:49,541
after building our webpage.
50
50
00:02:49,541 --> 00:02:51,801
While we build the webpage it's just important
51
51
00:02:51,801 --> 00:02:54,134
that we always use the grid.
52
52
00:02:56,054 --> 00:02:59,559
Now, the fluid grid we will use in this course
53
53
00:02:59,559 --> 00:03:03,697
is based on this little responsive grid system,
54
54
00:03:03,697 --> 00:03:07,864
which claims to be spectacularly easy responsive web design.
55
55
00:03:10,210 --> 00:03:12,892
So you can build any layout you can imagine
56
56
00:03:12,892 --> 00:03:15,115
with this fluid grid.
57
57
00:03:15,115 --> 00:03:19,444
I actually made some changes that makes things easier for us
58
58
00:03:19,444 --> 00:03:22,854
and compiled everything in one file.
59
59
00:03:22,854 --> 00:03:24,654
Please go download that file
60
60
00:03:24,654 --> 00:03:28,486
from the lecture description right now.
61
61
00:03:28,486 --> 00:03:31,819
We will come back to this website later
62
62
00:03:31,819 --> 00:03:35,133
so I can show you how that grid works.
63
63
00:03:35,133 --> 00:03:38,485
So I hope you downloaded the file by now.
64
64
00:03:38,485 --> 00:03:41,742
I actually already have it here on my desktop
65
65
00:03:41,742 --> 00:03:43,242
so I will copy it.
66
66
00:03:46,359 --> 00:03:49,730
And then we put it in the Vendors folder
67
67
00:03:49,730 --> 00:03:53,945
because once again it's a file that we got from the internet
68
68
00:03:53,945 --> 00:03:56,195
and then in the CSS folder.
69
69
00:03:58,197 --> 00:04:00,197
And here we go, alright.
70
70
00:04:04,308 --> 00:04:06,339
So now back to brackets.
71
71
00:04:06,339 --> 00:04:08,339
Let's include that file.
72
72
00:04:12,067 --> 00:04:13,637
I'll do it here.
73
73
00:04:13,637 --> 00:04:17,804
Again, before the style CSS, which is our CSS file,
74
74
00:04:20,266 --> 00:04:23,369
and let me just tell you another trick
75
75
00:04:23,369 --> 00:04:24,536
which is I can
76
76
00:04:25,898 --> 00:04:28,963
since I don't want to write all of this again
77
77
00:04:28,963 --> 00:04:31,894
and instead of copying which is a little annoying
78
78
00:04:31,894 --> 00:04:32,977
I can just do
79
79
00:04:35,093 --> 00:04:37,142
duplicate, which is Command + D
80
80
00:04:37,142 --> 00:04:40,475
or probably Control + D on Windows.
81
81
00:04:41,817 --> 00:04:45,984
So right here just Command + D and here we go.
82
82
00:04:47,295 --> 00:04:51,045
'Cause all I want to change now is this file.
83
83
00:04:52,583 --> 00:04:55,341
So I want the grid file, right.
84
84
00:04:55,341 --> 00:04:59,341
So now the grid file is included in our project.
85
85
00:05:00,743 --> 00:05:04,076
Now let me show you how that grid works.
86
86
00:05:05,360 --> 00:05:08,610
So on this website is a little example.
87
87
00:05:10,283 --> 00:05:13,783
So all our content will be inside columns,
88
88
00:05:16,011 --> 00:05:17,639
as you can see here.
89
89
00:05:17,639 --> 00:05:21,306
And each of these group of columns is a row.
90
90
00:05:22,907 --> 00:05:26,892
So in each row we can have two or three or four or five
91
91
00:05:26,892 --> 00:05:29,612
all the way to 12 columns
92
92
00:05:29,612 --> 00:05:32,112
which all have the same width.
93
93
00:05:34,248 --> 00:05:36,911
And now as for the responsive part,
94
94
00:05:36,911 --> 00:05:39,554
if we resize the browser window
95
95
00:05:39,554 --> 00:05:41,054
all of them shrink
96
96
00:05:42,811 --> 00:05:46,978
and that means that they are defined with a relative width
97
97
00:05:48,443 --> 00:05:51,623
because their width is always relative
98
98
00:05:51,623 --> 00:05:53,456
to the browser window.
99
99
00:05:54,784 --> 00:05:56,929
So they get smaller and smaller
100
100
00:05:56,929 --> 00:05:59,343
as I decrease the browser window.
101
101
00:05:59,343 --> 00:06:02,810
And that's what responsive web design is all about.
102
102
00:06:02,810 --> 00:06:05,727
And after a certain amount of width
103
103
00:06:07,197 --> 00:06:08,998
they even stack.
104
104
00:06:08,998 --> 00:06:12,791
So when they get too small we can't see any content
105
105
00:06:12,791 --> 00:06:14,745
in this column here, right?
106
106
00:06:14,745 --> 00:06:17,541
Then they will all stack
107
107
00:06:17,541 --> 00:06:18,710
just like this.
108
108
00:06:18,710 --> 00:06:21,871
In our website, since we will use this grid,
109
109
00:06:21,871 --> 00:06:23,371
we'll do the same.
110
110
00:06:26,085 --> 00:06:29,085
Okay, so then let's see the CSS file
111
111
00:06:32,848 --> 00:06:36,775
that we just included and it's down here.
112
112
00:06:36,775 --> 00:06:38,958
Let me just open it.
113
113
00:06:38,958 --> 00:06:41,698
And if I click it twice, double click,
114
114
00:06:41,698 --> 00:06:46,180
then it appears up here in the working files.
115
115
00:06:46,180 --> 00:06:47,513
So we have a row
116
116
00:06:50,946 --> 00:06:51,863
and columns
117
117
00:06:53,532 --> 00:06:55,927
and then different spans
118
118
00:06:55,927 --> 00:06:59,177
and each of this span will be a column.
119
119
00:07:01,578 --> 00:07:04,245
For example this span one of two
120
120
00:07:05,237 --> 00:07:06,570
is just columns.
121
121
00:07:08,915 --> 00:07:13,225
But don't worry, we will use that in the next lecture
122
122
00:07:13,225 --> 00:07:16,559
and then you will understand everything
123
123
00:07:16,559 --> 00:07:18,226
just how this works.
124
124
00:07:19,221 --> 00:07:22,638
Alright, let's get back to our HTML file.
125
125
00:07:24,662 --> 00:07:28,245
And as I said, the content will be in rows.
126
126
00:07:29,451 --> 00:07:31,784
So let's just define the row
127
127
00:07:33,263 --> 00:07:36,271
and I will simply call it row.
128
128
00:07:36,271 --> 00:07:38,646
And what I want for this row
129
129
00:07:38,646 --> 00:07:40,146
is a maximum width
130
130
00:07:43,151 --> 00:07:44,401
of 1,140 pixels
131
131
00:07:47,442 --> 00:07:50,775
just as we used in our previous project.
132
132
00:07:52,576 --> 00:07:54,074
So this is the only value
133
133
00:07:54,074 --> 00:07:57,752
that will have an absolute value in pixels.
134
134
00:07:57,752 --> 00:08:00,070
We will define all other layout margins
135
135
00:08:00,070 --> 00:08:02,235
in pettings and percentages
136
136
00:08:02,235 --> 00:08:04,266
and not in pixels.
137
137
00:08:04,266 --> 00:08:07,433
And now I also want to center this row
138
138
00:08:08,633 --> 00:08:12,633
on the webpage so all our rows will be centered.
139
139
00:08:15,491 --> 00:08:18,408
So do you remember how we did that?
140
140
00:08:19,572 --> 00:08:21,786
We'll just set margin
141
141
00:08:21,786 --> 00:08:24,286
and then to center a container
142
142
00:08:26,809 --> 00:08:28,456
inside another container
143
143
00:08:28,456 --> 00:08:33,035
as you remember we set the left margin to auto
144
144
00:08:33,035 --> 00:08:35,985
and the right margin to auto.
145
145
00:08:35,985 --> 00:08:37,690
You probably also remember
146
146
00:08:37,690 --> 00:08:41,923
that we can use a shorthand to set margins just like this.
147
147
00:08:41,923 --> 00:08:43,006
Top and right
148
148
00:08:45,088 --> 00:08:46,755
and bottom and left.
149
149
00:08:48,632 --> 00:08:52,799
Alright, but there's an even simpler way of doing this.
150
150
00:08:54,934 --> 00:08:58,363
So let me show you that as well.
151
151
00:08:58,363 --> 00:09:01,113
Which is we can say zero and auto
152
152
00:09:02,501 --> 00:09:05,010
and then top and bottom will be zero
153
153
00:09:05,010 --> 00:09:07,677
and left and right will be auto.
154
154
00:09:09,340 --> 00:09:10,840
Let me delete this
155
155
00:09:12,117 --> 00:09:14,684
and now this row will be centered.
156
156
00:09:14,684 --> 00:09:16,851
You can just try this out.
157
157
00:09:20,201 --> 00:09:23,368
So I'll say div and class will be row.
158
158
00:09:29,262 --> 00:09:31,429
Alright, just put us here.
159
159
00:09:36,312 --> 00:09:39,818
And let's see how this looks like.
160
160
00:09:39,818 --> 00:09:42,691
Okay, you'll see it's perfectly centered.
161
161
00:09:42,691 --> 00:09:45,047
So now we have everything in place
162
162
00:09:45,047 --> 00:09:49,214
so we can start building the first section of our webpage
163
163
00:09:50,085 --> 00:09:52,168
which will be the header.
164
164
00:09:54,377 --> 00:09:58,294
So don't wait, and join me in the next lecture.
13732
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.