Original subtitles

1 1

So in this section, 2

2

we're gonna build yet another project. 3

3

So let's start by taking a look at it. 4

4

So over the last two sections, 5

5

we built the application 6

6

for a fictional bank called Bankist. 7

7

Now in this section, 8

8

we're gonna be building the kind of marketing website 9

9

for the same fictional bank. 10

10

So again, that's Bankist is here. 11

11

And so let's take a look at it. 12

12

Now, of course, 13

13

all of this HTML and CSS that you see here is already 14

14

provided for you in the starter files, 15

15

but all the effects that you see here going on 16

16

will be built by us throughout the section. 17

17

So maybe you already saw this section here, 18

18

fading in and moving a little bit, 19

19

and also notice here what happens with these images. 20

20

So it's basically lazy loading these images 21

21

as we scroll to them. 22

22

So here you saw also this section fading in, 23

23

maybe you already also noticed that the menu bar 24

24

has become sticky here at the top. 25

25

And when we hover over each of these links, 26

26

then all the other links and get great out. 27

27

You'll see. And so all of that is done using JavaScript. 28

28

And also here you get this nice popup window. 29

29

And so again, that's JavaScript. 30

30

Here we have this component, which is a tapped component, 31

31

which is pretty common to see in modern user interfaces. 32

32

And so you will learn how to do this as well. 33

33

Then again, this section here, 34

34

sliding in and here we have the coolest component 35

35

of all of them, which is this slider. 36

36

So as we click here, you see, 37

37

basically we have these three slides with these three dots 38

38

and we are circling through them as we click these arrows 39

39

or even these dots. 40

40

So these dots, they work just the same as the arrows. 41

41

And I'm sure you have seen a slider like this. 42

42

And so now you will learn one way of building 43

43

a really cool slider. 44

44

Yeah, just like this one. 45

45

And here again, we will have the popup window. 46

46

And of course, if we click here, 47

47

then we get a smooth scrolling animation to that part 48

48

of the page and the same here on this button now. Okay. 49

49

So you'll see there are a lot of dynamic effects 50

50

going on here on this page. 51

51

And so I hope you're really excited for this project 52

52

because you will learn how to do all of them. 53

53

And these are for sure, 54

54

some of the most important and commonly used effects 55

55

that you will see on all websites. 56

56

And so that's why I decided to include this project 57

57

in the course so that you can learn how to do them yourself. 58

58

I also tried to design a really nice and beautiful website, 59

59

which looks like a real marketing page of a real company. 60

60

And so if you include this in your portfolio, 61

61

then I'm sure it will look really cool 62

62

on your portfolio too. 63

63

So I hope you liked this page, that you liked the effects 64

64

that we're gonna implement, 65

65

and that you're just as excited as I am 66

66

to get started with this project. 67

67

So anyway, please open up your starter files 68

68

that I provided for this project. 69

69

And so there you have this big HTML file 70

70

that I will explain you as necessary, 71

71

then this huge style sheet with hundreds of lines of code 72

72

that I wrote just for this project. 73

73

And then of course the script.js 74

74

Now here, I already included the code for the modal window 75

75

because this is actually exactly the code 76

76

that we wrote before in one of the projects. Remember that? 77

77

So this is exactly the same. And so if we start our project, 78

78

it should actually already be working. 79

79

So let's open up here our console live server. 80

80

And so this is the page here. 81

81

Now I'm seeing this page at, I think 75% now, 82

82

because otherwise it looks really ugly, right? 83

83

And at this point also nothing works yet as it did 84

84

in the demo project because the JavaScript 85

85

is simply not yet written. 86

86

And so of course, 87

87

nothing works here, and everything looks a little bit weird. 88

88

So let's go back to 75%, 89

89

but what should already be working is this popup. 90

90

So does modal window. 91

91

And again, that is because it is exactly the same code 92

92

that we already wrote before. 93

93

Now, there are just two small changes 94

94

that I want to do here in this code 95

95

A very quick before we get started, 96

96

the first one is, 97

97

watch what happens if we click this button here, 98

98

like in this position. 99

99

So you'll see that the page scroll to back to the top 100

100

and that is because, well, let me show you here. 101

101

So that's because this is actually now a link 102

102

and not a button and on the link 103

103

when we have this hash here as the hyperlink. 104

104

So as HRF, then that will make the page jump to the top. 105

105

So that's the default behavior. 106

106

When we click a link that has this hyperlink here. 107

107

And so if that is the default, 108

108

we already know a way of preventing debt default, right? 109

109

Do you remember how? 110

110

Well, all we need here is in dysfunction, 111

111

which is the one responsible for opening this model, 112

112

is to get access to the event. 113

113

And then on the event we call prevent default. 114

114

So hopefully you remember that from earlier. 115

115

So let's see again, and this time, the page didn't jump. 116

116

So we fixed that. 117

117

And now the second part that I want to quickly fix 118

118

is getting rid of this old school 119

119

for a loop that we have here, 120

120

because now we know of a better way of doing this, 121

121

which is the, for each loop. 122

122

So we have this buttons open modal, which is a node list. 123

123

And it's a node list 124

124

because it's the result of querySelectorAll, all right. 125

125

Now remember that a note list is not an array, 126

126

but still it does have default for each method. 127

127

So it doesn't have most of the methods that erase have, 128

128

but for each is one of the methods 129

129

that in node list has as well. 130

130

And so let's use that now. 131

131

So buttons open modal dot for each. 132

132

And so remember that we did this loop here 133

133

in the first place, 134

134

because we wanted to add an event listener 135

135

to each of the buttons. 136

136

So in our case, 137

137

that's this button here and also this one down here. 138

138

So this one, 139

139

well, for some reason it's not working right now, 140

140

but let's first finish this. 141

141

All right. 142

142

So anyway, we want to attach 143

143

an event listener to this button 144

144

and to this one here at the same time. 145

145

And so that's why we did this loop, 146

146

but now we have a better way of doing it, 147

147

which is by simply providing a callback function here, 148

148

two for each. 149

149

So each one will be a button. 150

150

And then on that button, 151

151

we will simply add an event listener. 152

152

And so that's simply this part. 153

153

And so now, this is exactly the same as this, 154

154

but in a lot easier way. 155

155

So let's give it a save 156

156

and that works and let's check the other one as well. 157

157

90. Yeah. 158

158

So this one works as well. 159

159

And so with this, 160

160

our code is a little bit nicer and adapted to this page. 161

161

All right. So we are ready to get started in the section 162

162

and we will do that right in the next video, 163

163

by learning a little bit more 164

164

about how the DOM actually works behind the scenes.