‫Hey, there.
‫Welcome back, Siobhan Desired, and welcome to our project session in which we are going to build a
‫fresh new project when the concept that we have learned and now also by learning some new concepts.
‫So then now we have been discussing about forms we have been discussing about display position.
‫Then there are several theses properties now the right time for us to implement all of them.
‫Also, we'll be discussing about tons of new ones in terms of form transformation.
‫And then there will be icons, extension and a lot of that stuff.
‫So this project will not only help you to revise or, I should say, implement the old concept, but
‫also help you to understand new concepts that will help you to build your profile.
‫The first thing I want to discuss about how to get inspiration towards different project and also what
‫you are going to be.
‫So let me jump onto the correct example here we are going to build this profile card, and I hope this
‫looks good.
‫We have our profile image and then here we have some message regarding if a user is normal or pro,
‫then we have information about country name as well as my dick stack or development stack or something
‫else that you want and a button regarding message following.
‫Then we have certain icons regarding our social media and then we have our skillset.
‫So we haven't done this blank sheet into this and how I get these designed.
‫You can jump on to dribble.
‫It's a free, open source website that will help you to get inspiration with different design.
‫Scroll down to see what you want.
‫Use this search and you will get several ideas about different projects.
‫Maybe you are building 13 small projects like this, or maybe you want to build a full fledged website
‫in future.
‫After completing the course, you can jump on 213 ideas like this, so all you have to do is just see
‫what inspire you or what you can build as a big NARAL's uproar.
‫This is one quick website that I strongly suggest anyone who is currently working with HDMI, KSAZ,
‫Bootstrap or any other frontend web designing overdevelopment site.
‫So this help you to get certain ideas.
‫Now head while scrolling and I got this profile.
‫Got these small elements shout out to the creator with all these open source designs so they are available.
‫You can see here is a profile card sample background gradient, and it's a decent looking profile card.
‫Then we have certain other small elements like maybe this the subscribe later.
‫Or maybe you want to create log in or registration fee, so you will get certain items like this.
‫So all these small element help you do understand, OK, I can build this how I'm going to do this,
‫you can plan things.
‫So this gives you an idea about what type of design you can create now had.
‫This was the design that I got.
‫I created this part, then some of my own genius.
‫So like I added the social media icons and had instead of description, I used my what is the position
‫of that developer or maybe any other type of profile card?
‫So I just took an inspiration from this and just created it.
‫So there are several of their designs that you can utilize on River.
‫Just such and get certain ideas will be creating a few more projects, maybe log in page registration,
‫creating in future that will help you to understand more such thing.
‫I hope this give you an idea from where you can get certain design ideas, maybe for your small project
‫or big project as a big, not just for your practice, but was OK, let me close this one.
‫So now this is the idea that we are going to.
‫Also, you can access this whole design.
‫I got to my GitHub or you can utilize my code.
‫And so this is the exact same project I just uploaded on code then, so you can access it easily.
‫I hope you got the idea link between the resource part, and we will also understand how to create our
‫code then and just add all these content at the end of this whole project.
‫So for now, let me get back to this and we want to create something like this as a new project.
‫So I removed all the previous code.
‫What I did is just created a blank template, and there are only two things that are included currently,
‫which is our title submission of profile card.
‫That said, you can add certain other titles, and then I have included our general fabric on maybe
‫simple, just a normal icon of our profile.
‫Now here you can add certain avatars.
‫Add your own fabric on depends on your customization.
‫That said again, styled artists, I just created what a box and then does.
‫One size is 10 pixels, so we can utilize ram pretty easily.
‫And this whole project?
‫I hope you got the best idea how we are going to start the project.
‫That's the first step.
‫And then we are going to discuss not opting.
‫So let me get back, and this is our integration.
‫Now, first thing I need to add is quickly accelerating things.
‫The first thing is going to be on my background color.
‫And then I need to, ah, dive section and try to use maybe position to get it at the center.
‫And then I need to add this content to.
‫The first thing is how to use the exact background color.
‫So I have an extension.
‫It's a simple free chrome extension called color zila.
‫Now, just add this Chrome extension on your browser now, once you install this, you will have a icon
‫that will help you to select any type of colour.
‫So maybe I'm on Amazon right now and I want to know which color is this or this one?
‫I can just select this and which color I want.
‫Yes, hover over to this.
‫Click here and now have access to that information.
‫So in this way, I can select any type of color I want.
‫Maybe I wanted this exact background color.
‫Click here.
‫Select the background color that maybe I want to know which button color is this.
‫Click here and then select the button color.
‫It's a simple chrome extension free to use.
‫As a developer, you are going to utilize it a lot with HDMI access and even with for the frontend development.
‫So that's it, that's the whole general discussion required currently.
‫And let's move forward and start our project now.
‫Lot of talking to now.
‫So I'm going to just minimize this part and get into my thesis.
‫The first thing is I'm going to use my body.
‫And head, I'm going to utilize background color.
‫And again, I have already copied the background color so you can utilize it.
‫And there are certain other things that I will discuss, but let's build fuel tanks, otherwise you
‫will see, OK, this is too much of a discussion right now, but that's what this project is for.
‫We are going to discuss new things a lot generally about these Gibbo, these designs.
‫No one is going to discuss with you.
‫So that's why I'm focusing on Woodside.
‫Let me see this one.
‫Get back here.
‫OK, now we have our background at least, and then let us talk with other content.
‫So you have our background feedback head inside our body.
‫Let us start adding content.
‫So the first thing I'm going to do is I'm going to create a section so we can add everything inside
‫this section.
‫If I jump over so I can create a section and then divide this section into two part using this.
‫The first part will be about this whole container and the second part will be about this whole scale.
‫I can call this blog as personal information because it does contain all the personal information and
‫call this second one as a skill that will be much better.
‫So let me get back here.
‫And the first one will be personal.
‫OK?
‫And had the second one will whisk is.
‫There's no fine now inside personal.
‫We have two important thing.
‫This is our span.
‫I guess we can create us on our background and our next as grow.
‫And then we have our image.
‫OK, great thing.
‫So what I'm going to do is I'm going to call this a span and I'm going to call the task group and then
‫I'm going to add an image.
‫And I have already image inside my media.
‫So I'm going to utilize this a major offshore 1.2Gbps.
‫OK.
‫Nobody's nowadays you don't need to utilize my image.
‫So this is the image.
‫Currently I have added to other images and resource pack, which will be allowed outdoors.
‫So there will be a factor which will be regarding female authorship.
‫I saved this one.
‫Get back up this score and then there will be.
‫And my staff will be about men.
‫That's good.
‫So you can utilize these and start off my image.
‫That's it.
‫So this is the first change we created this big part.
‫Now, let me also add some content here, then we can add sizing and see what we are going to do.
‫Also, we need to format all this content, though I'm also going to add this fixed as skill inside
‫our skill section.
‫Save this one.
‫OK.
‫This is fine.
‫Now we have some small content.
‫The main thing that I want to do is use the section, change its position, get it at the center.
‫Also, I want to adjust according to Garp Left right, whatever I want.
‫Also, I want to have a word and some color behind the scene.
‫So that's my current aim is.
‫This is our current situation.
‫What I'm going to do is get back here, so the first thing I'm going to do is just control the missiles
‫size.
‫It's looking pretty back to me, so I'm going to use personal.
‫And so I guess I'm going to select my I image and just set our world.
‫Maybe as well then that should be fine.
‫It back had.
‫OK.
‫This is looking fine.
‫Also, I haven't zoomed anything, so we are going to build everything in our natural way.
‫So this looks fine.
‫Now, let us work with this content, so here we have this day and this day.
‫So the first thing I'm going to do is I'm going to select both of them and change their color and add
‫some personal setting.
‫That means if you see this, this is a complete block which is personal lock itself and I can set up
‫background colors.
‫We can see the difference.
‫What I'm going to do is here, I'm going to jump.
‫Well, the first move and I'm going to select the background color on, yeah, definitely I have already
‫selected.
‫Save this one.
‫Get back here.
‫OK, now that is different, if you are not able to visualize this audio, it's not visible.
‫Let me try to use this, save this one.
‫I hope you got the idea.
‫Similarly, I'm going to utilize this skatepark symbol.
‫I have to utilize docs go.
‫And just use the background color, and this time I'm going to utilize.
‫A big doctor saved this on get back here.
‫OK, now we have these two killers.
‫But the problem had is this is taking complete space.
‫So what I want is I want somebody to this section because this diverse block element and depend on experience.
‫So suppose the section is off maybe 30 Pixel 4a because it will restrict everything.
‫So inside my section, I can add maybe my weight, just jump onto my section part and head.
‫I'm going to add over 12, maybe 20, then.
‫OK.
‫This is pretty much small.
‫Get back here.
‫Mark, let me use Typekit crew here here, OK, this looks fine.
‫So that's what we are doing now.
‫Now we can use light going on and then change things later.
‫Yeah, so this is our current section now, my main task is to move this at the middle.
‫What I'm going to do is and tighten my section.
‫I can directly select position as absolute.
‫So this doesn't follow the natural flow and I can go top bottom because that section parent is body,
‫which covers almost the entire space.
‫And had I can give thought as maybe 50 percent from comments, 50 percent and also from right, at least
‫50 percent save this one.
‫This looks top 50, but the problem here we are facing is that after the 50 percent of talk, it starts
‫and also after the 50 percent off right, it starts.
‫But what I want is I want the middle part to be hit.
‫I hope you got the idea.
‫I wanted this middle part to was drag up and then this middle part to drag it out.
‫That's the whole issue.
‫What we can do is we can utilize transformed.
‫Now, head, we have a quick, important property, which is known as transform that help us to transform
‫our current section or whatever the element that we are working with.
‫So maybe I want to transform this whole element 50 percent on right, 50 percent on Y-axis or X-axis.
‫I can do that.
‫So all I have to do is inside this.
‫I can just use transmit.
‫So translate, help us to do that, there are several other properties we transform, transform, help
‫us to work with this section, maybe more on to stretch it.
‫Maybe we want to rotated everything we can do with this transform property here.
‫We want to translate it according to X and Y property of this element.
‫So if I use this translate and save 50 percent x axis and then 50 percent towards y axis, save this
‫one, you can see it moved 50 percent 50 percent.
‫The best thing I should do right now is jump on to see a similar trend.
‫So how if you jump transform?
‫We have this nun basically means nothing by default or none.
‫Then we have translated that means move the element on the horizontal axis, not move according to the
‫native position, whatever the position this element has.
‫It doesn't look anything else, don't worry about position, display or whatever the content you have
‫in mind.
‫It just move according to this element.
‫So if I say 50 percent said we'll move according to the size of this section.
‫So here you can see we have this and then we have to.
‫Why that means if I say translate white 50 percent, that means it is going to go down 50 percent,
‫according to these size.
‫If I say translate x 50 percent, that means it will move according to horizontal direction 50 percent.
‫So that's how it is going to go up.
‫Then we have this translate that combines both the value of X and Y Z.
‫If you say translate, the first value is about x axis and the second value is about the y axis and
‫had, if you see that's how it is going to move and then we have a scale that will help us increase
‫the size, then we have to rotate, then we have skew.
‫And we have several of that.
‫So we are going to utilize this translate now at this point of time.
‫You can see this is working well, but the horizontal is not working.
‫So that means instead of this positive, I need to give negative.
‫Because we are pointing why actions like this and if I give any positive value, it is going to go down,
‫negative value will take it up.
‫Save the Swan, get back here.
‫OK, now we are at the center of page.
‫Since this isn't the percentage level which depends on body know.
‫I hope you got the idea.
‫This looks fine now.
‫Ask us to add content, some gibberish content so you can first fill the whole section.
‫So we have this then as a leftist person, a softer image.
‫What I want is I won't name so I can this a one which show one shot on.
‫Then I can add about the country, I'm going to utilize up dark and cold, this has India and then I'm
‫going to utilize my stock again.
‫I'm going to use up, be and call this house for the stock developer.
‫Once that is done, I want to button so the First Order button will be about message.
‫And the second button will be about following simple madness, I'm going to utilize buttons and this
‫is going to be as.
‫Message.
‫The second one will be called as following.
‫Basically, here we are trying to clone our design.
‫This will be a small part of a big project and maybe in future some of that.
‫Suppose you are working on a big project and you want to design a small garden.
‫That's what this project is about.
‫I hope you got the idea.
‫So that's where our button is done and then we have certain social icons.
‫So this part I will discuss later.
‫It has its own concept, actually, so we'll be discussing about this later.
‫And then third scale we have despite ongoing war and all other thing.
‫So what I'm going to do is I'm going to utilize unordered list and inside this, I'm going to add a
‫light dog for.
‫Quiet on.
‫Next, LT will be about Django.
‫Unlike Dog will be about API development.
‫Let me fast-forward this, otherwise you will watch me singing all the names individually.
‫This looks fine.
‫We are pretty close to our final.
‫OK, just kidding.
‫So now we have this content.
‫OK, the first problem I see is the start.
‫So I want to remove them, get inside my skull and remove all of them.
‫So all I do is select my dog and remove them.
‫So these are general settings, I'm going to do that at the top, it's also an inside my dog.
‫I'm going to remove less dial tone on this one.
‫OK.
‫This is done.
‫So that's all thank you for following, we are done with our project.
‫OK, just kidding.
‫So let's continue and there's a next lecture.
‫Otherwise I'm going to drag this a lot.
‫So thank you for calling.
‫I hope you got the best idea.
‫The main aim was to discuss about travel, as well as to understand about this transform.
‫Read about this You will get more idea.
‫So these are the two content that I really want to discuss.
‫Also implement all the concept that we have utilized.
‫And now, like we just implemented position absolute.
‫I hope you got the idea out there.
‫We are going to utilize it.
‫So that's it.
‫In the next lecture, let us continue all the on to thank you for calling.
‫And I see you guys in the next one.