1
00:00:01,330 --> 00:00:01,930
‫Hey, there.

2
00:00:02,080 --> 00:00:02,800
‫Welcome back.

3
00:00:02,890 --> 00:00:03,880
‫Shame on the site.

4
00:00:04,270 --> 00:00:10,210
‫And welcome to a new project in which you are going to be I Spotify landing page clone.

5
00:00:10,810 --> 00:00:17,530
‫Now remember, the main aim of this whole project is to understand Flexbox in a practical manner.

6
00:00:18,400 --> 00:00:25,720
‫First thing first, let me jump onto the official website of Spotify, and there are tons of things

7
00:00:25,720 --> 00:00:28,840
‫that we are going to understand as we move forward with this course.

8
00:00:29,470 --> 00:00:33,670
‫So this is the website that we are trying to clone and head of The Clone.

9
00:00:34,240 --> 00:00:38,020
‫Remember, I have created somewhat parody of a site.

10
00:00:38,050 --> 00:00:43,290
‫I should be separated because we are not officially going to create Spotify.

11
00:00:43,900 --> 00:00:49,330
‫We are going to do something similar, so I have created everything from scratch.

12
00:00:50,050 --> 00:00:55,480
‫We cannot utilize Spotify logo or Spotify if we can't even do tag line.

13
00:00:55,480 --> 00:01:01,450
‫So I have changed everything and created some a parody on, I should say somewhat a clone.

14
00:01:02,140 --> 00:01:03,970
‫Here we have or fire.

15
00:01:04,000 --> 00:01:07,090
‫We have our own tagline, our own on.

16
00:01:07,600 --> 00:01:10,750
‫But remember, the aim is to understand Flexbox.

17
00:01:11,320 --> 00:01:17,940
‫You will see you get all the other functionalities I have created on background images and change to

18
00:01:17,950 --> 00:01:18,460
‫text.

19
00:01:18,910 --> 00:01:27,070
‫Then if you scroll down a bit, you will see different sections about Link's logo, then social media.

20
00:01:27,340 --> 00:01:33,670
‫Then we have certain extras link and few other information, so I have followed somewhat similar.

21
00:01:34,090 --> 00:01:40,240
‫We have a logo that links social media, other links and few other information.

22
00:01:41,200 --> 00:01:43,910
‫So this is the clone of Spotify.

23
00:01:44,620 --> 00:01:53,410
‫Remember, our aim is to understand Flexbox by building something that looks similar to Spotify.

24
00:01:54,190 --> 00:01:59,680
‫Now remember, there are few things that you should keep in mind while building any type of clone.

25
00:02:00,070 --> 00:02:06,400
‫The first thing is all this big website you can consider Spotify and maybe Uber, or maybe any other

26
00:02:06,400 --> 00:02:07,270
‫big company.

27
00:02:07,540 --> 00:02:08,950
‫They have their own phone.

28
00:02:09,340 --> 00:02:11,200
‫So you are not going to access them.

29
00:02:11,400 --> 00:02:16,180
‫What you can do is you can utilize any similar phone through Google phone.

30
00:02:16,600 --> 00:02:19,390
‫So basically, I have used somewhat a similar phone.

31
00:02:20,260 --> 00:02:27,910
‫The other thing is they have their own logo fabric on background images and maybe a few icons itself.

32
00:02:28,060 --> 00:02:35,230
‫At this point of time, we are able to fetch similar icons, although we are able to fetch similar alone

33
00:02:35,230 --> 00:02:37,690
‫for every corner as well as this logo.

34
00:02:37,960 --> 00:02:45,520
‫But remember, you cannot utilize these official icons if you are building up alone as a beginner buyer

35
00:02:45,520 --> 00:02:48,070
‫for your resume a project, I think you can.

36
00:02:48,370 --> 00:02:53,440
‫So what I usually do is I create somewhat similar logos to different free apps.

37
00:02:53,800 --> 00:02:59,140
‫You can access them directly through resource part, maybe on GitHub or directly through download section.

38
00:02:59,740 --> 00:03:01,300
‫So these are custom created.

39
00:03:01,690 --> 00:03:09,220
‫The next thing is I also change their tagline Spotify is related to music market eichinger to learning

40
00:03:09,220 --> 00:03:10,300
‫instead of listening.

41
00:03:10,690 --> 00:03:15,660
‫So we are not copying everything from Spotify, but understanding how Flexbox work.

42
00:03:16,240 --> 00:03:18,250
‫Now remember why is Spotify?

43
00:03:18,670 --> 00:03:22,570
‫Because Spotify utilizes Flexbox pretty well.

44
00:03:23,020 --> 00:03:28,240
‫You will not just understand the Flexbox part, but also utilize how to nest them.

45
00:03:28,250 --> 00:03:32,350
‫That means you can add flex and side effects inside Flex.

46
00:03:32,530 --> 00:03:39,670
‫And we are going to do somewhat similar here at the bar and also you understand how layout works.

47
00:03:39,850 --> 00:03:44,260
‫So Spotify is one of the best example to learn.

