Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,871 --> 00:00:04,689
Welcome back, time to go back to Brackets
2
2
00:00:04,689 --> 00:00:07,700
and get our hands dirty again.
3
3
00:00:07,700 --> 00:00:11,401
I'm really excited to start building this website.
4
4
00:00:11,401 --> 00:00:13,355
In this lecture we will start
5
5
00:00:13,355 --> 00:00:15,187
by setting everything up.
6
6
00:00:15,187 --> 00:00:16,187
So let's go.
7
7
00:00:17,586 --> 00:00:19,577
Now the first step is to actually
8
8
00:00:19,577 --> 00:00:21,893
create a nice folder structure
9
9
00:00:21,893 --> 00:00:25,472
where we keep all our files very organized.
10
10
00:00:25,472 --> 00:00:29,639
And that you can later use for much, much bigger projects.
11
11
00:00:31,737 --> 00:00:35,849
So I'll start by creating here a new folder.
12
12
00:00:35,849 --> 00:00:38,349
And I will call this omnifood.
13
13
00:00:42,233 --> 00:00:43,066
Omnifood.
14
14
00:00:44,958 --> 00:00:47,458
Alright, so now inside of this
15
15
00:00:50,734 --> 00:00:54,734
I will create the first folder called resources.
16
16
00:00:56,546 --> 00:01:00,463
And inside of that folder, show you, like this,
17
17
00:01:01,955 --> 00:01:04,955
okay, inside of the resources folder
18
18
00:01:05,980 --> 00:01:09,063
we'll put a folder for our CSS files,
19
19
00:01:10,333 --> 00:01:13,916
another folder for JavaScript where we will
20
20
00:01:15,345 --> 00:01:17,428
put all our jQuery files,
21
21
00:01:21,481 --> 00:01:25,510
then another folder for the images that
22
22
00:01:25,510 --> 00:01:28,427
we are going to use in the project,
23
23
00:01:29,903 --> 00:01:32,570
and also a folder for some data.
24
24
00:01:34,584 --> 00:01:37,187
We'll probably not need this folder,
25
25
00:01:37,187 --> 00:01:39,795
but I will include it here, so, you know
26
26
00:01:39,795 --> 00:01:42,645
where to put it in case you need it
27
27
00:01:42,645 --> 00:01:45,645
for some projects of your own later.
28
28
00:01:47,444 --> 00:01:51,338
And inside of this CSS folder I will put another
29
29
00:01:51,338 --> 00:01:54,141
folder for images, and the difference
30
30
00:01:54,141 --> 00:01:56,215
between this one and the other one
31
31
00:01:56,215 --> 00:01:59,508
is that these images are going
32
32
00:01:59,508 --> 00:02:03,258
to be used by CSS, such as background images.
33
33
00:02:05,000 --> 00:02:07,681
Okay, so in the resource folders
34
34
00:02:07,681 --> 00:02:11,598
go the files that are created by us, basically.
35
35
00:02:13,411 --> 00:02:16,216
Then we have another folder here
36
36
00:02:16,216 --> 00:02:18,216
which is called vendors.
37
37
00:02:20,652 --> 00:02:23,335
And in here we have some similar folders,
38
38
00:02:23,335 --> 00:02:26,343
again, CSS, but the difference is
39
39
00:02:26,343 --> 00:02:30,510
that this folder is for CSS that was not created by us.
40
40
00:02:31,824 --> 00:02:34,508
So that we download it from the internet
41
41
00:02:34,508 --> 00:02:37,183
and use for our project.
42
42
00:02:37,183 --> 00:02:40,266
And another one for JavaScript files,
43
43
00:02:41,292 --> 00:02:44,125
and one for fonts, that's probably
44
44
00:02:45,282 --> 00:02:47,699
where our icon fonts will go.
45
45
00:02:51,666 --> 00:02:54,266
So this is a structure that is very flexible
46
46
00:02:54,266 --> 00:02:57,804
and allows us to separate the files
47
47
00:02:57,804 --> 00:03:00,087
that were created by us and files
48
48
00:03:00,087 --> 00:03:02,527
that we download from the internet
49
49
00:03:02,527 --> 00:03:05,610
like JavaScript plugins or CSS files,
50
50
00:03:08,176 --> 00:03:10,759
such we are going to use later.
51
51
00:03:12,689 --> 00:03:16,474
Alright, so this is our folder structure.
52
52
00:03:16,474 --> 00:03:20,057
So now let's go to Brackets, and back here,
53
53
00:03:24,326 --> 00:03:27,896
this is our old project, you probably remember
54
54
00:03:27,896 --> 00:03:31,590
how to open a project, or create a new one,
55
55
00:03:31,590 --> 00:03:35,653
it's here, this button, and hit open folder,
56
56
00:03:35,653 --> 00:03:38,403
and it's on the desktop omnifood.
57
57
00:03:40,170 --> 00:03:43,055
Okay, so that is our working folder.
58
58
00:03:43,055 --> 00:03:47,205
Now let's start by creating a new HTML file,
59
59
00:03:47,205 --> 00:03:51,288
and I will save it and call it again, index.html,
60
60
00:03:53,997 --> 00:03:58,164
and also a new CSS file which I will leave empty for now.
61
61
00:04:00,102 --> 00:04:02,519
This one is again, style.css.
62
62
00:04:05,218 --> 00:04:09,240
So let's create our HTML structure here starting
63
63
00:04:09,240 --> 00:04:12,907
with the doc type, I hope you remember this.
64
64
00:04:15,944 --> 00:04:20,111
DOCTYPE html, alright, you remember what comes next?
65
65
00:04:22,219 --> 00:04:24,219
Now is the HTML element.
66
66
00:04:26,260 --> 00:04:30,041
Give it some space, and one thing we didn't do
67
67
00:04:30,041 --> 00:04:33,011
in the first project, but I'm going to do it now,
68
68
00:04:33,011 --> 00:04:35,511
is specify the lang attribute.
69
69
00:04:37,883 --> 00:04:41,633
And we will say that this page is in English.
70
70
00:04:42,766 --> 00:04:46,348
Alright, inside of the HTML we have again,
71
71
00:04:46,348 --> 00:04:48,598
the head, and then the body
72
72
00:04:53,271 --> 00:04:56,188
where all our main content will go.
73
73
00:04:59,739 --> 00:05:02,822
Okay, I will now include the CSS file
74
74
00:05:05,383 --> 00:05:07,745
which is, as you probably remember,
75
75
00:05:07,745 --> 00:05:10,245
link then rel, say stylesheet,
76
76
00:05:13,543 --> 00:05:17,293
then I say it's type, CSS, and now I actually
77
77
00:05:21,413 --> 00:05:24,163
realize that I did a mistake here
78
78
00:05:26,658 --> 00:05:29,491
because I want this file, you see,
79
79
00:05:32,350 --> 00:05:35,074
I put this file right here, but that's not
80
80
00:05:35,074 --> 00:05:39,241
where I want it, I want it right in our CSS folder.
81
81
00:05:40,719 --> 00:05:42,219
Right here, right.
82
82
00:05:46,328 --> 00:05:49,067
So let me see, so as I have told you before
83
83
00:05:49,067 --> 00:05:51,551
we have this file tree here where we can see
84
84
00:05:51,551 --> 00:05:54,153
all of our files, okay, here it is.
85
85
00:05:54,153 --> 00:05:56,630
So I can just delete this one.
86
86
00:05:56,630 --> 00:05:59,316
So Brackets allows you to use this
87
87
00:05:59,316 --> 00:06:02,149
as a file explorer, you can delete
88
88
00:06:03,669 --> 00:06:06,752
and manipulate files in here as well.
89
89
00:06:08,228 --> 00:06:09,893
So now let me establish the link
90
90
00:06:09,893 --> 00:06:12,226
between these two documents.
91
91
00:06:13,473 --> 00:06:16,890
Alright, href, and it's inside resources,
92
92
00:06:18,469 --> 00:06:22,636
inside the CSS folder, and it's style.css, and that's it.
93
93
00:06:27,451 --> 00:06:31,618
Now we'll just give it a nice title, just Omnifood for now,
94
94
00:06:37,311 --> 00:06:39,428
you can just change this later.
95
95
00:06:39,428 --> 00:06:41,911
And we will also put much more stuff here
96
96
00:06:41,911 --> 00:06:44,513
in the head section later on.
97
97
00:06:44,513 --> 00:06:46,790
Now in our CSS file I want to include
98
98
00:06:46,790 --> 00:06:50,957
right now is a CSS file which is called normalize.css.
99
99
00:06:53,467 --> 00:06:58,147
And as you can see here, normalize.css makes browsers
100
100
00:06:58,147 --> 00:07:00,917
render all elements more consistently
101
101
00:07:00,917 --> 00:07:03,197
and in line with modern standards.
102
102
00:07:03,197 --> 00:07:08,003
It precisely targets only the styles that needs normalizing.
103
103
00:07:08,003 --> 00:07:11,748
So it's like a CSS reset which makes CSS
104
104
00:07:11,748 --> 00:07:14,331
looks the same in all browsers.
105
105
00:07:15,208 --> 00:07:18,125
I'll hit this, now I will save this
106
106
00:07:20,694 --> 00:07:24,356
inside our project folder, omnifood,
107
107
00:07:24,356 --> 00:07:28,418
and as I explained before, this is a file
108
108
00:07:28,418 --> 00:07:31,100
we got from the internet, it's not our file,
109
109
00:07:31,100 --> 00:07:34,107
so I'll put this inside the CSS folder
110
110
00:07:34,107 --> 00:07:36,690
in the vendors folder, alright.
111
111
00:07:43,137 --> 00:07:45,705
So let's include it here.
112
112
00:07:45,705 --> 00:07:49,288
And it actually has to go before this file.
113
113
00:07:53,392 --> 00:07:57,225
So link, again, all of this stuff, stylesheet,
114
114
00:08:02,044 --> 00:08:06,211
type, CSS, href, now it's in the resources, CSS, normalize.
115
115
00:08:12,331 --> 00:08:16,498
Right, now the next step we do in this kind of setup
116
116
00:08:18,113 --> 00:08:22,266
process is to include the web font we chose.
117
117
00:08:22,266 --> 00:08:25,033
Do you remember, it was Lato.
118
118
00:08:25,033 --> 00:08:29,200
So I will go to Google Fonts, and it's actually right here.
119
119
00:08:31,165 --> 00:08:33,248
So this is the Lato font.
120
120
00:08:38,155 --> 00:08:41,893
See here, there are some others here,
121
121
00:08:41,893 --> 00:08:42,976
this is Lato.
122
122
00:08:44,170 --> 00:08:47,382
So these are the different styles which are available
123
123
00:08:47,382 --> 00:08:51,549
for this typeface, with the different font weights,
124
124
00:08:52,954 --> 00:08:55,067
and down here some italics.
125
125
00:08:55,067 --> 00:08:57,317
So we want to use this one.
126
126
00:08:58,848 --> 00:09:02,430
And here we gotta select all the styles we want.
127
127
00:09:02,430 --> 00:09:05,847
And I want the light one, and the normal,
128
128
00:09:08,649 --> 00:09:11,283
which is already selected, I don't know
129
129
00:09:11,283 --> 00:09:15,450
about the very thin, but for now I will just use this,
130
130
00:09:18,797 --> 00:09:22,130
and also the italics, this one, we don't
131
131
00:09:23,064 --> 00:09:26,086
want to use all of them because that would
132
132
00:09:26,086 --> 00:09:29,169
effect the page speed of our webpage.
133
133
00:09:33,531 --> 00:09:36,135
So we will just use these four one for now,
134
134
00:09:36,135 --> 00:09:41,094
and we can always select more if we need them later.
135
135
00:09:41,094 --> 00:09:43,613
So it's very, very easy.
136
136
00:09:43,613 --> 00:09:47,309
All we have to do now is to come down here
137
137
00:09:47,309 --> 00:09:51,309
and copy this link and go back to our HTML file,
138
138
00:09:53,486 --> 00:09:56,236
and paste it here, and that's it.
139
139
00:09:57,962 --> 00:10:00,234
And that's because this Google Font
140
140
00:10:00,234 --> 00:10:02,567
is actually just a CSS file.
141
141
00:10:04,300 --> 00:10:07,389
Which we use here in our project,
142
142
00:10:07,389 --> 00:10:08,730
but it's not a file that we download,
143
143
00:10:08,730 --> 00:10:11,563
it's a file that's in the internet
144
144
00:10:13,570 --> 00:10:16,153
here on the Google Font server.
145
145
00:10:19,386 --> 00:10:23,553
Alright, so let's make the first CSS definitions here.
146
146
00:10:29,140 --> 00:10:32,973
As you remember maybe, from our first project,
147
147
00:10:34,023 --> 00:10:38,023
we should target R elements and put their margin
148
148
00:10:39,095 --> 00:10:41,288
and padding to zero, that's always
149
149
00:10:41,288 --> 00:10:43,455
the first thing that I do.
150
150
00:10:44,745 --> 00:10:47,995
And I also set the box sizing property,
151
151
00:10:49,020 --> 00:10:53,187
which we talked about before, which is border box.
152
152
00:10:54,634 --> 00:10:58,801
Alright, so now all margins and paddings are gone.
153
153
00:11:02,488 --> 00:11:05,984
And now for the HTML we also make
154
154
00:11:05,984 --> 00:11:09,651
this basic setup so that we can get started.
155
155
00:11:10,688 --> 00:11:14,855
So the first thing I will set the background color,
156
156
00:11:16,665 --> 00:11:18,855
now the background color is not necessary
157
157
00:11:18,855 --> 00:11:21,863
'cause I want it to be white and that's the default,
158
158
00:11:21,863 --> 00:11:24,063
so it's not necessary, but just to
159
159
00:11:24,063 --> 00:11:26,313
show you I'll do it anyway.
160
160
00:11:28,454 --> 00:11:32,287
And we know that white is FFF, okay now we can
161
161
00:11:34,188 --> 00:11:37,688
set the text color for the entire project,
162
162
00:11:40,042 --> 00:11:43,455
and what I like to do is to start with black,
163
163
00:11:43,455 --> 00:11:46,541
'cause I know it's 000, then I use
164
164
00:11:46,541 --> 00:11:49,220
the color picker as we did before,
165
165
00:11:49,220 --> 00:11:53,387
with command, E, and choose a nice gray from here.
166
166
00:11:55,606 --> 00:11:59,023
Now we'll use this one, 555, which is not
167
167
00:12:00,692 --> 00:12:02,888
too dark and not too light,
168
168
00:12:02,888 --> 00:12:07,237
but if we want we can change this later as well.
169
169
00:12:07,237 --> 00:12:10,237
And we can also set the font family.
170
170
00:12:12,758 --> 00:12:15,508
So we will use, as we said, Lato.
171
171
00:12:17,312 --> 00:12:19,223
So all we need to do to set this family
172
172
00:12:19,223 --> 00:12:23,306
is to include the CSS file such as we did before,
173
173
00:12:25,033 --> 00:12:28,286
and then use that font name right here.
174
174
00:12:28,286 --> 00:12:32,274
Now as a second choice, as I did before,
175
175
00:12:32,274 --> 00:12:34,875
I will say just Ariel, and this is what
176
176
00:12:34,875 --> 00:12:37,027
happens, for example, if the user has
177
177
00:12:37,027 --> 00:12:40,486
no internet connection for, I don't know
178
178
00:12:40,486 --> 00:12:43,817
which reason, so if Lato can't be displayed,
179
179
00:12:43,817 --> 00:12:46,621
Ariel will be displayed instead.
180
180
00:12:46,621 --> 00:12:50,280
And now, if Ariel is not available as well,
181
181
00:12:50,280 --> 00:12:54,447
then we have this CSS keyword which is sans-serif,
182
182
00:12:56,801 --> 00:13:00,396
so if Lato and Ariel are both not available,
183
183
00:13:00,396 --> 00:13:03,563
then any sans-serif font will be used.
184
184
00:13:04,832 --> 00:13:07,838
And I will also set a font size.
185
185
00:13:07,838 --> 00:13:11,699
A overall font size for the project to 20 pixels.
186
186
00:13:11,699 --> 00:13:15,866
If that's too much, we can always put it back later.
187
187
00:13:16,979 --> 00:13:21,697
Another thing about the font is to set the font weight.
188
188
00:13:21,697 --> 00:13:24,706
I'll say font weight, and if you remember,
189
189
00:13:24,706 --> 00:13:28,873
I will go back here, we selected 100, 300 and 400,
190
190
00:13:31,367 --> 00:13:35,284
and the default that I will choose here is 300.
191
191
00:13:36,902 --> 00:13:40,235
And the last thing that I should do here
192
192
00:13:41,212 --> 00:13:45,212
is text rendering, and then optimize legibility.
193
193
00:13:48,045 --> 00:13:52,212
This will make our fonts rendering in a perfect way.
194
194
00:13:53,089 --> 00:13:56,302
Okay, I think that now we're ready to start.
195
195
00:13:56,302 --> 00:13:59,469
All the setup is done, let me just see
196
196
00:14:00,447 --> 00:14:04,614
if everything works, we'll just put in some h1 element here,
197
197
00:14:06,103 --> 00:14:09,353
put Omnifood, and test the whole thing.
198
198
00:14:10,453 --> 00:14:14,620
Open the live connection as we did before, takes some time.
199
199
00:14:16,998 --> 00:14:21,165
Alright, this is Omnifood, with the font we just selected
200
200
00:14:22,408 --> 00:14:25,333
and with the font size we selected
201
201
00:14:25,333 --> 00:14:27,728
and with the font color.
202
202
00:14:27,728 --> 00:14:31,504
So that was the basic setup of our project.
203
203
00:14:31,504 --> 00:14:35,254
Next we can start to actually build the site.
17753
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.