‫Hey, there.
‫Welcome back.
‫Shame on the site.
‫And welcome to a new project in which you are going to be I Spotify landing page clone.
‫Now remember, the main aim of this whole project is to understand Flexbox in a practical manner.
‫First thing first, let me jump onto the official website of Spotify, and there are tons of things
‫that we are going to understand as we move forward with this course.
‫So this is the website that we are trying to clone and head of The Clone.
‫Remember, I have created somewhat parody of a site.
‫I should be separated because we are not officially going to create Spotify.
‫We are going to do something similar, so I have created everything from scratch.
‫We cannot utilize Spotify logo or Spotify if we can't even do tag line.
‫So I have changed everything and created some a parody on, I should say somewhat a clone.
‫Here we have or fire.
‫We have our own tagline, our own on.
‫But remember, the aim is to understand Flexbox.
‫You will see you get all the other functionalities I have created on background images and change to
‫text.
‫Then if you scroll down a bit, you will see different sections about Link's logo, then social media.
‫Then we have certain extras link and few other information, so I have followed somewhat similar.
‫We have a logo that links social media, other links and few other information.
‫So this is the clone of Spotify.
‫Remember, our aim is to understand Flexbox by building something that looks similar to Spotify.
‫Now remember, there are few things that you should keep in mind while building any type of clone.
‫The first thing is all this big website you can consider Spotify and maybe Uber, or maybe any other
‫big company.
‫They have their own phone.
‫So you are not going to access them.
‫What you can do is you can utilize any similar phone through Google phone.
‫So basically, I have used somewhat a similar phone.
‫The other thing is they have their own logo fabric on background images and maybe a few icons itself.
‫At this point of time, we are able to fetch similar icons, although we are able to fetch similar alone
‫for every corner as well as this logo.
‫But remember, you cannot utilize these official icons if you are building up alone as a beginner buyer
‫for your resume a project, I think you can.
‫So what I usually do is I create somewhat similar logos to different free apps.
‫You can access them directly through resource part, maybe on GitHub or directly through download section.
‫So these are custom created.
‫The next thing is I also change their tagline Spotify is related to music market eichinger to learning
‫instead of listening.
‫So we are not copying everything from Spotify, but understanding how Flexbox work.
‫Now remember why is Spotify?
‫Because Spotify utilizes Flexbox pretty well.
‫You will not just understand the Flexbox part, but also utilize how to nest them.
‫That means you can add flex and side effects inside Flex.
‫And we are going to do somewhat similar here at the bar and also you understand how layout works.
‫So Spotify is one of the best example to learn.
‫Flexbox also to understand basically how.
‫Let me just jump on to inspect for now.
‫And here, let me open this properly.
‫OK, let me close this whole body, and this is our current code, which part of why a landing page
‫and you will understand certain things.
‫They have their achievement, then head, then body simple.
‫Once they open this body, they have several scripts that we don't need to touch, but they have this
‫do.
‫That means their complete website is inside this.
‫Again, they have divided multiple devs.
‫Looks fine.
‫So this is their header.
‫That means everything that is related to this navigation bar is inside their header.
‫Now, if I open this header, they have certain links that can be related to logo or any other information,
‫then they have another date, which includes navigation bar.
‫So that means inside their head, they have their navigation bar as well as the local bar.
‫Oh, that's great.
‫Then we have another day, which is going to include their whole section.
‫Now this section can be converted into main, can be converted into multiple section.
‫That's according to them.
‫And then at the end, they have a div, which includes default apart.
‫So everything that is inside, therefore there is going to be inside head in the stack.
‫Now again, you will see a navigation way because they are stored, all these links inside navigation,
‫which is great.
‫And if I open this one, you will see multiple lives, what each part, how you can use section as well
‫if you are dividing content, according to section.
‫And that would be great nowadays.
‫So all the content are followed inside this whole day.
‫So that's how they have divided things.
‫They have utilized Dave to add certain functionality and also to add certain classes.
‫We don't need to copy all of them because Spotify is a big website and we are just trying to clone home
‫page, but they are pretty big.
‫We are not going to replicate any other part.
‫We are just trying to understand the home page.
‫Part adding is to learn Flexbox.
‫OK.
‫This is going great.
‫Now let me jump at the top.
‫And what we can do is we can jump on to multiple section and see this flex icon.
‫This Flex icon will help us to understand which part of their website is utilizing Flexbox and which
‫part is utilizing any other layout.
‫And this is important.
‫For example, let me take this on the bottom so we can see multiple section and look at this section.
‫So what I'm going to do is right click here, click on Inspect US, so we can jump onto the main part
‫here, which is this flex.
‫So just the footer and then the navigation.
‫This is Flex.
‫If I click here, you will see how they have designed their website.
‫So this is Flex party, that means the item.
‫Item B item, see Item B, which is the country name and then Item E also, you can just minimize this
‫and see this is inside this now.
‫This is item one, two, three, four and five.
‫That's how it's divided.
‫This is great.
‫Now you will see inside them.
‫Also, they're utilizing Flex, so that means this is one item, but they have converted into Flex.
‫That means all the child inside this flex will be affected.
‫So if I open this one, you will see this this call on one, two and three.
‫So that means this is flex.
‫If you click here, it will see these highlighted lines.
‫So this is one column, two column and three column.
‫One, two and three.
‫So that's how you are utilizing, or I should say, nesting the flags are flags nesting.
‫And you will see others are also nesting, so it might minimize this one and jump onto this part, which
‫is the last one.
‫Open this one.
‫And click on flags.
‫You will see how they have divided.
‫They are utilizing the U.N. tell her and then the others modify a name here.
‫Now, why it is important, because this help us to give control in the form of flex direction, we
‫can add flex direction here.
‫We can add flex direction head on and also gave us control to move things so we can move down the bottom
‫left, right everything, even the navigation body.
‫Right click click on Inspect and jump onto the top navigation bar.
‫You can see all the other items out of Flex, so that means one two three four five six.
‫So they have divided items into six part and the built in navigation bar with flex marks.
‫It's the best thing you can do.
‫You don't have to worry much.
‫You can just divide things into multiple parts.
‫Again, this whole header is itself a flex jumper.
‫You can see this is flex.
‫So one, then we have some gap, then flex item and then we have nested inside.
‫Now that means we are flex.
‫Then this is inside Flex.
‫I hope you got some idea what you can do is you can jump on to a Spotify army, we are alone currently.
‫We are trying to do something similar.
‫That's it.
‫Now one important thing I have decreased their screen size for my demo, as well as for the official
‫Spotify, so we can watch everything clearly.
‫The reason is I am on pretty big monitor and the ratio of my monitor will affect a lot of things on
‫the original website.
‫So what I did is I decreased the screen size.
‫It should look normal to you now.
‫This point is just a side disclaimer and has nothing to do with any type of change.
‫Maybe some student noticed this magnifying glass, so that's why I've mentioned this.
‫And yes, we have followed everything every day for our class background.
‫I try to create similar background and even the buttons, so I try to clone everything.
‫But our aim is to understand Flexbox so that sick with this demo lecture in the next one, what we are
‫going to do is we are going to jump on to our project file and start working with all the different
‫codes.
‫I hope this demo was helpful, and in the next lecture, let us start our journey.
‫Thank you for calling, and I see you guys in the next one.