‫Hey, there.
‫Welcome back.
‫Now let us start our journey building this portfolio project.
‫Remember, we are going to utilize component.
‫We are going to utilize all type of utility as well as our own custom courses.
‫Now here.
‫Our aim is going to be to utilize maximum off bootstrap.
‫We have tons of things with bootstrap and utilize them.
‫And if we require, we can use our customer service, but the focus is going to be towards the bootstrap.
‫OK.
‫Let me jump on to our project folder.
‫Everything is normal.
‫I have.
‫I do not.
‫I do.
‫I have imported the bootstrap file in form of our CSS as well as JavaScript, and then I have linked
‫my custom stylus.
‫Yes, that's it.
‫Now, the first thing I'm going through is and window delays, custom font.
‫You can use any font you can use the default on, but I want this font.
‫I like this one on it.
‫Look good with this portfolio project, you can use any font, to be honest.
‫That's it.
‫That's the first change.
‫The next thing is, let's start our project.
‫So we are going to mail things in section.
‫The first thing is about on navigation bar.
‫What I'm going to do is simply going to create my header inside the body.
‫So I just need to utilize header and inside that, we need our navigation bar.
‫Now we can do everything with the help of bootstrap.
‫Just jump on components, since it's a navigation bar.
‫Everything should be done.
‫So if I jump here much about this now bar.
‫Now, if you scroll down.
‫You are going to see multiple example if you look at this.
‫A simple navigation bar where we have background as light and virus light.
‫Now this is going to control the text color safe navigation bar light.
‫That means our text color should be dark and when we have this background light.
‫So this is one example.
‫If I scroll down, you will see different other examples.
‫You will see examples with logo.
‫You will see examples with something like disabling.
‫These are working, but this is disabled.
‫And if you scroll down, I bet you will see other examples examples in the form of a different theme
‫color.
‫So if you see this one less example.
‫How you will see Nevada.
‫That means the background is stark, but we need font color to be light.
‫And we have background, OK, so you have your own custom choices.
‫Let me scroll up since now I have knowledge, strong knowledge about cities.
‫I can play with any type of content.
‫So let's choose one.
‫Let's try to take this one.
‫Maybe if we want.
‫So here, let me copy this one.
‫And let me add it inside my head and save this one.
‫So if I jump back to my website, you can see now I have a proper navigation by now head.
‫If you observe, we need some spacing.
‫So if you remember the concept of container that we discussed, you can utilize that.
‫So if I jump back here, the first thing you can do is just start reading if you can do any changes
‫yet.
‫So we are going to deal with this now.
‫But ahead, we have a device with containerized fluid.
‫Now fluid means 100 percent if I remove this fluid and jump on the container itself.
‫This glass scrolled back, you can see now we have a proper gap.
‫And if I click on Inspect.
‫It's responsive and it does, swallowing the property of container grade.
‫This looks good, and we can do multiple other sightings since I want my menus to be on the right side.
‫So this is the dough that is going to deal with our whole of navigation thing if I right click here
‫and click on Inspect.
‫And this is the day that we are going to work with inside this day.
‫This is my container, which is flex itself.
‫So what I can do is I can utilize flex properties.
‫This is the build that we are going to work with, and currently this date is towards flex start.
‫That means we know Justify Content, Flex stock, you know these properties.
‫So what I can do is I can just call me here and utilize directly just to buy content.
‫And so all I could do is utilize.
‫Justify.
‫Condemned and saved this one.
‫Get back here now you can see we have moved our elements.
‫If you remember, you can directly jump on the world's search about legs.
‫And how you will have options that OK, that there is not flex, then we can utilize the Flex to convert
‫it if it's already there, which is following Flex properties, we can add different classes according
‫to Flex Law Direction, Flex column direction, reverse direction.
‫Then we can also add other properties, maybe about justified content.
‫So this is going to be justified.
‫Content start, then we have and then we have center and few others.
‫So I hope you got the idea how we did this.
‫Now, that's a condition that I need to do is just quickly update these menu.
‫So what I'm going to do is I'm going to add a home, then I'm going to add projects and then I'm going
‫to add blog.
‫The next thing is, remember this point, this is a class four octave.
‫So if you are going to create a project page, then I need to add active on that page.
‫What this actor do is it just change the color.
‫This is dark and this is light.
‫If you see, if I hover over this, this is dark.
‫But otherwise a normal cave home is dark.
‫Get rockier, and I simply need to attach this to my next page.
‫This is going to be attached to our project page, which we currently don't have.
‫But let me just add it.
‫And I'm going to attach this page to my current blog.
‫You can attach it to your own link.
‫So I just need to attach it with my current blog.
‫And simply, I'm going to add a target because I need to open this one on a new page so I can just utilize
‫target and then underscore blank, save this one.
‫This looks fine and I'm going to remove this item, which is, ah, disable button if you remember this
‫one.
‫Yes, remove this.
‫Save this one.
‫And I also I'm going to create a new file, and I'm going to call this as project start estimate.
‫OK.
‫Everything looks fine at a base level.
‫Great work.
‫Now we need to change the color that is the default gene that we currently had in our mind.
‫So that means I want something with white teeth.
‫Also, I need to change this text.
‫So if I scroll up here, you can utilize any type of design that you have in your mind.
‫But I'm going to go with simple Shobana and have a space between, right?
‫Save this one.
‫OK, looks great.
‫Now, the next thing remember ahead of this is not working, what I mean by this is if these animals
‫are not working, you can utilize the character.
‫I have this question about this, but you can utilize these characters if this is not working.
‫Remember this point?
‫And also, let me add a link to my next page.
‫Something like this, so this is going to be less than symbol and this is going to be greater than symbol.
‫OK, thanks looks fine.
‫And how are you going to solve it now here?
‫I'm not going to remove this background color for now, so we can define these two sections separately.
‫I should say we can differentiate them.
‫And if you want to change right now, you can just remove this view like, OK, this is done for our.
‫That's done.
‫I had our task is done.
‫We need to move towards automated action now.
‫Maine is going to have different sections like this section, which is our introduction than we have
‫allowed me blog and a few others.
‫So what I'm going to do is I'm going to quickly create a section and I'm going to include all that information.
‫So I'm going to create a section and I'm going to give it a class as introduction.
‫OK, so everything that we are going to do right now, but this thing is going to be inside our introduction
‫section and why this introduction so we can provide a hide, we can provide anything else that we required.
‫I'm to create a glass here.
‫I'm going to play with several of things.
‫So I'm going to create our Deb here and provide a class that will control its height and its will not.
‫The first thing I'm going to do is I'm going to take utility and utilize V800.
‫That means it is going to cover viewport height 100 percent.
‫And then I'm also going to convert this into Flex.
‫So all item that I'm going to add inside this whole dip will follow this Flexbox property.
‫And then we can utilize all the custom things regarding our justifier content, allowing content on
‫that.
‫So below.
‫This is the best thing that we are going through now.
‫What we need to add is we need to add an image and paragraph, paragraph, paragraph and button on it.
‫So the first thing I'm going to do is I'm directly going to add an image.
‫I can say IMG and head.
‫I'm going to add my own image, which is unsigned media.
‫Inside this program, you can utilize this image, which is profile, not VIDEO.
‫OK, so I'm will be utilized that show by my image and see if this one OK and I'm going to look at it.
‫That's going to be big.
‫Great.
‫So we need certain glasses here to control things, so I am going to add a class.
‫That can control things.
‫The first one will be rounded circle.
‫So if you jump on the boat strap and search about order, you will get understanding about border,
‫radius and head.
‫I'm going to utilize this rounded circle.
‫This is going to be 50 percent off on radius.
‫Then I need a large shadow mate of my shadow.
‫So what I can do is I can search about shadow here.
‫And, Heather, if you look at this, you will get a different idea how to utilize these shadow.
‫So let's take this large shadow.
‫So I like to do is just copy shadow energy.
‫Now you might need to cite several things as a beginner, because after maybe working on this project,
‫you will understand, OK, what I need to surge and how I need to utilize them.
‫Because large shadow will be energy than normal.
‫Shadow will be shadow.
‫Just small shadow will be shadow SME and no shadow means shadow.
‫That's none.
‫So I hope you got the idea.
‫So let's check our current image OK?
‫Now here, you can add seizes property that would be much easier to control the size of the image,
‫so I just need to go away and production, select IMG and then out of it and hide.
‫So I'm going to go with work, which is going to be one, two and five pixel and then I'm going to go
‫with Hyde, which is going to be 175 fixer.
‫Save this one.
‫Get back here.
‫OK, this is great.
‫Now, since we are utilizing Flex, what I can do is I can jump here and inside there.
‫I can just mention that this is going to be justified content center so everything will follow us and
‫allow Champion great basic success.
‫But we are following now.
‫This image is done.
‫The next thing is I'm going to add a paragraph, so I just need to add multiple paragraphs, maybe B
‫and three.
‫Okay, great.
‫And I just need to add some text.
‫Maybe I'm sure one shard of you can follow anything else, but this is the base text that I have currently
‫in my my.
‫Now, the second line is going to follow building web applications.
‫And then I'm going to have information regarding this Python Django whole thing.
‫So what I do, what knowledge currently I have until other important things save this one.
‫So I jump in.
‫OK, I'm following the Paul uproar, one item to item three, Kodachrome.
‫What I can do is I can change this one simply here I need to jump.
‫And just mention that I'm going to follow flex columns.
‫So I just need to use Flex.
‫Gonna sell this one then back here?
‫OK, this is great.
‫So I'm going to follow Flex column and I'm going to follow just if I want anything right now.
‫Now, one thing I need to mention is when we are following this Flex column, the meaning of justified
‫content changes, why now, I mean active as well as across axis changes?
‫Remember the Flexbox lecture?
‫So I need to go with a line item, so I just need to line items to save this one.
‫Get back ahead.
‫OK, great success.
‫That's it for this part.
‫We are going to have something that Lafond and a few other things.
‫But let me add up, but I'll jump here so much about Parton's.
‫And if you scroll down, I just need this dark one, you have multiple options, you have options that
‫currently have over effect.
‫You can see if you want, you can do that.
‫I'm just giving up this idea how to utilize them.
‫So what I'm going to do is I'm going to organize this quick button and I just need to add it to my paragraph.
‫So let me add it to save this one.
‫Let me also shift this one.
‫OK.
‫This is great.
‫And this section is pretty much done.
‫OK, we need to do something.
‫The first thing I'm going to do is I'm going to change the text and I'm going to connect with me.
‫And the other thing I'm going to do is I'm going to add certain classes.
‫So here I need to increase the font size so I can use it for.
‫Let's try something big.
‫And I also need to add some margin from the top if you observe this part.
‫I can use AMP, which is going to be marginal, but I can add something like three.
‫Great.
‫Then I'm going to go with this class, and I've been going with actress for I need to Boulder.
‫I guess I don't care if I need to this.
‫So what I'm going to do is I'm going to add another class which is going to be have a couple of old.
‫And then I'm going to again, add a margin, something where margin bottom one and call it this class
‫and I'm going to go with some normal fund only, but I'm going to ahead and margin bottom to have distance
‫between both of them so I can use and be sure, save this one in back here.
‫It's pretty good, to be honest.
‫Great.
‫And now we can't just be down.
‫Yeah, and you can just remove this big light that has background light, save this one in backyard.
‫OK?
‫Looks great, to be honest.
‫Now we have a proper lookalike of our current demo.
‫Yeah, great.
‫Now we need to move towards the next part where we will also learn about grid and how to utilize our
‫column.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫Make sure you can replicate things.
‫And if you want to search anything you can touch and maybe you want to search bowl and you will get
‫different options regarding border border color.
‫You can also jump here with the utility park.
‫Search about different texting.
‫Jump here.
‫You will have options how to manage text and you want to hold it, transform it with their different
‫size and a few other things so it can actually be utilized.
‫Something like this, which is FWB font waypoint.
‫OK.
‫That's all for this lecture.
‫I hope this was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.