48
00:03:44,260 --> 00:03:47,160
‫Flexbox also to understand basically how.

49
00:03:49,060 --> 00:03:51,490
‫Let me just jump on to inspect for now.

50
00:03:52,510 --> 00:03:56,080
‫And here, let me open this properly.

51
00:03:58,250 --> 00:04:05,210
‫OK, let me close this whole body, and this is our current code, which part of why a landing page

52
00:04:06,080 --> 00:04:08,240
‫and you will understand certain things.

53
00:04:08,270 --> 00:04:12,740
‫They have their achievement, then head, then body simple.

54
00:04:13,130 --> 00:04:18,950
‫Once they open this body, they have several scripts that we don't need to touch, but they have this

55
00:04:18,950 --> 00:04:19,250
‫do.

56
00:04:19,490 --> 00:04:22,400
‫That means their complete website is inside this.

57
00:04:23,390 --> 00:04:25,510
‫Again, they have divided multiple devs.

58
00:04:25,610 --> 00:04:26,330
‫Looks fine.

59
00:04:27,050 --> 00:04:28,490
‫So this is their header.

60
00:04:28,640 --> 00:04:33,940
‫That means everything that is related to this navigation bar is inside their header.

61
00:04:35,290 --> 00:04:40,960
‫Now, if I open this header, they have certain links that can be related to logo or any other information,

62
00:04:41,380 --> 00:04:45,400
‫then they have another date, which includes navigation bar.

63
00:04:46,000 --> 00:04:50,530
‫So that means inside their head, they have their navigation bar as well as the local bar.

64
00:04:51,100 --> 00:04:52,030
‫Oh, that's great.

65
00:04:52,660 --> 00:04:57,010
‫Then we have another day, which is going to include their whole section.

66
00:04:57,520 --> 00:05:02,710
‫Now this section can be converted into main, can be converted into multiple section.

67
00:05:02,980 --> 00:05:04,210
‫That's according to them.

68
00:05:04,660 --> 00:05:09,160
‫And then at the end, they have a div, which includes default apart.

69
00:05:09,640 --> 00:05:14,560
‫So everything that is inside, therefore there is going to be inside head in the stack.

70
00:05:15,400 --> 00:05:21,460
‫Now again, you will see a navigation way because they are stored, all these links inside navigation,

71
00:05:21,460 --> 00:05:22,300
‫which is great.

72
00:05:22,750 --> 00:05:28,540
‫And if I open this one, you will see multiple lives, what each part, how you can use section as well

73
00:05:28,540 --> 00:05:31,270
‫if you are dividing content, according to section.

74
00:05:32,120 --> 00:05:34,150
‫And that would be great nowadays.

75
00:05:34,330 --> 00:05:37,900
‫So all the content are followed inside this whole day.

76
00:05:38,740 --> 00:05:40,530
‫So that's how they have divided things.

77
00:05:40,540 --> 00:05:45,670
‫They have utilized Dave to add certain functionality and also to add certain classes.

78
00:05:45,970 --> 00:05:51,790
‫We don't need to copy all of them because Spotify is a big website and we are just trying to clone home

79
00:05:51,790 --> 00:05:53,140
‫page, but they are pretty big.

80
00:05:53,620 --> 00:05:55,630
‫We are not going to replicate any other part.

81
00:05:55,630 --> 00:05:58,450
‫We are just trying to understand the home page.

82
00:05:58,450 --> 00:06:01,000
‫Part adding is to learn Flexbox.

83
00:06:01,570 --> 00:06:01,960
‫OK.

84
00:06:01,990 --> 00:06:03,050
‫This is going great.

85
00:06:03,070 --> 00:06:05,020
‫Now let me jump at the top.

86
00:06:05,530 --> 00:06:11,050
‫And what we can do is we can jump on to multiple section and see this flex icon.

87
00:06:11,920 --> 00:06:17,710
‫This Flex icon will help us to understand which part of their website is utilizing Flexbox and which

88
00:06:17,710 --> 00:06:19,630
‫part is utilizing any other layout.

89
00:06:20,170 --> 00:06:21,610
‫And this is important.

90
00:06:21,970 --> 00:06:28,510
‫For example, let me take this on the bottom so we can see multiple section and look at this section.

91
00:06:28,510 --> 00:06:35,860
‫So what I'm going to do is right click here, click on Inspect US, so we can jump onto the main part

92
00:06:35,860 --> 00:06:37,240
‫here, which is this flex.

93
00:06:38,050 --> 00:06:40,810
‫So just the footer and then the navigation.

94
00:06:40,990 --> 00:06:41,920
‫This is Flex.

95
00:06:41,920 --> 00:06:46,150
‫If I click here, you will see how they have designed their website.

96
00:06:48,570 --> 00:06:52,080
‫So this is Flex party, that means the item.

97
00:06:52,740 --> 00:07:02,460
‫Item B item, see Item B, which is the country name and then Item E also, you can just minimize this

98
00:07:02,460 --> 00:07:04,770
‫and see this is inside this now.

99
00:07:04,770 --> 00:07:07,920
‫This is item one, two, three, four and five.

