‫Hey, there.
‫Welcome back.
‫Now let us start our journey with the four top by.
‫Currently, we are walking inside our mine.
‫Now let's get out of army and stock with for that.
‫So let me just create a photo and inside this, we are going to create everything that we want.
‫Now first thing is, which is a clear example of Flexbox.
‫So what I'm going to do is I'm going to divide this one item and this whole item into a Flexbox simple
‫thing.
‫What I'm going to do is I'm going to create a div here, and let's call this ask.
‫I'm going to give it a Class B flex and everything we will do inside this will already Flexbox property.
‫The first thing we are going to do is just simply add up the dock and cause the name which is going
‫to be show.
‫I'm showing.
‫Now in this case.
‫This is the first part.
‫The second part is going to be another div, which is going to have both these item.
‫So what I'm going to do is I'm going to create another name.
‫Now this step will be treated as a child or this flexbox.
‫OK, sounds great.
‫And I hope you got the basic idea.
‫If I jump back here, this is the current structure now have one important thing.
‫We are out of our mean.
‫That means this container property will not be applied to our footer.
‫And this is great thing because we now need to add background going to talk about that.
‫So if I go with class background, maybe you like here.
‫I will have a background color that is applicable 100 percent it.
‫And then what I can do is I can create a container inside this, I can see container.
‫So this is going to follow the property off container that has all the content will follow the property
‫of container, but the photo by the main photo tag is not following that and which is great because
‫we need big light to be 100 percent off of it.
‫This looks great and we have our first text, but the next thing I need to add is I need to add some
‫type of padding so we can have some space up and down.
‫Let's say.
‫Don't let me go in for.
‫And the other thing is fighting boredom and I'm going to go over to.
‫Looks fine to me.
‫The next stock walk with the other, do so ahead, I'm going to go inside this and here I will have
‫all the content.
‫So the first content will be about my world dog, which is going to have three allies.
‫I will have my home.
‫Then I'm going to have my project sections and then I will have my loved.
‫This is going to be the first child of this death.
‫And then I'm going to have this part, which is going to be my socialite once.
‫And this is going to be the second time if I get back here, OK, this is a list now, so I need to
‫utilize a class here.
‫The first thing is I'm going to go with Flex because I need them in a row.
‫And the second thing is, I need the list on a style, so I'm going to go and list on stage.
‫Save this one.
‫Get back here, you can see how this is going to follow something similar, but remember I warned them
‫enough in the room.
‫I want them to be apart from each other.
‫So at this point of time, this whole day is a child.
‫So that means this is a childish Obama charade.
‫I hear this text is one joke and then this whole Dave is another child for my Flexbox.
‫What I can do is I can convert this whole debate into a Flexbox citizen and then I can provide another
‫property.
‫So let's say last year and said enough, let's save this one.
‫Get back here.
‫OK, so this is one Flexbox and this is another Flexbox day here.
‫Looks great.
‫Click on Inspect and scroll down.
‫And if you observe this, this is our next property, child one and then child two, great.
‫Now one thing I need to do is to this child, I can provide a property of flex grow if I jump here.
‫This is my mean there.
‫And if I say Flex grow.
‫That means all the remaining space will be provided to this child.
‫And again, back here.
‫If you observe this, you have this trial now, have all the space, all the remaining space.
‫Now I can provide justify it between.
‫That will help us to have all the free space in between them.
‫So these are the two child and I can see.
‫Justify content.
‫And if I save this one, get back here.
‫Look, now you can see they are miles apart.
‫This is great.
‫That's the first step.
‫Now let's do a quick change with our phone, so and I can see glass and I can provide a property all
‫foreign size, I guess.
‫And then phoned me as border.
‫Save this one.
‫Get back here.
‫OK, looks great.
‫This is great, but we need to center both of them.
‫What I can do is I can add property off line items.
‫I I don't think that saved this one in my here looks good and S.A. now the only thing remaining is spacing
‫between them and that we can do it with the help of padding.
‫So I just need to add this whole class thing, which is on their horizontal.
‫I cannot padding to save this one.
‫Get back here much better.
‫I can add some more space here.
‫But if you observe much better, yeah, this fix does different.
‫Don't try to compare them.
‫You can add more text as you want, but this part is OK.
‫Let me try to increase this.
‫Let me try to increase this part.
‫So what I can do is I can either convert this one the first one to three.
‫Get back here.
‫Okay.
‫I am currently utilizing both horizontal and vertical to what I can say is that it's going to be my
‫left side and I see three here, three or maybe four here.
‫Then on the left side, we are going to have four on the right side.
‫We are going to be inside then p e two.
‫So on the left side, we are going to have war on the right side, we are going to have to.
‫And here on both of the side, we are going to have to OK, looks great.
‫Need and clean.
‫And the other thing is, the next is different, as with the blogs.
‫Fine, fine, fine, fine.
‫You are doing well.
‫And here we have our spacing.
‫So that's all for this whole part.
‫Now we have a proper homepage on our own portfolio.
‫There are few things that we need to change.
‫The first thing is I need to add something here so I can go onto this contact part.
‫What I can do is I can attach it with the idea.
‫That means whenever someone is going to click on this button, which is going to be.
‫Contact with me, I need to IRA expert, but whenever someone is going to click on this button, we
‫can move them towards this idea, which is going to be contact.
‫I need to add here so I can say I need to contact.
‫And then I garnered a traveling show there with my tag, I can mention when I wonder why I want to go
‫over it.
‫Contact Heidi.
‫OK, looks good.
‫Let's take this one out there and see it back here.
‫Refresh our page.
‫Scroll up.
‫Click on Contact with me.
‫OK, it's working fine.
‫It looks good.
‫I hope you got the idea.
‫One other thing we need to do is we need to add links to them.
‫Yup.
‫And there's also.
‫These are working right.
‫We have attached to them.
‫We haven't attached to this, we haven't attached to this.
‫So it's a simple thing I can do is I can just add a traveling to all of them and make sure to keep track
‫of target.
‫What I mean by this ahead of me and it's grappling first.
‫Dig this a big secret here.
‫And then this is going to be on project page.
‫China looks quite something similar, I need you to read it back here.
‫And this time this is going to be on block page.
‫So I have my link here and remember to copy the target as well.
‫Looks good.
‫Save this one.
‫I know I scroll down a bit.
‫I need your energy links to them.
‫So this is going to be simple.
‫You want me to show each step individually.
‫OK?
‫What I'm going to do is I'm going to just attach a link here so I can.
‫And a link to them individually.
‫At some blinking thing, I'm just adding a link to them, so let me try to fast forward this.
‫Now, links are nice to this whole thing, which jazz.
‫Despite.
‫What I'm going to do is I'm going to copy paste this because this is exactly the same that we have currently
‫have enough water, so I'm going to copy paste to.
‫That is done.
‫The other thing remaining is this spot.
‫I simply need to attach links there.
‫Again, I'm going to do some fast forwarding here.
‫This is going to take a ton of time on this or I'm going to do is I'm going to and I just have to keep
‫my home inside.
‫OK, that's done, so we have attached links to all of them.
‫Now one thing you can see is ex decoration.
‫So if you have observed me, I directly are this on my style nauseous and I can maintain our next decoration
‫as non prop. I maintain this property, or I should say, just copy paste this on all of my projects.
‫And the other thing is, I'm going to change the color, which is going to be black.
‫So this is going to be black.
‫Again, I'm going to add a property for Howard, because again, these icons are, I should say, the
‫links have somehow our property.
‫You can see, I don't want that.
‫I don't want this.
‫What I can do is I cannot have our property here, but I should say how I it back and I can just hold
‫the color.
‫That is going to be black.
‫And if I save this one in back here.
‫Things are fine, and if you observe we are doing pretty well now, there is some pacing issue.
‫OK.
‫This is a show on emotion, but everything is working fine here.
‫I hope you got the idea.
‫One thing I need good news.
‫Maybe if I right click on Inspect, try to get on the sidebar.
‫And if I observe things are working fine, but this is not that center.
‫So remember big center, we can use it, scroll up.
‫And if you observe this is my text or I can just add it here and text center saved this one, get back
‫here.
‫OK, this is great.
‫Scrawled on no walking, fine scrawled on it, working fine.
‫And this is working fine.
‫Everything looks great, but I might try to squeeze this more.
‫OK, things are getting no, they are the reason we are utilizing Flexbox and Flexbox as a default property
‫of no doubt.
‫So what I can do is I can change the property with this David self.
‫That means this part, this park itself.
‫If I try to hover over this, right click click on Inspect.
‫With this past weekend, our property, and again, with this part, we cannot drop property, so all
‫you have to do is just jump on to the Duke.
‫This is going to be the for death, which is going to be flex drop.
‫And then this is going to be secondary, which is where we flex up.
‫And if I save this one, get back here now.
‫If I try to squeeze, you can see this is on the second line.
‫But things are looking fine now.
‫Now, one problem I see is this whole thing, this spacing thing that you observe here.
‫We have added this padding, which was working well when we were using maybe 900 pixel screen, but
‫now this looks bad.
‫What we can do is we can add spacing after our name.
‫That would be much better, actually.
‫So I can jump here and here I can remove spacing from X, which is home.
‫I can remove from hair.
‫And I can add it here, but this is going to be right side, which is end and then save or save this
‫one, get back here.
‫OK, looks fine.
‫Looks fine now.
‫Looks fine.
‫OK, great.
‫That's done.
‫Our website is responsive, all the links are connected.
‫And thanks to bootstrap, it was pretty quick.
‫I was this was a criteria, so we took some time.
‫We tried to experiment things.
‫But now you can say it's working fine.
‫And remember, we are using V800, which is going to be viewed sites if you scroll down.
‫So if you see this as pretty big, it's because we are using V800 now only V800 is defined.
‫But if you try to use V70, nothing is going to happen because we it certainly doesn't exist.
‫So it is going to take on the space that is available.
‫There is nothing like Rich Dan or we are 70.
‫We only have reached 100.
‫Now, if you want your own screen size, basically what you can do is you can create your own screen
‫size and your style or cast.
‫Now we haven't wrote much of our success here.
‫We just had one two three four.
‫These 14 years only looks good to me.
‫Everything is done.
‫Now what we are going to do is we are going to work on this project section on navigation bodies already
‫done after the part is already done.
‫We just need to create some cards.
‫And Aditya, that's it.
‫So looks good.
‫Let's catch up and the next one and give her a following.
‫I hope this was helpful.