‫Hey, there.
‫Welcome back.
‫Now let us start our journey with our current Spotify project.
‫First thing, I've included all these file indie resources.
‫There will be certain logos we have icon and then we have background.
‫And then also we have our IDs.
‫Remember, our website does respond to.
‫That means if we try to decrease the size here and there, it should work fine.
‫Now, if you scroll down, everything is going to work fine, and if I try to minimize more, you will
‫see it is going to work fine.
‫And we are going to delay certain settings with our own media queries.
‫That means everything is responsive.
‫So for that, we are utilizing our responsive, Garcia says, all type of media queries.
‫We are going to add it here.
‫The second thing is we are adding all our courts into stylus pieces and then we have all these content
‫that are related to images.
‫So our Typekit icon, our background, as well as our favicon and few other things.
‫So that will be inside media.
‫That's it.
‫That's the whole basic description.
‫Now let's jump back and start adding content.
‫Now, first thing is, I'm going to give us structure.
‫So basically inside our body, I'm going to create that first.
‫And this hurdle is going to contain an image that is this image, and then we are going to have our
‫navigation that should be fine.
‫So I'm going to create our div and inside this, I'm going to add an image that looks fine.
‫And then here I'm going to add a now.
‫And this now is going to have all these menus.
‫So what I'm going to do is I'm going to create an order list that is going to have all these menus.
‫And so we have five and tag inside that are on our list that is on our list.
‫And you can utilize the shortcut use.
‫And I, if I do that, it will add one and light.
‫But what I can do is I can utilize you were greater than someone and I multiply by five.
‫Then what are those going to do is it is going to add five allies.
‫This looks fine.
‫All I need to do is add these list item.
‫So let me get back here and let me quickly add these list item.
‫That's done now.
‫This completes our navigation for now.
‫The next thing we are going to do is you are going to create a mean dog.
‫And inside this, I'm going to add everything that means my multiple section.
‫So at this point of time, we are going to have only one section which is on all learning is everything.
‫This section?
‫Now that our chances that you might have another section which includes different music, maybe another
‫section which includes different podcasts or maybe training section or anything else.
‫But at this point of time, we only have one section, so we are going to utilize this section only
‫and this section is going to have this is each tag.
‫And then this is going to be our big dog and this is going to be our button looks and simple for now.
‫So this is going to be a joint dog and that is going to have.
‫Learning is everything.
‫Now, one thing you need to remember that they are breaking here, that means I need to add a break
‫Typekit.
‫So what I can do is I into loft space.
‫I can utilize that is my break tag.
‫So this is going to create clean and then I have a dog which is going to have this content.
‫So I simply added to save this one.
‫The next thing I'm going to have is a button you can utilize any other type of link and then decorate
‫it, or I should say, add border and everything, and it will look like what and you don't need to
‫utilize this button specifically.
‫You can utilize a dog or maybe a paragraph right there and then can change or not think so hard.
‫I just need to get.
‫Save this one that's done, so that's done for our second section.
‫Then we have our photo looks fine to me.
‫All I have to do is after this mean I can directly add water.
‫Now inside this photo, we need to do certain things why because we are going to have multiple section
‫or you can utilize divs here.
‫It's totally depend on you.
‫We can have a whole container for us.
‫And inside this container, we can have this Delphi logo.
‫Then we can have this there for links.
‫Then we can have this deal for social icons.
‫Maybe this dip can be divided into multiple parts.
‫And then this div of OK was this day that will be about our country.
‫Then the last day will be extras.
‫So let's do that.
‫What I'm going to do is add our div and call it container.
‫And inside this, I'm going to add my name.
‫You can regulate section head on actually, OK, fine, but I'm utilizing them for now.
‫So what we can do is we can utilize their fund over.
‫That's fine.
‫The second day will be related to links.
‫That's done in the third level relative to social.
‫And then we have.
‫This country information and then another line will be about us, quantify our other links, so I'm
‫going to life country and then we are going to have extras.
‫This looks fine.
‫No, we are going to divide things again because this section will be divided into multiple parts,
‫but that we will do later when we are on that specific lecture.
‫So here is our base ready.
‫Or I should say a basic structure is ready if I jump back to our main website, you can see that's done.
‫That's the current look of our website now.
‫So what I'm going to do is the first thing is I'm going to jump on to the CSIS part and I'm going to
‫add 13 properties with our HDMI little.
‫So here I'm going to jump on to a game of.
‫And the first thing I'm going to change is are foreign size, so I'm going to utilize one size and head,
‫I'm going to extend because.
‫The next thing I'm going to do is I'm going to change the color, the default color to white.
‫And the third thing is about our foreign family, you should jump onto, we will find and here we are
‫going to utilize Bob Bennett because that's the only point which is closest to Spotify.
‫So I just click on Poppins and hit.
‫Either you can import it directly, but that will import only one part of it.
‫What you have to do is select all type of style.
‫Once that is done, you can click on to this import option and how you will get the gold.
‫So what I'm going to do is I'm going to copy the import code itself.
‫Get back here and add this at the top of my CSIS.
‫So that is going to include everything related to this Poppins.
‫All I have to do is now change my font family, so had I'm going to release one family and now I need
‫to pass Poppins, or you can jump onto Google itself, that is Google font, and here you will have
‫option how to realize this so you can copy this one and add it had.
‫That's it, that's the base setting.
‫Now there are few other comments adding that I usually do.
‫The first thing is about a dog and I'm going to remove the tax declaration, though none because I don't
‫want the underlying thing.
‫Also, I'm going to legalize the dog and I'm going to remove the listing and I'm going to set it to
‫none because I don't want these bullet points.
‫So that's it.
‫That's the basic thing.
‫And this is not going to affect much, except the color.
‫So that debate setting and here are eggs which are not visible right now.
‫This is great.
‫The next thing we are going to do is walk on to this head up park.
‫So we have this hurdle.
‫We need to add a background color, add these images.
‫And also we are going to utilize Flexbox so that we can divide this whole content according to our justified
‫content.
‫So what I'm going to do is jump here and I'm going to select this header for us.
‫So just scroll down a bit.
‫And the first thing is, I'm going to utilize this header.
‫And I'm going to add a background color so you can directly analyze background color or background itself
‫because this is a short term property.
‫And then inside my background color, I'm going to go with black.
‫Once that is done, I'm also going to add some height for now, and for now, I'm going big, maybe
‫200 pixels just for visible pop was get back here.
‫OK, so this is our current halo.
‫Let me also add image here.
‫So this is our IMG.
‫I'm going to get inside my media and inside that I have laboratory and save this one.
‫Get back here.
‫OK, so this is the current view if I right click here.
‫So this is our day, which is about our logo and this is our navigation bar.
‫And since our head, that is pretty obvious, we are going to have the size.
‫The first thing I'm going to do is here, I'm going to add our size to my head.
‫So the most common sizes around a pixel on, you can take it rim and this is somewhat similar.
‫OK.
‫So this is going to be a trim or atypical whatever you want later on.
‫What we are going to do is we are going to change this height because of the responsiveness.
‫So what we are going to do is we are mobile with a laptop, with our tablet.
‫Every time we are going to change the size, we are going to add or I should say or what I this height.
‫Now ahead, I'm going to go with a dream, but for a visual purpose, I'm taking 2010 just for the visual
‫purpose so we can edit stuff, but our atrium is final.
‫Nick may get back here now, head.
‫The problem is, since both of these items are lying, I need to do something.
‫What I can do is I can create a container and add a size.
‫So that means what I mean by that is.
‫First thing is here, let me add a container.
‫And I can keep both of these items inside them.
‫That means inside my container.
‫So this is not a hater.
‫This is a container and a container includes both of them.
‫So that means I can see this container as display flex and both of them will be its item.
‫This is going to be great.
‫The other thing is, I'm going to add a class here so I can refer this class according to the local
‫art.
‫OK, this looks great.
‫Now, all I have to do is just play with the container.
‫So here I'm going to go with my header.
‫Not container.
‫Now, head, you can also utilize this, but I strongly recommend to have some type of format or structure
‫so you can understand, OK, our head, as it is, is working or whatever it is, it's working.
‫Otherwise you are going to have a container, maybe in your main section, maybe in your photo section
‫as well as in your hideout section.
‫So it's going to create a lot of confusion.
‫This is the naming format that I currently recommend.
‫Once that is done, the first thing I'm going to do is add our display, which is going to be a flex,
‫and by default, there are going to be out in robot.
‫So if I jump here now, you can see they are in row.
‫If I just come in to save this one, you can see now they are in column format.
‫Why?
‫Because they're following them as block.
‫So displays black smoke.
‫Nothing I'm going to do is justify a content again.
‫There are many things that we can do with just a high content, and these two are horizontal elements.
‫I need to add this and this at the end part.
‫So the best thing I can utilize is space between.
‫That means they will be both at the corner and rest of this space will be remain at the Green Park.
‫See it back here.
‫This looks fine, but here you can see we have some space here.
‫We have some space here, right?
‫That's because we can add a weight to our container.
‫That means this is the container and we can say, OK, this container should be, I guess, let's take
‫90 percent only according to the header.
‫And then I can see margin as that means on all of this.
‫There will be some space which will be equal to five percent on the right side and five percent on the
‫left side.
‫Because this is 19 pennies remaining in hand.
‫OK, now you can see we got some structure.
‫This looks fine to me now.
‫The other change we can do is we can convert this fuel into flex so that all these items can arrange
‫according to the direction of route.
‫So what I'm going to do is I'm going to select the hair drag in.
‫Select now and then the U.S. part.
‫And inside this, I'm going to add display property as Lex.
‫And by default, the direction is wrong, so there shouldn't be any problem if I get back here, you
‫can see now they are following the direction.
‫Now, since this is following the flags, we can arrange the navigation in the same boat itself.
‫Because if you remember, align yourself and by these different type of properties, we can arrange
‫these items in the center itself.
‫So I think you got some idea what we are trying to do.
‫Let's continue this part in the next lecture and understand how to arrange them are designed to change
‫their font color, change their font size and see what we can do to add space or maybe decrease the
‫size of this logo.
‫Thank you for calling.
‫And I see you guys in the next one.