Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,400 --> 00:00:02,730
So in this section,
2
00:00:02,730 --> 00:00:05,490
we're gonna build yet another project.
3
00:00:05,490 --> 00:00:08,093
So let's start by taking a look at it.
4
00:00:09,600 --> 00:00:12,070
So over the last two sections,
5
00:00:12,070 --> 00:00:13,500
we built the application
6
00:00:13,500 --> 00:00:16,268
for a fictional bank called Bankist.
7
00:00:16,268 --> 00:00:18,380
Now in this section,
8
00:00:18,380 --> 00:00:22,260
we're gonna be building the kind of marketing website
9
00:00:22,260 --> 00:00:24,740
for the same fictional bank.
10
00:00:24,740 --> 00:00:27,157
So again, that's Bankist is here.
11
00:00:27,157 --> 00:00:30,290
And so let's take a look at it.
12
00:00:30,290 --> 00:00:31,280
Now, of course,
13
00:00:31,280 --> 00:00:35,260
all of this HTML and CSS that you see here is already
14
00:00:35,260 --> 00:00:37,909
provided for you in the starter files,
15
00:00:37,909 --> 00:00:40,860
but all the effects that you see here going on
16
00:00:40,860 --> 00:00:43,449
will be built by us throughout the section.
17
00:00:43,449 --> 00:00:47,070
So maybe you already saw this section here,
18
00:00:47,070 --> 00:00:49,524
fading in and moving a little bit,
19
00:00:49,524 --> 00:00:53,703
and also notice here what happens with these images.
20
00:00:55,680 --> 00:00:59,160
So it's basically lazy loading these images
21
00:00:59,160 --> 00:01:00,483
as we scroll to them.
22
00:01:02,780 --> 00:01:06,756
So here you saw also this section fading in,
23
00:01:06,756 --> 00:01:11,550
maybe you already also noticed that the menu bar
24
00:01:11,550 --> 00:01:14,070
has become sticky here at the top.
25
00:01:14,070 --> 00:01:16,520
And when we hover over each of these links,
26
00:01:16,520 --> 00:01:19,920
then all the other links and get great out.
27
00:01:19,920 --> 00:01:23,893
You'll see. And so all of that is done using JavaScript.
28
00:01:25,170 --> 00:01:28,958
And also here you get this nice popup window.
29
00:01:28,958 --> 00:01:31,520
And so again, that's JavaScript.
30
00:01:31,520 --> 00:01:36,520
Here we have this component, which is a tapped component,
31
00:01:36,540 --> 00:01:40,290
which is pretty common to see in modern user interfaces.
32
00:01:40,290 --> 00:01:43,133
And so you will learn how to do this as well.
33
00:01:43,976 --> 00:01:46,140
Then again, this section here,
34
00:01:46,140 --> 00:01:49,820
sliding in and here we have the coolest component
35
00:01:49,820 --> 00:01:52,743
of all of them, which is this slider.
36
00:01:52,743 --> 00:01:55,236
So as we click here, you see,
37
00:01:55,236 --> 00:01:59,674
basically we have these three slides with these three dots
38
00:01:59,674 --> 00:02:03,521
and we are circling through them as we click these arrows
39
00:02:03,521 --> 00:02:05,093
or even these dots.
40
00:02:06,400 --> 00:02:09,967
So these dots, they work just the same as the arrows.
41
00:02:09,967 --> 00:02:12,800
And I'm sure you have seen a slider like this.
42
00:02:12,800 --> 00:02:15,950
And so now you will learn one way of building
43
00:02:15,950 --> 00:02:17,492
a really cool slider.
44
00:02:17,492 --> 00:02:19,453
Yeah, just like this one.
45
00:02:20,620 --> 00:02:23,813
And here again, we will have the popup window.
46
00:02:25,260 --> 00:02:27,300
And of course, if we click here,
47
00:02:27,300 --> 00:02:31,300
then we get a smooth scrolling animation to that part
48
00:02:31,300 --> 00:02:36,300
of the page and the same here on this button now. Okay.
49
00:02:37,470 --> 00:02:40,090
So you'll see there are a lot of dynamic effects
50
00:02:40,090 --> 00:02:42,010
going on here on this page.
51
00:02:42,010 --> 00:02:44,774
And so I hope you're really excited for this project
52
00:02:44,774 --> 00:02:48,370
because you will learn how to do all of them.
53
00:02:48,370 --> 00:02:49,805
And these are for sure,
54
00:02:49,805 --> 00:02:53,169
some of the most important and commonly used effects
55
00:02:53,169 --> 00:02:56,110
that you will see on all websites.
56
00:02:56,110 --> 00:02:59,150
And so that's why I decided to include this project
57
00:02:59,150 --> 00:03:03,510
in the course so that you can learn how to do them yourself.
58
00:03:03,510 --> 00:03:07,270
I also tried to design a really nice and beautiful website,
59
00:03:07,270 --> 00:03:11,340
which looks like a real marketing page of a real company.
60
00:03:11,340 --> 00:03:13,543
And so if you include this in your portfolio,
61
00:03:13,543 --> 00:03:16,310
then I'm sure it will look really cool
62
00:03:16,310 --> 00:03:18,500
on your portfolio too.
63
00:03:18,500 --> 00:03:21,860
So I hope you liked this page, that you liked the effects
64
00:03:21,860 --> 00:03:23,330
that we're gonna implement,
65
00:03:23,330 --> 00:03:25,800
and that you're just as excited as I am
66
00:03:25,800 --> 00:03:28,113
to get started with this project.
67
00:03:29,350 --> 00:03:32,890
So anyway, please open up your starter files
68
00:03:32,890 --> 00:03:36,150
that I provided for this project.
69
00:03:36,150 --> 00:03:39,988
And so there you have this big HTML file
70
00:03:39,988 --> 00:03:42,764
that I will explain you as necessary,
71
00:03:42,764 --> 00:03:47,000
then this huge style sheet with hundreds of lines of code
72
00:03:47,000 --> 00:03:50,020
that I wrote just for this project.
73
00:03:50,020 --> 00:03:53,600
And then of course the script.js
74
00:03:53,600 --> 00:03:57,440
Now here, I already included the code for the modal window
75
00:03:58,480 --> 00:04:01,180
because this is actually exactly the code
76
00:04:01,180 --> 00:04:05,268
that we wrote before in one of the projects. Remember that?
77
00:04:05,268 --> 00:04:09,027
So this is exactly the same. And so if we start our project,
78
00:04:09,027 --> 00:04:12,451
it should actually already be working.
79
00:04:12,451 --> 00:04:17,451
So let's open up here our console live server.
80
00:04:20,490 --> 00:04:22,714
And so this is the page here.
81
00:04:22,714 --> 00:04:27,714
Now I'm seeing this page at, I think 75% now,
82
00:04:29,160 --> 00:04:33,930
because otherwise it looks really ugly, right?
83
00:04:33,930 --> 00:04:37,780
And at this point also nothing works yet as it did
84
00:04:37,780 --> 00:04:40,560
in the demo project because the JavaScript
85
00:04:40,560 --> 00:04:42,900
is simply not yet written.
86
00:04:42,900 --> 00:04:43,860
And so of course,
87
00:04:43,860 --> 00:04:48,860
nothing works here, and everything looks a little bit weird.
88
00:04:50,700 --> 00:04:53,143
So let's go back to 75%,
89
00:04:53,143 --> 00:04:58,010
but what should already be working is this popup.
90
00:04:58,010 --> 00:05:00,010
So does modal window.
91
00:05:00,010 --> 00:05:03,509
And again, that is because it is exactly the same code
92
00:05:03,509 --> 00:05:05,493
that we already wrote before.
93
00:05:06,697 --> 00:05:09,280
Now, there are just two small changes
94
00:05:09,280 --> 00:05:11,130
that I want to do here in this code
95
00:05:11,130 --> 00:05:13,740
A very quick before we get started,
96
00:05:13,740 --> 00:05:14,584
the first one is,
97
00:05:14,584 --> 00:05:18,060
watch what happens if we click this button here,
98
00:05:18,060 --> 00:05:19,223
like in this position.
99
00:05:21,250 --> 00:05:23,970
So you'll see that the page scroll to back to the top
100
00:05:23,970 --> 00:05:27,833
and that is because, well, let me show you here.
101
00:05:29,210 --> 00:05:32,520
So that's because this is actually now a link
102
00:05:32,520 --> 00:05:35,260
and not a button and on the link
103
00:05:35,260 --> 00:05:39,090
when we have this hash here as the hyperlink.
104
00:05:39,090 --> 00:05:43,770
So as HRF, then that will make the page jump to the top.
105
00:05:43,770 --> 00:05:45,740
So that's the default behavior.
106
00:05:45,740 --> 00:05:49,688
When we click a link that has this hyperlink here.
107
00:05:49,688 --> 00:05:51,870
And so if that is the default,
108
00:05:51,870 --> 00:05:56,670
we already know a way of preventing debt default, right?
109
00:05:56,670 --> 00:05:58,093
Do you remember how?
110
00:05:59,010 --> 00:06:02,580
Well, all we need here is in dysfunction,
111
00:06:02,580 --> 00:06:06,601
which is the one responsible for opening this model,
112
00:06:06,601 --> 00:06:09,240
is to get access to the event.
113
00:06:09,240 --> 00:06:13,240
And then on the event we call prevent default.
114
00:06:16,033 --> 00:06:18,928
So hopefully you remember that from earlier.
115
00:06:18,928 --> 00:06:23,928
So let's see again, and this time, the page didn't jump.
116
00:06:26,164 --> 00:06:27,500
So we fixed that.
117
00:06:27,500 --> 00:06:30,970
And now the second part that I want to quickly fix
118
00:06:30,970 --> 00:06:33,560
is getting rid of this old school
119
00:06:33,560 --> 00:06:35,760
for a loop that we have here,
120
00:06:35,760 --> 00:06:39,130
because now we know of a better way of doing this,
121
00:06:39,130 --> 00:06:41,678
which is the, for each loop.
122
00:06:41,678 --> 00:06:46,244
So we have this buttons open modal, which is a node list.
123
00:06:46,244 --> 00:06:47,654
And it's a node list
124
00:06:47,654 --> 00:06:52,654
because it's the result of querySelectorAll, all right.
125
00:06:52,671 --> 00:06:56,670
Now remember that a note list is not an array,
126
00:06:56,670 --> 00:07:00,387
but still it does have default for each method.
127
00:07:00,387 --> 00:07:04,330
So it doesn't have most of the methods that erase have,
128
00:07:04,330 --> 00:07:06,950
but for each is one of the methods
129
00:07:06,950 --> 00:07:09,540
that in node list has as well.
130
00:07:09,540 --> 00:07:12,200
And so let's use that now.
131
00:07:12,200 --> 00:07:16,363
So buttons open modal dot for each.
132
00:07:17,197 --> 00:07:19,900
And so remember that we did this loop here
133
00:07:19,900 --> 00:07:21,120
in the first place,
134
00:07:21,120 --> 00:07:23,580
because we wanted to add an event listener
135
00:07:23,580 --> 00:07:25,520
to each of the buttons.
136
00:07:25,520 --> 00:07:26,470
So in our case,
137
00:07:26,470 --> 00:07:30,173
that's this button here and also this one down here.
138
00:07:31,960 --> 00:07:33,150
So this one,
139
00:07:33,150 --> 00:07:35,600
well, for some reason it's not working right now,
140
00:07:36,575 --> 00:07:39,473
but let's first finish this.
141
00:07:40,540 --> 00:07:41,470
All right.
142
00:07:41,470 --> 00:07:43,630
So anyway, we want to attach
143
00:07:43,630 --> 00:07:45,723
an event listener to this button
144
00:07:45,723 --> 00:07:48,981
and to this one here at the same time.
145
00:07:48,981 --> 00:07:51,213
And so that's why we did this loop,
146
00:07:51,213 --> 00:07:53,485
but now we have a better way of doing it,
147
00:07:53,485 --> 00:07:56,760
which is by simply providing a callback function here,
148
00:07:56,760 --> 00:07:58,070
two for each.
149
00:07:58,070 --> 00:08:00,203
So each one will be a button.
150
00:08:01,220 --> 00:08:02,834
And then on that button,
151
00:08:02,834 --> 00:08:06,020
we will simply add an event listener.
152
00:08:06,020 --> 00:08:08,653
And so that's simply this part.
153
00:08:12,410 --> 00:08:15,290
And so now, this is exactly the same as this,
154
00:08:15,290 --> 00:08:17,373
but in a lot easier way.
155
00:08:18,420 --> 00:08:19,570
So let's give it a save
156
00:08:22,250 --> 00:08:25,513
and that works and let's check the other one as well.
157
00:08:26,990 --> 00:08:27,823
90. Yeah.
158
00:08:28,800 --> 00:08:30,870
So this one works as well.
159
00:08:30,870 --> 00:08:31,703
And so with this,
160
00:08:31,703 --> 00:08:35,652
our code is a little bit nicer and adapted to this page.
161
00:08:35,652 --> 00:08:39,547
All right. So we are ready to get started in the section
162
00:08:39,547 --> 00:08:42,470
and we will do that right in the next video,
163
00:08:42,470 --> 00:08:43,810
by learning a little bit more
164
00:08:43,810 --> 00:08:46,923
about how the DOM actually works behind the scenes.
12161
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.