Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:02,046 --> 00:00:04,775
Welcome to the last work section.
2
2
00:00:04,775 --> 00:00:07,297
We have come such a long way so far.
3
3
00:00:07,297 --> 00:00:09,375
Our website looks super great
4
4
00:00:09,375 --> 00:00:11,906
and has some cool animations.
5
5
00:00:11,906 --> 00:00:13,585
Now in this section, we'll do some
6
6
00:00:13,585 --> 00:00:15,741
optimizations on our web page,
7
7
00:00:15,741 --> 00:00:17,646
and then I will show you how you can
8
8
00:00:17,646 --> 00:00:21,063
launch your own websites to the internet.
9
9
00:00:22,417 --> 00:00:25,487
But before doing that, let's add a final touch
10
10
00:00:25,487 --> 00:00:30,112
before we make our webpage ready for launch, a favicon.
11
11
00:00:30,112 --> 00:00:32,839
Favicons are those little icons you see
12
12
00:00:32,839 --> 00:00:36,807
on browser tabs and on your bookmarks bar.
13
13
00:00:36,807 --> 00:00:39,796
It is part of the identity of any website
14
14
00:00:39,796 --> 00:00:42,452
and makes users recognize your website.
15
15
00:00:42,452 --> 00:00:44,733
So don't skip this step.
16
16
00:00:44,733 --> 00:00:48,324
There is a very easy, online tool to do this.
17
17
00:00:48,324 --> 00:00:51,507
We just need an image to serve as our icon.
18
18
00:00:51,507 --> 00:00:53,993
So, let's do that for now.
19
19
00:00:53,993 --> 00:00:56,029
So this is the tool I was talking about,
20
20
00:00:56,029 --> 00:00:58,529
so it's the Favicon Generator.
21
21
00:00:59,379 --> 00:01:02,529
And with this we can create icons for the browser,
22
22
00:01:02,529 --> 00:01:04,894
of course, for the iOS home screen,
23
23
00:01:04,894 --> 00:01:09,221
for Android home screen, and for Windows 8,
24
24
00:01:09,221 --> 00:01:11,872
and, yeah, for Windows in general.
25
25
00:01:11,872 --> 00:01:15,423
So, we just need to pick our image.
26
26
00:01:15,423 --> 00:01:18,756
In this case, I'm going to use the logo.
27
27
00:01:23,307 --> 00:01:25,101
And the black one of course, so I'm going to
28
28
00:01:25,101 --> 00:01:28,018
use this one to create the favicon.
29
29
00:01:31,950 --> 00:01:33,200
And here we go.
30
30
00:01:34,362 --> 00:01:37,138
So the first icon here is actually for iOS,
31
31
00:01:37,138 --> 00:01:39,834
and since ours is transparent,
32
32
00:01:39,834 --> 00:01:42,782
we'll need to add a background color,
33
33
00:01:42,782 --> 00:01:45,185
which will be white.
34
34
00:01:45,185 --> 00:01:48,352
And then we have Android here as well.
35
35
00:01:49,355 --> 00:01:52,744
And I will also add this white color.
36
36
00:01:52,744 --> 00:01:55,994
And this is not so important, actually.
37
37
00:01:57,102 --> 00:02:00,215
What really matters is down here.
38
38
00:02:00,215 --> 00:02:01,382
And we go now,
39
39
00:02:02,631 --> 00:02:04,415
click here because we want to
40
40
00:02:04,415 --> 00:02:08,459
choose a path where we're going to put our icons,
41
41
00:02:08,459 --> 00:02:11,561
because we don't want them in the root,
42
42
00:02:11,561 --> 00:02:14,419
so in the main project folder.
43
43
00:02:14,419 --> 00:02:16,836
So let me check what this is.
44
44
00:02:19,749 --> 00:02:22,796
So I want them here, then in the Resources,
45
45
00:02:22,796 --> 00:02:25,647
and I'll actually create a folder for them here,
46
46
00:02:25,647 --> 00:02:26,480
Icons
47
47
00:02:28,136 --> 00:02:29,053
or Favicons
48
48
00:02:30,996 --> 00:02:34,413
and so, it's Resources and then Favicons.
49
49
00:02:37,744 --> 00:02:39,327
So I want Resources
50
50
00:02:41,602 --> 00:02:43,102
and then Favicons.
51
51
00:02:45,484 --> 00:02:48,422
So this is where we'll put the icons.
52
52
00:02:48,422 --> 00:02:50,755
And then, let's generate it.
53
53
00:02:54,052 --> 00:02:58,013
Okay, so we just download this and we grab
54
54
00:02:58,013 --> 00:03:01,930
this code here, and insert it into our website.
55
55
00:03:06,414 --> 00:03:09,664
So let's just paste off this down here.
56
56
00:03:15,460 --> 00:03:18,960
It's a lot of code, but well, don't worry.
57
57
00:03:22,681 --> 00:03:25,664
And now we just need to put this stuff
58
58
00:03:25,664 --> 00:03:27,831
into our folder, actually.
59
59
00:03:29,494 --> 00:03:30,744
And here it is.
60
60
00:03:34,521 --> 00:03:35,604
So, Favicons.
61
61
00:03:43,537 --> 00:03:46,027
All right, so, put them into Resources
62
62
00:03:46,027 --> 00:03:48,598
and we can replace that folder we had
63
63
00:03:48,598 --> 00:03:50,845
because it has the same name.
64
64
00:03:50,845 --> 00:03:53,428
And so, here are all our icons.
65
65
00:03:58,311 --> 00:04:00,311
So let's check this out.
66
66
00:04:04,517 --> 00:04:09,290
So the icon is not showing up here as it should.
67
67
00:04:09,290 --> 00:04:10,473
And I actually don't know why,
68
68
00:04:10,473 --> 00:04:12,876
but I'm sure that it is working
69
69
00:04:12,876 --> 00:04:16,876
on your computer, because as we can see in here,
70
70
00:04:18,187 --> 00:04:21,437
everything is working fine, supposedly.
71
71
00:04:23,897 --> 00:04:27,777
Which means that the images are in the correct place
72
72
00:04:27,777 --> 00:04:32,637
and, yeah, this code, of course, is also correct.
73
73
00:04:32,637 --> 00:04:35,496
So I don't know why it doesn't appear here in my case,
74
74
00:04:35,496 --> 00:04:39,256
but probably on your computer it will appear.
75
75
00:04:39,256 --> 00:04:42,072
So, okay, now you know how to add
76
76
00:04:42,072 --> 00:04:46,438
that special touch to your website as well.
77
77
00:04:46,438 --> 00:04:48,475
Now, I could just have stopped here
78
78
00:04:48,475 --> 00:04:50,841
and then launched our website or show you
79
79
00:04:50,841 --> 00:04:52,959
how to launch your website.
80
80
00:04:52,959 --> 00:04:55,037
But I want to show you even more.
81
81
00:04:55,037 --> 00:04:57,811
I want our website to be perfect,
82
82
00:04:57,811 --> 00:05:00,421
and so every detail matters.
83
83
00:05:00,421 --> 00:05:02,463 line:15%
So, let's now optimize our website's
84
84
00:05:02,463 --> 00:05:05,046
page speed in the next lecture.
6898
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.