100
00:07:08,460 --> 00:07:09,780
‫That's how it's divided.

101
00:07:10,350 --> 00:07:11,160
‫This is great.

102
00:07:11,460 --> 00:07:13,020
‫Now you will see inside them.

103
00:07:13,020 --> 00:07:18,440
‫Also, they're utilizing Flex, so that means this is one item, but they have converted into Flex.

104
00:07:18,450 --> 00:07:22,350
‫That means all the child inside this flex will be affected.

105
00:07:22,590 --> 00:07:27,150
‫So if I open this one, you will see this this call on one, two and three.

106
00:07:27,450 --> 00:07:28,980
‫So that means this is flex.

107
00:07:28,980 --> 00:07:32,280
‫If you click here, it will see these highlighted lines.

108
00:07:32,790 --> 00:07:37,830
‫So this is one column, two column and three column.

109
00:07:38,920 --> 00:07:40,570
‫One, two and three.

110
00:07:41,200 --> 00:07:46,960
‫So that's how you are utilizing, or I should say, nesting the flags are flags nesting.

111
00:07:47,770 --> 00:07:54,730
‫And you will see others are also nesting, so it might minimize this one and jump onto this part, which

112
00:07:54,730 --> 00:07:55,570
‫is the last one.

113
00:07:55,900 --> 00:07:56,800
‫Open this one.

114
00:07:57,040 --> 00:07:58,510
‫And click on flags.

115
00:07:59,140 --> 00:08:00,610
‫You will see how they have divided.

116
00:08:00,610 --> 00:08:05,980
‫They are utilizing the U.N. tell her and then the others modify a name here.

117
00:08:07,090 --> 00:08:13,360
‫Now, why it is important, because this help us to give control in the form of flex direction, we

118
00:08:13,360 --> 00:08:15,050
‫can add flex direction here.

119
00:08:15,080 --> 00:08:22,810
‫We can add flex direction head on and also gave us control to move things so we can move down the bottom

120
00:08:22,810 --> 00:08:25,950
‫left, right everything, even the navigation body.

121
00:08:26,320 --> 00:08:30,490
‫Right click click on Inspect and jump onto the top navigation bar.

122
00:08:30,820 --> 00:08:37,180
‫You can see all the other items out of Flex, so that means one two three four five six.

123
00:08:37,630 --> 00:08:44,410
‫So they have divided items into six part and the built in navigation bar with flex marks.

124
00:08:44,620 --> 00:08:46,270
‫It's the best thing you can do.

125
00:08:46,600 --> 00:08:48,130
‫You don't have to worry much.

126
00:08:48,130 --> 00:08:50,470
‫You can just divide things into multiple parts.

127
00:08:50,860 --> 00:08:54,100
‫Again, this whole header is itself a flex jumper.

128
00:08:54,610 --> 00:08:55,990
‫You can see this is flex.

129
00:08:56,000 --> 00:09:01,660
‫So one, then we have some gap, then flex item and then we have nested inside.

130
00:09:01,690 --> 00:09:04,440
‫Now that means we are flex.

131
00:09:04,450 --> 00:09:06,190
‫Then this is inside Flex.

132
00:09:07,070 --> 00:09:13,670
‫I hope you got some idea what you can do is you can jump on to a Spotify army, we are alone currently.

133
00:09:14,120 --> 00:09:16,400
‫We are trying to do something similar.

134
00:09:17,060 --> 00:09:17,600
‫That's it.

135
00:09:18,050 --> 00:09:23,720
‫Now one important thing I have decreased their screen size for my demo, as well as for the official

136
00:09:23,720 --> 00:09:26,390
‫Spotify, so we can watch everything clearly.

137
00:09:26,780 --> 00:09:33,890
‫The reason is I am on pretty big monitor and the ratio of my monitor will affect a lot of things on

138
00:09:33,890 --> 00:09:35,030
‫the original website.

139
00:09:35,600 --> 00:09:38,150
‫So what I did is I decreased the screen size.

140
00:09:39,330 --> 00:09:41,130
‫It should look normal to you now.

141
00:09:41,790 --> 00:09:46,800
‫This point is just a side disclaimer and has nothing to do with any type of change.

142
00:09:47,370 --> 00:09:51,780
‫Maybe some student noticed this magnifying glass, so that's why I've mentioned this.

143
00:09:52,740 --> 00:09:57,450
‫And yes, we have followed everything every day for our class background.

144
00:09:57,570 --> 00:10:03,480
‫I try to create similar background and even the buttons, so I try to clone everything.

145
00:10:03,780 --> 00:10:11,370
‫But our aim is to understand Flexbox so that sick with this demo lecture in the next one, what we are

146
00:10:11,370 --> 00:10:17,550
‫going to do is we are going to jump on to our project file and start working with all the different

147
00:10:17,550 --> 00:10:18,000
‫codes.

148
00:10:18,630 --> 00:10:23,340
‫I hope this demo was helpful, and in the next lecture, let us start our journey.

149
00:10:23,760 --> 00:10:26,400
‫Thank you for calling, and I see you guys in the next one.