Figma Course - Web Design Tutorial for Beginners

Figma is a vector graphics editor and prototyping  tool that is great for designing websites. And   this course joy will show you how to use it. Joy  is a prolific and excellent tutorial creator. Hey   guys, you're here. This is a big material  for complete beginners. And today, you and   me together, we're going to make a complete  responsive web design, both for the desktop   version, and another one for the mobile version.  So this is the homepage of our desktop version. So   do you see this nav items over here, home teachers  contact us signing according to this nav items,   we have four pages, okay, let me walk you  through all the pages and sections. Okay,   so this is the home page, I mean, the landing  page over here, and then if I scroll down, then   we're going to find this section over here. And  then this section over here are offered courses.   This is the Education website, okay. And then if  I scroll down, then you're going to find this over   here. And then lastly, we have this footer over  here. All right, let me zoom out a little bit.   And this is the teacher section over here, you  can see that. So this is the teacher section   over here, we're going to make some cards over  here along with some buttons. And we're going to   also work with svgs. This is the footer over here  for this page. And then we have this contact us   page over here, you can see that so we're going  to also work with icons, you see these icons over   here, we're going to work with them, and also  make some forms over here as well, you can check   out the sign up page over here as well. This  is the last page, you can download this entire   figma file through the link in the description  down below. So once you download the figma file,   you're going to find all of these pages over  here. So this carries the next design. I mean,   this one over here, and this one carries the  mobile design. Look at that we have the mobile   design over here. Okay, so this is our homepage,  let me walk you through this. Okay, so this is   the homepage over here. And these are the style  guides, I'm in the typographic guides that we're   going to follow, okay, what will be the font  size of the logo, font size of the large text,   font size of the button, text, etc. Every design  carries the style guide. Okay, let me show you.   The mobile carry the style guide laptop,  the cabinet design carries the style guide   as well. The laptop design also carries this  style going over here and the next version,   this one is at the very top, we're going  to find this style guide over here.   So once you download the finger file, you're going  to find all of these pages over here you see this,   the next step carries the design for the next  version. And the mobile page carries the design   for the mobile version. Okay, so I'm going  to click over here also, you're gonna find   design for the laptop and the tablet version as  well over here. So this is a web design for the   mobile version. Okay, let me actually zoom in  a little bit like that, look at that. This is   our homepage over here. And then this is the next  section, third section, fourth section, and this   is our footer over here. Okay, let me zoom in  a little bit. There we go. And then we have our   social media icons over here as well. And  then look at this teacher section over here.   And this is the rest of the design.  So today, you and me together,   we're going to design the Dexter version. Okay,  this one, and the mobile version will see this   laptop and tablet. This is your homework. After  this tutorial, you're going to practice over here,   okay, you're going to make this web design  for the tablet version. And also you're   going to make the web design for the left version  as well. Okay, so these two are your homeworks.   This entire video is divided according to these  chapters over here, there is one over here,   you're going to find the timestamps on the  description down below. So first of all,   we're going to look at all the tools figma  carries. So once we have covered all the tools   figma carries, then we're going to start making a  responsive web design for the next version first,   and then we're going to start making the web  design for the mobile version. By the way, this   entire video is made for beginners who doesn't  know anything about figma. So we're going to start   from scratch, I will not use any plugins,  libraries or design systems just plainly from   scratch, we're going to use all the tools that  FEMA provided and we're going to make the design   using the tools only. If this video gets at least  2000 likes then I'm going to make another video at   once level figma tutorial, where I'll be covering  how to make a web design using the design system   plugins, libraries, prototypes, and also how to  save time as well. So hit the like button and   also hit the subscribe button so the gear brother  can afford them. Ah, this is Luke 800. This one.   Also note that these are our breakpoints, okay,  for the extra version, it is 1400 40 pixels, okay.   And for the laptop version, it is 1024 pixels.  And for the tablet version, this is 768 pixels.   And for the mobile version, I have picked  the 414 pixels, which is the width of the   iPhone 11 Pro max alert In this video, we'll  start according to these chapters over here.   First of all, you're going to open any  web browser, okay, and you're gonna type   figma.com fig ma.com like that, hit enter.  You're gonna find this interface over here   and then you can log in or you can sign up  don't have an account. Okay, so I have an   account. And I'm going to log in over here,  like that. I'm going to use Google over here.   So once you have signed up, you're going to  find this interface over here. Okay, let me   explain this insured. Okay, so all of these are  your draft, the projects that you're working on.   Okay, let me actually scroll down a little bit so  that I can show you some of my projects over here.   Okay, like that. And this one  over here, do you see this,   this is used to create a new draft file, I mean,  a new project. And over here on this section over   here, you're gonna find some templates over here  in order to save your time. Okay, you can scroll   down and see all of this templates over here  as well. If you want to download figma for the   next version, you can do it as well, you're gonna  click this over here, on your profile icon, okay,   like that. And then you're gonna click this get  dekstop app, and then it's going to automatically   download figma for you. Alright, now I'm going  to show you this community tab over here, okay,   I'm gonna click this, or what you can do is  you can come over here, and you can click this   community over here, and it's gonna bring you  over here. So So this community tab contains   works of other people, so that you can download  and use for your own purposes. Okay, let me scroll   down a little bit. So you're gonna find this. So  these are the trending files over here, you're   gonna find various assets over here, various  design systems, okay, so look at this over here.   These are various icons that you can download and  use for all your projects. So like that we have   tons of resources published by other people for  completely free. Alright, so I'm gonna scroll down   so that you can look more, okay. And then at the  very top over here, these, these are the filters,   okay? If you want just plugins, if you want to  just look at plugins, you can click over here,   or perhaps you want to see some illustrations,  okay, you're going to click illustrations over   here. And then you're going to find various  illustrations, various digital assets,   okay, like that. For instance, let's say  that, look at this illustration over here,   if I click over here, if you want to use this for  your project, what you're going to do is you're   going to click this duplicate option, okay,  like this. And it's going to give you a copy   to your figma file. And you can navigate the  designs, I mean, navigate the assets through   this pages over here, okay? Like the components,  look at all of these components over here. So   you got this for completely free. Okay, let me  zoom in a little bit, so that I can show you   various design assets. And if I want to change  the background color, I can also do it by this,   look at that, from purple to white like  this. Now look at my designs over here, okay?   Look at this models over here that I can use for  my projects, okay? Like this. Okay, I can zoom in,   I can zoom in and zoom out and various assets  over here, like that, look at all of this assets.   Along with the people illustrations, I  also get this over here, look at this.   In order to go back to your profile from the  community tab, what you're going to do is you're   going to click over here, okay, and then you're  going to click on your profile like this. And   you're going to come back to your figma dashboard  over here. So this is our practice project, I have   included a link in the description down below,  you click that, and you're gonna come over here.   So once you come over here, you're  gonna click this duplicate option. Okay,   so if you click on this duplicate, then it's  going to duplicate your project on your profile   like this. First of all, let's inspect what we  have on our left panel over here, you see this   panel over here. So you see this layers over here,  this layers represents all of this layers that   we have over here. And this assets over here,  I'm going to discuss in details about this one,   when I am discussing about the components  part, this one over here, part number nine.   All right, now I'm gonna come back layers over  here. And this one represents all my pages. Okay,   so these are all my pages over here, if I click  this over here, it's going to hide my pages.   If you click it back, it's going to show me all  the pages that I have. If you want to create a new   page, then you can click this plus sign over here,  and you can name it whatever you want. Like I'm   going to name page one over here, like this, and  I'm going to hit enter. If you want to delete a   page, then you can just right click over here and  delete this like that. Or perhaps if you want to   rename it, then you can click this over here. So  I'm going to delete this, okay, I don't need it.   So all our designs are arranged into these pages  over here. First of all, you have the Start button   over here, I mean start page over here, you can  see this. So you can see this thumbnail over here,   the topics covered page over here, the breakpoints  over here. And if I come to this dekstop page,   you're going to find the web design for the next  version. Okay, if I click this laptop over here,   you're going to find the design for this laptop  version. Okay, similarly for the tablet as well.   This is the design for the tablet version. This  is the mobile version. This one is the responsive   test. I'm going to discuss about this part when  I'm discussing the constraints providing this one,   Part Number eight, I have included a small sample  on this page over here so that they can test how   products work in figma. So I'm going to discuss  paradise in Part number five. And this page,   the assets page carries all our assets, all  our illustrations and social media icons,   we're going to make our web design easy, all  of this assets over here and this section,   the credit section carries all the links from  where I have downloaded the illustrations. Okay,   so you can see this over here, if you double click  over here like this, then you can copy this link,   and you can go to that link and see the  original source of the illustrations. Alright,   then I'm back to the start page over here. And  now we're here I'm going to create a new frame,   okay, by the way, all our designs are arranged in  two frames, okay, if I hit F, or if I click this   over here, this frame button, don't worry, I'm  going to discuss in details, I would all the tools   on this top panel, and on this right panel over  here, okay, if I select this frame over here,   and if I drag it like this, like that, okay,  by the way, regarding the basic movements,   you can use your mouse scroll to go top to  bottom like this, okay, if you hit Shift   and throw your mouse wheel, you can go left to  right like this. Okay, if you hit Ctrl, and if   you use a mouse scroll, then you can go zoom in  and zoom out like this, look at that. Alright.   Alright, so I'm back over here on this  frame over here, all our design in all   our elements are arranged into frames,  okay, let's say that I have a circle, okay,   I'm going to hit a ball. And I'm going to draw  a circle over here like this, that, and now I'm   going to create a rectangle, okay, if I hit r on  my keyboard, then I can draw a rectangle over here   like this. Let's say that I want some text, okay,  if I hit t on my keyboard, and click over here,   then I can write text, okay, like this. Control  a, and you increase the font size over here to 50.   Not 50, let's say 200. Okay, like that, look at  that, we have some text over here as well. And so   look over here, this is our frame, okay. And this  frame carries all our elements over here, this,   this ellipse over here, you see this ellipse,  it gets highlighted in blue, you can see this   blue highlighted color, okay? If I highlight  the rectangle, look at this, I'm selecting the   rectangle, okay, if I select the text over here,  like this, look, it gets highlighted over here.   And do you see these two buttons over here, if  I click this, then it's going to hide me the   frame like this, look at that. Okay, now look at  this, I can move this frame anywhere I want. Okay,   if I do it like this, look at that. But if  we want to lock the position of this frame,   what you can do is you're gonna click this over  here, the frame, or you can just click on the name   over here, usually, you see this frame number 52,  I'm going to click this on the name, and then I'm   going to click this lock button over here, then  it's going to lock me the position it is, it's not   going to move from its position is going to stay  fixed over here, including all the assets that is   carried on the frame. Now look, I can't select  the text, I can't select this shapes over here   as well is going to get locked over here. In order  to unlock that, I'm going to click this over here   like this unlock. Now I can move it and I can  select all of these elements over here as well   like that. So I'm going to delete this frame over  here like this. Alright, now we're going to keep   our content inside our frame as it is, or we can  also arrange them into groups, we can group them   directly, or we can also use the Auto Layout  option. So if so if I select all of them over   here, and if I right click over here, and we're  going to get this option over here, auto layout,   add auto layout, I'm going to discuss in details  about this tool on part number seven over here.   So if I right click over here, then I'm going to  get this add Auto Layout option. Along with that   I have this option group selection, if I click on  that is going to behave is going to behave like   a group. Okay, if I remove my mouse and click  over here, outside this box, then look at this,   it gets it removes the blue outline. If I click  over, if I hover over here, look, all the elements   gets highlighted, which means that it acts like  a group. Okay. So if I want to ungroup this,   what I'm going to do is I'm going to click over  here and Ctrl Shift g Ctrl, Shift g like this. Now   look, it will behave individually like that, look  at that, this is behaving individually, there is   one is behaving individually, there is one as  well. Same thing goes for the oral Layout option.   Okay, now I'm going to fill all of them again and  I'm going to create a new group over here. Okay,   group selection. Now look, it behaves like a  group. Okay, let's say that you want to move   Okay, now let's say that you just want  to select the rectangle and nothing else.   So in this cases, what you have to do is you  can double click on the rectangle like this,   there is just like just the rectangle over  here, or what you can do is you can hit Ctrl   on your keyboard control and click one time over  here, then is to select only the rectangle. If   you want just only the text, you're going to  select Ctrl on your keyboard and just select   the text over here like this, or what you have  to do is you're gonna select this whole thing,   and then double click over here like this. Look  at that, it's going to select your text over here.   Now we're going to discuss in details I want all  the tools that is listed on the top bar over here,   this one over here, and all the tools that is  listed on the right side over here. So let's   get started. Alright, The very first thing  that I want to talk about is a movement,   how will you move back and forth in  your figma file, okay, so if you hit   shift, and then if you scroll your mouse wheel,  then you can go left and right like this,   look at that. Okay, so if you release  this shift and just use your mouse scroll,   then what you can do is you can just scroll top  to the bottom like this, look at that. Okay,   so in order to go top to bottom, you're going to  use a mouse scroll like this, okay? Like that.   And if you want to go to left to right, then what  you're going to do is you're going to hit shift,   and then you're going to scroll your mouse like  that, okay, that you're going left to right,   if you want to zoom in and zoom out, what you're  gonna do is you're gonna hit Ctrl, and then you're   gonna use your mouse scroll like this, look at  that, I'm zooming out. And then I'm zooming in   like that, look at that, okay, and you can  also use this hand tool over here, okay? If you   hover over here, or perhaps you can also use  h, t on your keyboard like this. And then you   can pinch your left mouse button, or you can  just click over here, and you can just move   back and forth like this, look at that. There we  go. Let's talk about this feature over here. So   if you click over here, you have two options, the  move option and the scale option. First of all,   let's look at the move option. Okay. So if  I click this move option, or shortcut V,   okay, you can see all the shortcuts over  here v for move and scale, it is key, okay,   so I'm going to select that move option over  here, V, okay, and then I'm gonna come over here,   and then I'm going to select this frame, in order  to like this frame, you're gonna select this name   over here. And then what you're going to do is  you're gonna move it like this, look at that,   you can move freely, independently, anywhere you  want. Okay, you can select any frame you wish,   for instance, let's say that I want to select this  frame over here, okay? And then I'm gonna move it   anywhere I want like this, because that I can  move it like that, not just frame, you can move   any element, okay, if you want to move this image,  then you can also move it like this, look at that,   I have selected this and I'm going to move  it like that. I can move it anywhere I want,   like that. Okay, Ctrl zet. In order to make  you understand the scale feature, I mean,   this one even better. First of all, we need  to look at the frame feature, this one and the   rectangle feature over here. So let's go. Alright,  now I'm going to come over here and let's discuss   about the frame feature. Okay, so I'm going to  come over here and then I'm going to select this,   or shortcut, I'm going to hit F, okay, f like  this, then you're going to get all of this options   over here. Okay, who do you know what these  are, these are your, these are the screen width   of various devices. Okay, so let's say that I want  to work with mobile. Okay, so I'm gonna click this   phone over here and look at this, I have an iPhone  11 Pro max. And then you see this one over here,   this measurement, this is the width and the  height of the screen. Okay, I can also work   with iPhone eight, iPhone as a Google Pixel  two, etc. We have a lot of options over here.   But if you don't want the phone, you can also  go for the tablet, there we go. And if we want   to work with the desktop, boom, there we go. And  you can also you can even also work with watch,   like Apple watch over here. And then we have  social media post dimensions over here as   well. But if we want to make something custom,  what you are going to do is you're going to hit   F like this, and then click over here like this  and you can drag this little icon over here   anywhere you want and you can just customize the  width and height according to your needs. Okay,   so now the next thing that I want to talk about is  this one over here Okay, so what is this this is   a frame Okay, it is going to show me that it is a  frame but if you want to change it if you want to   change the frame to a custom frame, let's say that  I want to work with iPhone 11 Pro Max, okay, I'm   going to select this Now look, it's gonna change  me the width and the height like that, look at   that, but if we want to work with it, say we have  Surface Pro for okay look at this predefined width   and height Okay, if I select this, then it's gonna  give me that width and height. If I select this   now look 1368 by 912 pixels, I mean 1368 is the  width 912 is the height like that, look at that.   And also you can just drag like this according  to your needs, okay, you can adjust the width   and height, okay? So look at this x and y,  these are the coordinates I mean, where is your   frame located in your figma file, this x and y  represents that if you drag it like this with that   your frame is moving to the left, I mean to the  right, okay, if you want to move it to the left   like this, then you can also do it like that.  There we go. If you want to move it vertically,   then you can do it with the y axis over here  like that. And if you don't want that feature,   then you can just drag your frame over here and I  will click your frame over here and drag anywhere   you want. Like this, look at that. Okay, let's say  that I want to place it over Here, okay beside my   offered courses, frame over here like that, okay  that I have kept it over here, and it's gonna   give me automatic calculations over here. I didn't  have to worry about that. Now let's look at this   feature over here, the width and the height. Okay?  You can guess it by the name. This is used to set   the width and height of your frame or perhaps your  rectangles as well, or any shapes you want. Okay?   So I'm going to select this. So I'm going to  select this like this and look at this features   over here. Okay, I'm going to select this, and I  can individually set the numbers, let's say that I   want 800 pixels, Okay, I'm gonna write 800 pixels  over here, there we go. It is 800 pixels over   here. You can also do mathematical calculations  over here as well. Let's say that I want to add   another 50 pixels, Okay, I'm gonna write 50 over  here. Now I'm gonna hit enter, look at that. 850   pixels, you can also do minus multiplications,  etc, according to your needs. Okay, I'm gonna,   let's say I want to minus nine pixels  from here it is 859 pixels. So minus nine,   enter, there we go. 858 50, which is a square.  Okay, I changed my mind, I'm going to set it to,   let's say, 350 over here, like this. Look at that.  Okay, so do you know what mode this is? This is   the portrait mode over here. And let's convert it  to landscape mode. Okay, I'm gonna click this over   here like this. And do you see this tool buttons  over here? This is the portrait mode. And this   is the landscape mode. Look at this. I look at my  first of all, look at my width and height, okay,   the width is 350. Height is 650 is gonna get  shifted between these two. Okay, let me show   you. Okay, I'm going to select this over here. Now  look. So after selecting this button over here,   now look very carefully. The value of this two  jumped, it was 650. Before, and now it's 350.   Okay, it was 315 hours. 650. Now look very  carefully, I'm going to convert it back to   portrayed Okay, like this, look at that, look at  that these two values are jumping at the same time   our frame is changing over here, look  at this. There we go. Like that. If you   want to change the angle of a frame, you can  just drag over here like this, look at this,   I can change the angle of my frame. Look at  this, it is rotating. Okay, um, let me actually   zoom in a little bit. Now look at this, it will  rotate like this. Okay, we have negative values,   we have positive values. So you can just manually  do it as well like this. I'm going to set to zero   like this. There we go. Boom. Now look at this  over here. This is the corner radius. Okay? Look   here very carefully. I'm going to zoom in, you see  this, this is pointy corners, okay? So if I select   this, and if I drag like this on the right side,  now look. We can set curves on our shapes and   frames, okay? So look at this. Look very  carefully. Look at this, you see this? Okay,   now, let me talk about this one. Okay, the clip  content what this is, okay, in order to make you   understand this clip content, first of all, I'm  going to set some text over here, okay? He or you   can just select this option over here, but don't  worry, I'm going to explain in details about this   tool and all of these properties. Okay, it is  coming. Wait a minute, okay. I'm going to click   over here and then click over here like this  look, and I'm gonna select some text or it's   very big. Okay, so I'm gonna, what I'm going to do  is I'm gonna select over here, okay. 180 pixels.   I'm going to set it to 60 over here like this.  Look at that. ADF Okay. Oh, sorry. fidf. Okay,   just some random text. Okay. I just placed some  random text over here like this. Look at that.   ABC. ABC. makes more sense. Okay, so now look what  happens. Okay, I'm gonna remove that clip content   from here. Okay. Look, nothing is set over here.  Okay, now look, what I what happens is when I   resize it like this, look at this. Okay? The text  is outside, the text is outside. And the frame   is getting resized like this, look at that.  Okay, you can clearly see the content. Even if we   resize our frame, you can see that you can clearly  see the content, even if we resize our frame,   even if the frame is smaller than the content. But  look very carefully. What happens if I enable the   clip content over here like this look like?  It gets kicked like a scissor. Okay. Now if   I resize it, now you can visibly see all  the parts of our content over here. Okay,   like that. Look at that. Now, let me explain  this feature over here. You see this feature?   Resize to Fit. Now look, what  happens if I click this? Okay,   there we go. It resizes I mean, it removes all  the gaps and add just to our content. There's   one over here. This is very useful when we're  making buttons. Let me give an example. Okay,   control Zed. Let's say that I'm going to make a  button Okay, V UTP. Or like this, and I'm gonna   make it a smaller, let's say 30 pixels, okay?  And now look, and look, instead of doing this one   like this manually like this, we have  to do a lot of work over here and then   center it over here. Like this, and then  it is called a button over here like that,   instead of doing this hard work, what  you can do is control Zed, Zed, Zed, Zed,   it means I'm in going, I mean, I'm going back,  okay, by doing control Zed, like this, look at   that. So what you can do is simply, you just click  on your frame, and then you click this over here.   Resize to Fit, there we go, boom, we made  ourselves a button. This is just a sample   on how to create a button. But after a couple of  minutes, I'm going to discuss in details how to   make a button using auto layout. I mean, there's  one over here with appropriate calculations.   So wait a couple of minutes. So once that's done,  I can adjust the corners over here like this,   look at that, there we go. Like that, I can adjust  the corners, and then I can rotate it over here   like this, look at that, okay, on to exact.  And regarding the corner radius, look at this,   I have this corner, I mean, I have set it to eight  pixels, which means that it's gonna say eight   pixel over here, eight pixels here, here, here.  Let's say that I didn't want the corner radius to   be on the right side, I just want it to be on the  left side, just one single side. So what can we   do in this scenario, I'm going to select this over  here, and I'm going to click this little icon over   here, okay? And then look at this, this is called  independent corners, it is set to eight pixels for   all the four corners. Okay, so let's say that I  didn't want the corner area on the right side,   I just wanted on the left side. So what I'm going  to do is I'm going to do it like this, okay,   this is the top, this is the top left. Okay, this  is a top right, I'm going to select this and I'm   going to set it to zero like this, look at that.  Now look, the corner effect is removed. Okay,   I'm going to select this again. And I'm going to  select top left, top right, bottom left, bottom   right, this one, okay, I'm gonna select this 00  actually, sorry, my bad, I chose the wrong corner   over here, what you learn from mistakes, right?  So I'm going to select this again, and I'm gonna   say to eight pixels over here and zero over here,  like this, and then enter. Look at that. I have   corners over here on the left side, not on the  right side. There we go. Now let's discuss about   this feature, get the slice feature. So what  this is used is, let me actually come to my,   let me actually delete this, okay? I'm going  to come on to this frame over here, okay,   let's say that I just want not the whole image, I  just want the head, okay, I just want to download   the head, I just want to work with the head. Okay,  so what I'm going to do is I'm going to click this   over here, slice, okay? And then I'm gonna draw a  rectangle over here on the head section, can you   see this properly? Okay, there we go. Now look, I  have a little slice over here, you can see this,   okay? Now what I'm going to do is I'm going to  select this slice over here, either from here,   or I can directly select it here, okay, and then I  can adjust the width and height as well like this,   look at that. Alright, and I can also move it  like this, look at that, there we go. And then   I'm going to click it over here. And then can  you see this Export button over here, I'm gonna   click this export, who is downloading this, okay,  I'm gonna click this plus sign over here. And you   can set the image quality as well, you can set it  to PNG, jpg, SVG, I'm gonna do it in SVG. Okay,   I'm gonna select this, and then I'm going to  export this one, look at this, I have downloaded   a little file over here. So what I'm going to  do is I'm going to drag it over here like this,   look at this, I just look at this over here, I  just downloaded I mean, I just sliced the head,   because I just only need to work with the height  head. Okay, now look, look at this. This is equal   to this one over here, this slice over here,  I hope you understood the slice properly.   Now, regarding this Export button, you  can download anything you want. Okay,   let me actually give you a demo. Okay, I'm going  to delete this home here. And at the same time,   I'm going to remove this slice from here  as well. And let's say that I want to   download this single frame over here, okay, just  single frame, or perhaps even just the drying,   we're here I'm in the illustration, I just want  to download the illustration and nothing else.   Or you can also download multiple files as well  like tricky by clicking this one and then shift,   then click like this, then click like this as  well. Now, let's say for keeping this simple,   I'm going to download this image, okay, I'm  going to click this over here, and then I'm   going to scroll down at the button over here.  And then look at this, I have the Export button,   I'm gonna click over here and then look at  this. You can change the size as well you can   download it two times three times or four times  the actual size, okay? And then we have the PNG,   SVG, jpg, PDF, etc formats, okay, you can download  anywhere you want, I mean, you can download,   you can download in any format you want and  then you're gonna hit this export frame button.   And yeah, this feature this preview option  is given just to let you know that what you   are downloading Okay, you can see this I  have just selected this frame, I mean, this   illustration over here, let's say that I  want to see like this text over here, okay,   I'm gonna select this text and I'm going to  select this export like this. And look at that.   It is giving it is giving me this preview that  I have just downloaded in there. text over here.   Now let's discuss the shape feature. Okay, so  I'm going to come over here, you see this shape,   it looks like a square, Okay, I'm gonna select  this like this, look at this, I have a lot of   options. I have rectangle, line, arrow, ellipse,  polygon, etc. Let's say that I want a polygon,   sorry, I want an ellipse, okay, I'm  going to click this, or I can select Oh,   so I'm going to select all like this and look at  this, I can make a circle over here. But look,   this circle looks distorted. And it's going to be  very hard for me to make a perfect circle. So in   this case, what I'm going to do is I'm going to  select, I mean, I'm going to hit shift. Now look,   it instantly became a perfect circle. And now  while holding Shift, I can just move my mouse   and look, it's gonna give me a perfect circle like  this. Look at that. Okay, this is a perfect circle   over here, I'm gonna delete this. And I have more  options like a rectangle, okay? And I'm gonna   select rectangle like this, look at that. Okay, I  can do it anywhere I want. I can move it anywhere   I want. And I can select the width and height  accordingly. Okay, look at this. I'm moving   this and I'm resizing this like this. And do you  see this little dot over here, this dot this dot,   dot dot over here, it is used to set the radius,  look at this corner radius, you can do it over   here, or you can, you can do it over here directly  like this. Or what you can do is you can select   this options over here, okay, like this, as I told  you a little bit earlier, okay, you can do it like   this as well. And yeah, do you remember the scale  button? I'm do remember this Scale tool over here.   This one, as I told you that I'm going to discuss  in details after discussing this frame and this   rectangle. Now I'm going to discuss this. Okay, so  what were the scale button is used, let's say that   you want to scale I mean, you want something,  let's say that you want to make something bigger.   Okay? So in the case of this circle, do you  remember this circle this distorted circle, okay,   with this, you cannot make it a perfect circle.  Let's say that I have selected a shift. Okay,   shift. Now look, it looks like a perfect circle.  Okay, I have released the chip, then let's say   that you want to make it a little bigger. Okay,  what you normally do is, you're going to select   this like this, look at this, okay, when you  try to make it bigger, it is going to get   distorted again. So in this case, what you can do  is you can just simply select the shift, and it's   going to resize accordingly. Or what you can do  is you can select this scale function over here,   you can select this over here directly or you can  just select the K option on your keyboard, okay,   okay. And look at this, I have a different icon on  my mouse, okay, I'm going to select V, which means   move, okay, look at this icon on my mouse. Okay,  I'm gonna zoom in a little bit over this. This is   V, this is for the move, this is the default. And  if I want to resize this K, look at this scale,   and this is move. Okay, I'm gonna give K over  here like this. Now I'm gonna resize Look,   it's gonna resize proportionately, and  proportional measurements, okay, now look at this,   okay? 788 by 788. Okay, I'm gonna resize it  again. Now look at that, it's gonna give me   accurate proportion measurements. So I'm gonna  remove this circle from here and I'm going to draw   a perfect square, okay, shift, and then, oh,  sorry, I'm gonna hit R, which means rectangle,   or you can just select it from here as well,  and shift and then drag like this. Look at this.   This is a perfect square. Okay, now let's talk  about this feature this field feature Okay,   this is used to color your rectangle, I mean,  color your shapes like this. To do that,   you can color it anything you wish. You can also  put input the hex value, you can also change   the opacity over here, you can also use this  predefined colors. Let's say that I want to use   sky blue over here because that enable also uses  dropper tool. Okay, if you select this dropper   tool, then you can select anything you wish. Let's  say that I want my box I'm in my square to be   the color of this. Okay, so I have this eyedropper  on my hand. And when I select this over here,   like this, now look at my square over here, look,  this is the same color as this one over here.   Now let's look at more features that we have no  right panel over here. Okay, this features Okay,   I'm going to select it over here and I'm  going to change it to the default color. Okay,   wait a minute, e4, e4 info like this. Oh, sorry.  There we go. It is c four c four, c four. Alright,   so the first thing that I want to discuss is the  stroke. So what this does is it gives a stroke   around our box. Okay, let me show you Okay, okay,  I'm gonna select this like this. We're gonna,   it's gonna generate me a little stroke over  here. Okay, can you see this black colored   outline over here? I'm gonna increase its width  okay like this look 345678 910 so the stroke is   10 pixels. Okay, can you see this black color tick  stroke over here. You can also change the various   properties like the color the size, then should it  be inside the box. Should it be on the center or   should it be outside the box like that, look at  that, you can also hide the shadow, I mean, you   can also hide the stroke like this. If you select  this eye button over here like that, look at that.   You can also click it over here again, and it's  going to show me the stroke over here. And if   you want to remove this stroke permanently,  you can also use the minus button over here   like this, look at that, it went away. Okay,  now we're gonna look at this FX feature. Okay,   for that, I'm gonna just resize this a little  bit like that. Okay, now, if I select this   effect button, look at this, I have this panel  over here, okay, I have a lot of options. Like   if I want to make a drop shadow, or if I want  some layer blur, or perhaps background blur,   we have Inner Shadow as well. For now I'm  going to show you the drop shadow. Okay,   I'm going to select this over here. And yes, you  can experiment on your own. And look at this,   I have a little bit of shadow, you see this  shadow at the back of this rectangle? Let me   actually remove that child. Okay, look at this.  You see that? Do you see the shadow over there?   Okay, I am hiding the shadow. Now let me bring  that shadow back. Look at this. So this so   this drop shadow is used to make shadows, draw  shapes, frames, buttons, cards, etc. Alright,   so now look at this over here. This is called  the effect setting. Okay, so I'm going to click   over here and then I can adjust the shadow.  Okay, so this is the x, which means that my   shadow will move left and right like  this, look at that. Okay, look at this,   look, my shadow is moving left and right, if I  want to, if I want to move the shadow, top to   the bottom, like this, I'm going to use this wide  button over here. Okay, like that. Look at that.   And then if I want the shadow to spread, I'm  going to use the spread over here like that, look,   look, the shadow is getting bigger, okay, and  smaller as well. And you can also change the   color over here, opacity over here as well.  And if you want to change the blur, you can   do it like this. There we go. We're increasing the  blur. So we're going to include this drop shadow   when we are making buttons. Okay, let me actually  give you a demo. Look at this, our buttons have a   little bit of drop shadow over here, as well as  this cards, look at these cards. Okay, this has   drop shadow. So when we're making this layout, I  mean, when we're doing this design, we're going   to utilize this drop shadow. Whatever I have  discussed so far, this is the design section,   okay, on the right panel. So this is a prototype  over here. After a couple of minutes, I'm going   to discuss about this for a live Okay, so don't  worry, and look at this inspect over here. Okay,   so if I go to inspect, then is gonna generate  me CSS code. Let's say that I want the code of   this one. Okay, this section over here, then I'm  going to select this over here and look at this.   It is generating the CSS over here like this, look  at that. If you're a developer, you can save time.   Look at this display, flex flex direction, column  justify content center, align items, flicks start,   so on and so forth, along with all of this  look, pixel measurements over here along with   the padding with height, etc. So this inspect tool  is very handy. Alright, now I'm going to discuss   in details about all of these tools over here.  These are the alignment tools. Okay? So in order   to discuss about that, I'm going to come over  here and I'm going to draw a frame, okay, F and   then I'm going to drag it like this, look at that.  Okay, so now I'm gonna write some text, okay, D,   and then click over here, and then some text over  here, okay, like that. Okay, let me actually write   ABCD. Okay, ABCD like that on through a capital  letter A, A, A, B, C, D, there we go. Let's say   that I want this text to be at the very center.  So what will we do? Okay, so if we come over here,   look at this Align Horizontal center, if I click  over here, like this, now look, our text is at the   very center, horizontally, okay? If I wanted  to be at the very center vertically, I mean,   if I wanted to be at the very center over here,  so what I'm gonna do, what am I gonna click, I'm   gonna click over here, look at this. This is the  Align Vertical Centers like this, look at that,   it is at the very center, both horizontally and  vertically. Let's say that I want to move it to   the very left at the very left, okay, what I'm  going to do is I'm going to click this over here,   like this. This is alignment left. If you want  alignment, right, you can also do it like this,   this option over here like this. So you can  experiment with all of these values over here.   And regarding this, I'm going to delete  this over here like this real quick. And   regarding this panel over here, I'm in this  tool over here. And regarding this text,   this is the file name, okay, if you  double click over here, then you can   rename it Okay, so I'm going to keep it figma  file over here, I'm in figma tutorial over here   like that as it is and if you click over here  like this, you can download this figma file,   you can also duplicate it, you can rename it  any goal to delete this as well. So these are   the options that you have. You can also share it  with their friends that what you created so far,   like you created this frames over here if you  want to share it with their friends or perhaps   if you want to share it with your clients, then  you can click the Share option over here and then   you're going to find appropriate details. Okay,  so I'm gonna remove this night right now and Okay,   now regarding this button over here, this is  called a present button. So if you click on here,   then you can see your designs life at the  same time. If you're working with prototype,   then you can also view your I mean, you can also  test the interactivity of your prototypes live.   Don't worry, I'm going to discuss this product  after a couple of minutes. Okay? So let's say that   I'm going to click on here, okay, after selecting  this design over here, okay, I'm gonna click this,   I can feel this over here. Now look at this, this  is the desktop type program. Okay? And if I come   over here, if I click this arrow over here, then  it is going to go next like this. Wait a minute,   these are the sections. Look at this. This is my  design over here. Okay, I can view it over here.   No, no, this is very large. Okay, I want to  make it small. So what I'm going to do is I'm   going to come to this options, and then I'm gonna,  I'm gonna select this fit, scaled down to fit,   okay, like this. There we go. Now, now it looks  much better. Okay, so I'm gonna come over here,   and I'm gonna go next. Or perhaps you can also  use an arrow right like this, look at that,   he's gonna move to the next frame like this.  So by this way, you can preview your designs,   what you create so far, okay, you can view  it like this. Look at that. There we go.   Now we're going to discuss that what the text tool  in details. So this tool over here, the text tool   is used to add text to all Web Designs. So if you  notice carefully that every design the desktop,   tablet, laptop, mobile contains this chart over  here, okay, this is the typography guide chart   shows that what should be the font size of  the logo, the font size of the nav items,   font size of the large text, font size of  the small text, the text of the button, etc,   along with the line height over here. So you can  see that the line height of large should be 90 and   line height of small should be 43. Over here. Same  goes for the mobile design as well look at this   over here, I have included the mobile typographic  over here, the logo, this logo is 48 pixels,   then large text 32 button is 24 pixels, so  on and so forth. It also this chart is also   mentioned for the laptop as well. So look at  this over here, this is the laptop design over   here. And this one is the typography for the  laptop design. Okay, so the logo is 60 pixels,   the button should be 30 pixels, so on and so  forth. So I'm going to come over here, and   over here, I'm going to create either a rectangle  or a frame, so you can so we can hit our like   this, and it's going to create me a rectangle,  what I'm going to use a frame over here, okay,   control that. So if if you hit F like this, it's  going to create a frame like this, look at that.   Okay, I'm going to make the frame a little  smaller, let's say 1000 by 500. Okay, that will do   for this tutorial like this, look at that.  Alright, then in order to use the text tool,   you directly click over here like this, and it's  going to highlight blue over here and you're   going to get a plus sign on your mouse, can you  see my mouse over here it is in plus sign, okay.   And if you want to do it in a shortcut way, you  just hit t on your keyboard like this T and it is   going to highlight that text over here on your  mouse. And if you click anywhere, then you can   get this sign over here you see this then  you can add text like this, look at that   it is said 210 pixels, but by default, your text  should be 12 pixels like this, which means that   Wait a minute, it should be on curved pixels  like this, which means that it's going to be   very small. So what you're going to do, you're  going to click over here okay. And you see this   option over here this is used to set the font size  so what is the font size of all dekstop let's say   it is for the logo is 90 pixels, okay? So  let's say to nine pixels, like this look,   it is set to 12 I'm gonna set 90 over here like  this, okay, pay that enter and then is the output   mean this result Okay, so this is used to set the  font size. And this one you see this this is used   to set the font family, it is kinda set to Roboto  and if I click over here and I can change the font   family as well like this, it should be let's say  we're going to say to Poppins like this p o p p i   ns Poppins, okay, now look, the font family  changes. Similarly, I can also write sans serif   over here, sans. Let's go for sensation. Okay,  I'm going to hit enter like this. Look at that it   changed. And if you click this drop down icon over  here like this, then you have tons of options of   for fonts. You can pick any font family you  want, like this, look at that. So I'm going   to say to pop in like this p o p p i ns Poppins  like that, and I'm going to name over here, a   do.io like this, okay, because we're going to  deal with this logo after all. Okay, so now the   next thing that I'm going to show you is this one,  okay? This is the font weight, it is kind of set   to red, it is currently set to regular. You can  also set extra light over here like this. Look at   that. The font weight changes, okay? You can also  say To set it to paint like this, look at that it   became thin. You can also say to this extra ball,  look at that how bold this text is. Okay, I hope   you understood it so far. And you see this over  here. So this is used to set the line height, look   at that it is written highlighted over there line  height, okay, so I'm going to insert it to let's   say regular, okay, like this. So um, this logo  should be regular. And in order text in, I'm in   a retest this line height, you cannot just simply  test with just a single line, you need multiple   lines, okay, so I'm going to delete it over here  like this, and I'm going to drag this one, just   text, you see this text over here, I'm going to  drag it to our test case. So in order to drag it,   so what you're going to do is you're gonna control  you're going to hit control, okay, and then just   pick this text over here like this. And then I'm  going to zoom out, and I'm going to click the old,   I'm gonna select the alt text like this old, and  you see my mouse is getting a little shadow on   its back, like two months together. Okay, so I'm  gonna select the old text and I'm going to move my   mouse like this, look at that, it is getting  copied, Okay, I'm gonna come over here and   don't move. Okay, just First of all, just release  your mouse click like this, okay, and then you're   going to release the Alt key like this look. Now  we have successfully copied our text on here,   okay? Now look at this. Now, now we're gonna  come over here, and we're gonna see like this,   like this, and then we're gonna see this,  okay? Look at here, line height is set to 43.   And if we want to change it, then you're gonna  click over here, or you can directly you can   directly put the number over here like this, let's  say I want to say 210 pixels like this, okay? If I   click enter, now, look, it has 112 110 pixels of  gap over here. Let's say that I want to set it to   20. Okay, you can directly input it over  here, like this 20 Look at that, it became   very congested like this. Okay, so if you click  over here, you see this, I got a small icon, okay,   arrow sign icon like this, I'm going to move my  mouse like this. Now, look, I can practice with   this real time like this without worrying about,  I mean, without directly inputting the value over   there. Okay, look at that I'm just playing out,  I'm just playing around with a mouse so that I   can find that sweet spot, which would be ideal,  which will be the ideal line height. Okay, so I'm   going to change it to 43. Like that, because it is  actually given on the style guide over here. Wait   a minute, over here, look at that the small text,  it should be 30 pixels. And look at this, the line   height should be 43 pixels, okay? I'm going to  come over here like this. And look at this, the,   the font size is 30 over here, and it is set to  Poppins and the line height is 43. Over here. Now,   do you see this over here, this is called a ledger  spacing. So line height works like this, okay,   but the letter spacing, legislating works like  this is going to put cap between our little   like this, okay, I'm going to show you Okay, I'm  going to keep it over here like this. And watch   very carefully. Oh, by the way, you can  also input direct value over here like this,   clearly over here like this, then it's going  to be 30%. Or perhaps you can also set this,   I mean, you can also use this mouse over here,  and you're going to get this little arrow sign,   okay? So I'm going to drag like this look at  that is going to change according to my mouse   movement. Okay, look at that, like this, it's  working like that. So this is used to set the   ledger spacing, I hope you understood it so  far. I'm gonna set it to zero over here like   this. Now look at this one. This is called the  paragraph spacing, okay, in case if you have   multiple paragraphs, then this is going to work.  Okay. So if I drag like this over here, then you   can see this behavior, it is working like a line  height, but it should not work like a line height.   Because I have actually used some gap over here  like this, it may actually show you wait a minute,   I'm going to set it to default controls that  control set again like that, okay. So what   is happening is I have given some line break over  here and there so it is behaving like a parallel,   but if I set it to it, or you know, state like  this, wait a minute, just give me a second,   okay? It is actually the ordinal state.  Look at this long text over here. Okay. Now,   I'm going to shrink it like this. Look at this.  Okay, I'm going to shrink it like this. And it's   going to behave like this. Okay, let me actually  zoom in. There we go. I hope you can see this.   I hope you can see my screen. Okay. I'm going to  look at this. This is behaving just like a single   paragraph. Okay, now look, now look what happens  if I use it. Okay. Now, look, it is not working.   The paragraph spacing is not working. This will  only work when you have multiple paragraphs. Okay,   let me actually show you okay. I'm going to copy  this one over here like this. Let's say two lines,   okay. Ctrl C, and then I'm going to paste  it over here like this. Ctrl V, there we go.   So how many parents do we have? We have two  parents. Now look at this paragraph height.   I mean, paragraph spacing, we said 23 pixels. I'm  going to drag my mouse like this. Look at that.   I can see range that paragraph spacing but look,  it's it's it is set to zero but there is some gap   over here that is the gap of your line height.  Look at that. Okay, you can also right over here,   but if you remove that whitespace from here,  then look, is it gonna work like that? Now look,   it is set to zero, exact zoo. Okay, I'm  gonna drag it over here like this. Now look,   it is working perfectly fine. There we go. Let's  do the next feature. Okay, I'm going to click over   here and look at this. Do you see this? This is  the text align left text align center text align,   right. Okay, let's experiment. Okay, so I'm going  to drag it, I'm going to drag the window like   this, okay, over here like this. Look at that.  Now look, the text is behaving on the left side,   okay, text align left. Now I'm gonna change the  center. Okay, you see this third line over here,   look at that it is set to left. Now he's gonna  move to the middle like this, okay, if I click   over here, like this text, align center. Now look,  it is changing the alignment, the text alignment   is changing to center like this. And I have also  the option of right over here, look at that,   right text align, right. So if we want to, if we  want the option of justify, you're going to click   this little icon over here, okay, wait a minute,  we're gonna click this little icon over here.   And then you're going to find this justify over  here, which means that is gonna, appropriately,   I may equally distribute the spaces in a way  that it fills the whole box over here. Okay,   so let me actually make this para into a line like  this. Now look at that, you see this one, this   line over here, and this line over here, look,  the text are equally distributed inside the box so   that it looks like text align justified. Alright,  so I hope you understood this alignment tools over   here. Now look at this tool over here, okay, or  a width, or a height, and then fixed size. So,   so in order to discuss this tools over here, first  of all, what you're going to do is you're gonna   reduce the size of your font size, okay? So  I'm going to set it to let's say, let's say   2020 pixels like this. Okay, now, let's  say I want to drag it like this, okay,   I'm going to drag that box like that. Now, look,  this is behaving like a fixed height, which means   that our pair over here will occupy What is this  912 pixels of weight into 286 pixels of height. So   it is going to occupy that much amount of space in  on our web design or perhaps on our on our frame.   Okay, so I can drag it like this. Now, look, it  is gonna, I mean, those snapping guides. Okay,   you see, this orange Schiller's colored guide  over here is going to work according to our box,   I mean, the box which carries the text, okay, so  this is how the fixed height, I mean, fixed size   works, but if you snap it to or a width, which  means that it's gonna hug the content inside the   box, so that there is no additional spaces, look  at this, you see this box over here, along with   the blue colored guides, okay, so I'm gonna click  over here, which is or a width, now look at that,   it is going to work as if it is a single line,  first of all, and the next thing is, is not   going to keep any additional gaps. Okay, so let's  say that, I want to break the line, okay, I want   to break the line over here like this. So you can  also do it, you can also break the line like that,   there we go, it's gonna work like that. And if I,  let's say, for any instance, this changes to like   this, okay, it's gonna, let's say that it changed  to this. So what you're gonna do is if you want to   reduce those white spaces, normally, most of  the people, what they do is they're gonna do it   like this look. They're gonna do it like this. But  this will not give you exact measurements. I mean,   it is not the ideal scenario. So what you're  going to use is you're going to use this little   icon over here with auto auto Wait, okay, the  auto hide, wait a minute, these auto hide works   in a similar manner, okay, it just works with the  height. Okay, I'm gonna click over here. And if   I select this, then it's gonna automatically  snap those height and remove those whitespace   from my text like that. Okay, now let's look at  this tools over here, these three tools over here,   okay, this is align top, align, and the middle  and align and the bottom. Okay, let's say that   I have this text and I'm going to resize it like  this. Okay, now look, I have a lot of space inside   my rectangle. And where does my text where's my  text aligned, it is aligned at the top, very top.   If I want to take it on the middle like this,  okay, I can use this one over here like this,   look at that, it's gonna come to the middle inside  this box. And let's say that I want to take my   text at the very center. Okay, what I'm going  to use is I'm going to use this little icon over   here, Li important. I get like that, look at that.  It has aligned, it has aligned to the model. So   let's change it back like this at the top and then  or a week like this. There we go. Now let's look   at this tools over here. Okay, you see these three  dots. So we're here, if you select this like this,   then you're going to have more tools. Okay, first  of all, you're going to get this alignment tools   over here, and then the decorations. Okay? So  if you hover over here, then you're going to get   live preview what each every tool does, like this,  look at this underline tool is going to underline   my text, okay? If I select this like this, you're  going to not only see the result over here, live,   look at that, look at this little screen, okay,  you can also see the result over here, okay,   like that. So I'm going to click it over here  as well. So if I want to remove the declaration,   then I'm going to select this over here like  this, none, then you can also strike through   the text like this, you have a lot of options.  If you want to make two lists, look at this list   option over here, okay, if I click this, then it's  going to create me a list, okay? unordered list.   And if we want to make it an ordered list, then  you can click this over here, an ordered list   in 123, so on and so forth. So if we want  paragraph indentation, you're going to utilize   this feature. Okay, wait a minute, this paragraph  indentation feature, okay. So if you say it,   let's say 30 pixels like this, okay? Oh, this  is actually not working. That's because we   have multiple line breaks. So I'm gonna make it  just a single line, like this. Wait a minute,   just give me a second and then I'm gonna drag this  inside my frame. Okay. Wait a second like that.   There we go. And it is just working like a single  paragraph and then oral height like this. I mean,   oral width like this. Okay. Oh, I did in  the wrong way. My bad. Sorry. Okay, now,   looks good. Now, look, I have some paragraph  indentation at the very first of the text. Okay,   look at this. We have 30 because we have 30 pixels  of gap over here. If we want to increase the gap,   let's say 100. Let's go 400. Okay, 100 like this.  There we go. We have 100 pesos of gap over here.   Let's look at more options that we have. Okay, so  we have the lowercase over here. Okay, this is the   default, I mean, the way you write it is going to  be default. Okay. So if we want all the text to   be capital sized, okay, you have this uppercase,  okay? Now look at this text, okay? lorem ipsum   dolor state, okay, it is in small text, lowercase  letter, okay, I'm going to change it to uppercase   letter. Okay, I'm going to click over  here and then I'm going to click this,   okay? It is the preview, it is going to  give me a preview over here as well. Okay,   so I'm going to click this over here. Now look,  all the text all later has changed to upper   upper case letters, okay, like this, look  at that. You can also change it to lowercase   letters, I by clicking this, again, look  at that all the texts are I mean, all the   letters are lowercase. By the way, if you want to  change the color of your text, what you have to do   is you're going to select any text, okay, let's  say that I want to see like this text over here,   okay, so I'm going to what I'm going to do is I'm  going to Ctrl and then click over here like this,   okay? Or what you can do is you can double click  over here like this, and it is going to get   selected, okay, okay. And then what you're going  to do is you're gonna scroll down over here,   and you see this fill option over here, you  can change the color over here by inputting   your hex value over here, or what you can do is  you can just select this option over here, okay,   you can get this eyedropper over here, which  means that you can pick any color you want,   like this look, I'm going to select this over  here like this. Let's say that I want to change   it to this color over here. Okay, so I'm going to  select this ello the text gets colored according   to this color over here. Similarly, what you  can do is you can drag this little small dot   over here and you can play any way you want and  the color changes accordingly. Okay, I'm gonna   move this ball over here, and you're gonna  see the changes over here. Okay, look at this,   I'm going to change the black letter sound, I want  to, I want to change it to black, let's say like   this, okay, and let's say I want to change it to  white. Okay, I'm gonna go over here like this.   By the way, you can also move this over here to  change the color. Okay, let's say I want to go to   red. Okay, I'm going to come to red over here, and  this palette over here turns to red, okay, and I   can move it over here as well like this. Okay?  If you want to change the opacity, then you can   change it over here like this look, I'm gonna  look I'm gonna drag this slider over here and   look at this effect over here. Okay, it's gonna  get changed. Okay, look at this. I'm going to drag   it and look, the opacity changes, okay, if  I turn it to zero, it's gonna be invisible.   Okay, effort. If we go to absolute zero, like  this, then is going to get invisible. Okay,   so ladies and gentlemen, we're done discussing  the text tool along with all its properties.   As a beginner, you don't have to understand  prototypes. So this is a feature that I'm   discussing right now, the paradigm over here,  this one okay, but for the sake of this tutorial,   and to make you understand how and where the  product feature is used, I have created a   small section over here on this page, okay, so  you can see this for right sample, you're gonna   come over here okay. Now you can see two designs  over here, okay, this is the mobile design. Now,   let me tell you where product is used. prototype  is used to make interactive web designs. So I have   kept an example over here on this section. Okay.  Perfect. sample. So now what I'm going to do is   I'm going to click over here, okay? For right like  this. Now look, I already created some frames over   here, but I'm going to delete it. Okay? So  I'm going to click it over here like this.   And I'm going to delete, and then I'm going  to click over here and then delete. Okay,   so I'm starting, I'm starting from  scratch in order to make, sorry.   So I'm starting from scratch, in order to make  you understand how the system works. I mean,   the product how prototype works. So first of  all, let's understand this model over here. Okay,   so this is our nav bar over here. And this is  the hamburger menu icon over here. Okay, so the   moment we click this menu icon over here, okay, is  gonna get converted to this cross sign over here,   and then this content over here will get vanished.  And then it's going to show us our menu items over   here, like home teacher, so on and so forth, etc.  In order to create a portrait, right, what you're   going to do is you're going to click over here,  okay, this section for right like that, and you're   going to get this instructions over here. Okay,  so the first thing that we're going to do is,   I'm going to select this, okay, by double  clicking over here, like that, look at that,   I have selected this hamburger menu icon. Okay, so  look at this, do you see this plus sign over here?   It means that the moment we click on here, or the  moment we tap on here, where do we where will this   lead us to? Okay? It's going to lead us to this  frame over here. I mean, this design over here,   okay, so I'm gonna click and drag this one like  this, look at this arrow on my hand. Okay, I'm   going to drag it like this over here. There we go.  So this is getting linked to this one over here.   All right, and then it's going to give me this  option over here. So look at this interaction   details that popped up. Okay, so it's telling  me it's asking me how this interaction should   take place. Okay, should it be on click or on  drag, all while hovering while pressing, then   we have mouse and we have a lot of options over  here to pick from what what For this tutorial,   I'm going to keep it very simple, okay? On click,  which means that the moment we click this one   over here, then it is going to choose this frame  over here, okay. And then we also need to click   over here, so that we can go back to this main  content over here. So how do we do this, we're   going to do the same thing. Okay, we're going  to double click over here on this cross site.   And then you see this little plus over here, let  me zoom in, you see this little plus over here,   we're going to select that and drag it back to  this main frame over here like this. Okay, that,   there we go. And there is also going to show  me this interaction designs, I'm interaction   details. Okay, so what I'm going to do is, I'm  going to keep it as it is, and then look at this   animation over here. So I'm going to click over  here. So instead of instead, I'm going to select   dissolve over here like that. So you have a bunch  of, I mean, a lot of options to choose from,   but I'm going to keep it very simple, just  dissolve, okay, like that. And I'm going to select   this one as well. And I'm gonna set the animation  to dissolve as well like that, look at that. Now   look, in order to test this prototype, what  you have to do is you're going to click this   play button over here, do you see this play  button over here. And when I click it like this,   now let's experiment, it's going to create a new  window over here, okay? And there we go. Look   at this, our design is over here. I mean, this is  our prototype over here, okay? Now, look at this,   look at my mouse over here, wherever, wherever I  go, it is just a mouse, okay, but wherever, what   whenever I come over here, look at this is gonna  turn into a pointer, which means that this is   clickable. If I click over here, then it's going  to give me some animations or interactions. Okay,   now look, I'm gonna test it over here like this.  Okay, I'm gonna click like this, look at that.   Look at that, we have our navigation menu  items over here. And we also have this cost   center over here. Okay, I'm going to click  over here again, like that, we're gonna,   it went back to our frame, main frame  over here. Let's experiment again. Okay,   click like this. There we go. And then in order  to go back to that, you see this animation,   this dissolve animation, look at that. It is  just fading in fading out. I really hope that   you understood the product feature. If you want to  experiment with the product, you're going to come   to this section over here the prototype sample  and follow the instructions that I have given you.   Now we're going to discuss that with  a feature called auto layout. Today,   I'm going to show you two use cases how to use the  auto layout. First of all, I'm going to show you   how to align your content, this content over here,  this text this text this button at the same time,   I'm going to show you how to make this button  over here using the auto layout. So now you're   going to come over here like this, and we're  going to create a new frame over here, okay,   so you hit F like this on your keyboard, okay,  and then you're going to drag it like this. Look   at that. We have created ourselves a new frame.  Okay, let me actually resize it a little bit.   Like this. Look at that. Okay, it looks  quite good. And then now I'm going to create   a text Okay, so d and then I'm going to  place it over here like this, okay, I'm   going to write something like this. And then I'm  gonna set the size to let's say 60 pixels. Okay,   wait a minute. It's gonna work like now 16. There  we go. And now I'm going to duplicate this. Okay,   let's say that I want to duplicate this  to James, okay, I'm going to select the   keyboard named alt, okay? And then I'm  going to drag it like this, look at that,   okay, it's gonna get copied, okay? Alt, and  then use your mouse like this, look at that out,   and then mouse is gonna duplicate me the same  thing. Okay, control Zed. Now, where is the oral   layout used? Let's say that this text are over  here like this, look at that, okay, in this array,   let's say that I want to align them to the very  left, or exact measurements, how what I mean,   look at this over here, you see this text, one,  two, and then this button over here, you see,   all of these elements are aligned to this box,  this blue colored box over here on the very left   on exact accurate measurements. So if we  want to copy this layout over here like this,   then what we generally have to do is we have  to individually select this element, okay? And   then we have to take the help of this guy's over  here, do you see this orange color guide that is   showing me the number of gaps 57 pixels, okay?  If I come over here, like this, look at this,   the orange color guide is getting highlighted.  Okay, let me show you again. Okay, look at this,   okay, now look, this is on accurate, left, Align  Left, okay. And then if I drag it over here,   like this, now look, it's gonna get aligned  to the left, according to this size over here,   okay. And then let's say that I want to decrease  the size over here, okay, I'm going to select   this like this, okay, I'm going to do it like  this, and it got decreased reduced in size.   And let's say that I want to decrease it even  further. Okay, I'm going to remove these letters   from here like this. Okay, now, let's say that I  want to change the gap in between this content,   okay, it's gonna be a hassle, okay, you have to  just individually take your mouse, and then you   have to place it like this. And if you want  to calculate the space, what you have to do   is you're gonna click any element, let's say that  I want to click this element, okay, this element,   and then I'm gonna select my Alt key on my  keyboard like this. And then wherever I place,   my mouse is going to show me that calculation.  Like look at this, the distance between these   two elements, okay, is 51 pixels, look at this  orange color guide, it is highlighting 51 pixels.   Similarly, let's say that I want to select this  and calculate the gap between these two content,   okay, I'm going to select out, and then I'm going  to put a mouse on this content, look at this   39 pixels. This is how it works. But it's  gonna be a long hassle if you do it manually.   So in this case, what you can use is the auto  layout. Okay, let me actually show you okay.   I'm going to click all of them together, and then  I'm going to right click like this and look at   this option or add auto layout. Okay, I can do it  over here like this, or do you see this option?   shortcut keys shift a, you can also press the  shift n is going to work, okay? Like this,   look at that. Okay, now look, if I.  So if you notice on the right side,   you see this new section over  here, this is called oral now,   okay, if you want to remove the oral layout,  then you're going to select this minus over here,   okay? And then it's going to remove it and convert  it back to a frame. How do you know when it gets   converted to a frame? Okay, you're gonna actually  you're gonna show you're gonna see on the right   side, okay, look at this, okay, this hashtag,  this hashtag means the frame. Now, if you go   back by selecting control Zed like this, look  at this over here, wait a minute, look at this,   we have two rows like this, I mean, two lines  like this, this represents the auto layout. Okay,   now let's look at the options that we have.  Okay, so I'm going to select this like this,   and it's going to highlight me that auto layout,  okay, look at this, I have 45 pixels of gap in   between each of this content, okay? So if I  drag my mouse like this limit, the amount of   gap in between this content changes, okay, like  this, look at that, again, lowest is zero, and   upper limit is anything you wish, okay, like this,  let's say I want to set it to 25 pixels like this,   look at that. And this one, look at this one, this  is used to add padding around your continuity,   let me show you Okay, I'm going to select this  and drag it like this, we're gonna look at this   padding is getting added all around my content  like this, look at that, if we want to change   again, like this, look, padding is getting applied  like that. Now let's talk about this feature over   here. padding and alignment. Okay. So if I, let's  say that I want to increase my size of my content,   okay, like this, look at this. I'm gonna drag  my blue colored box like this and it is gonna   increase in size. Let's say that I want to place  a condom at the very center. How do I do this,   in order to do it quickly, easily efficiently,  we're going to use this tool alignment and   panning, okay, and when I select like this, and  look at this, I have so many options. I can select   it any I can place it anywhere I want. So our  criteria is where to set it at the very center.   How do we do it? We're gonna click this over here,  you see this over here, option. Look at that.   It got centered on our box over here. Okay,  so let's say that I want to see like this,   I want to place it on this corner over here  on this corner over here, we can do it.   So you're gonna see like this, like  this, look at that. It's gonna get   Move to this section over here. And do you see  this over here? This is the padding. This is used   to add padding. So remember this one, okay, let me  actually change it to a default. Like that. There   we go. So if you remember, this is going to add  padding to all four sides. But you don't want this   behavior, you just want to add padding to let's  say that left and right, okay, in order to do it   manually, you're going to click this over here and  using this option over here, you can manually add   padding over here. Let's say that I want to add 50  pixels of padding to the left side. There we go,   boom, it's going to add padding to just to the  left side. Okay, now let's say that now let's   say that I want to add padding to the top, okay?  Top How much are let's say the 25 pixels, okay,   so I'm gonna come over here and write 25, like  this, and hit enter. Now look, I have 25 pixels   of padding and the top 50 pixels of padding on the  left, if you want to individually set the padding,   this tool is very helpful. Alright, then now let's  experiment how to make a button using the auto   layout. Okay, so I'm going to delete this from  here, okay, I'm going to make a button like this,   look at that, you see this button over here, I'm  going to make it I mean, I'm going to duplicate   it. Okay, so I'm going to come over here, and the  very first thing that I can do is I'm gonna write   text over here like this, okay, I'm gonna write  after selecting T. And let me show you the steps,   okay, you're going to hit t on your keyboard,  or you're going to select this over here, okay?   So t like this, and then and click over here on  your screen, I mean, on your frame, again, you're   going to right button, bu TT o and like this  button, okay? So, I'm going to convert this button   text to full capital letters. Okay, so I'm going  to come over here like this, and I'm gonna select   this option over here. Okay, look at that. Now,  what I'm going to do is I'm going to directly add,   I'm going to directly add or layout, look at this,  okay, I'm going to right click over here and add   order lab, or what you can do is you can, you can  click shift plus a like this look, shift and a,   now look, oral layout is added to our button.  Okay, in order to see that, what you have to do   is we're going to click this over here, and then  you see this field over here. I'm going to click   this over here like this, and I'm going to change  the fill color to black, okay, 0000, like this,   and look at that, it got converted to very dark  black. Okay, now, I'm going to come over here,   and then I'm going to select Ctrl on  my keyboard, and then right click,   I'm in left, click over here, and then I'm going  to select the text, okay, the text is selected, or   what you can do is you can come over here on this  frame, okay, this frame gets highlighted in blue,   and then look at this frame, I mean, this oral  layout frame, okay, and inside this frame,   we have the bottom, okay, you're going to click  this over here, or you can directly control and   then left click over here, then is going to  select the text, okay, and then you see this   color over here, I'm going to change it to white,  okay, f f, f f, six times f, like this look,   is gonna bring back my buttons. Okay, now let's  say that I want to add some padding to the left   and to the right side of one button. So how do I  do this. And before doing that, what you have to   normally do is we have to select this over here,  and then you have to select this, which means that   you want the text to be at the very center of  your bottom. Otherwise, what happens is, if you   want to resize your button, let's say that I want  to resize Mazzuca that the text is aligned to the   very left it is not moving, okay, if I resize it  like this, look, it is not moving anywhere. Okay,   controls that control that. Now, if I set it to  the very center like this, if I resize my model   anywhere, anyhow, wherever I wish, like that, look  at it, this text will stay at the very center,   we're here like that, look at that, I can move it  anywhere I want, okay, controls that. Now, let's   say that I want to individually add some padding,  okay, I'm going to select over here. And then   let's say I want to select padding of 30 pixels  on the left in the right, okay, 30 over here,   gap, I mean, enter 30 over here, hit enter like  that, look at that, we have 10 pixels of padding,   your top bottom, and 30 pixels of padding on the  left and right. Also, I'm going to show you how   you're going to utilize these two buttons over  here to make responsive layout for your desktop,   tablet, mobile Web Designs more quickly  and efficiently. So keep watching,   I hope you understood how to align your content  and make buttons using the auto layout feature.   Now I'm going to show you this feature that is  left to discuss this feature over here. Okay,   so this is the vertical direction and  this is the horizontal direction. Okay,   I'm going to remove this real quick. And look at  this over here. Do you see this layout over here?   Do you see these cards over here? How is this  stacked? This is stacked on a horizontal line. And   if you see the mobile version, the mobile design  Look at this. It is stacked vertically like this.   So how do we do this very quickly, easily and  efficiently. Okay, so I'm going to come to this   Dexter version over here and then I'm going to  copy this one to the right side. Okay. Or perhaps   let's say I want to copy this over here. Okay.  Like that. I'm going to extend this like this,   okay? And then I'm going to click one time over  here, okay? And then out, press the out button   on your keyboard, okay? like this and then drag  it over here like this, look at that. Okay? So,   auto layout is also enabled on this one. Okay? If  you see the right panel over here, you see this   orange, you see this auto layout is enabled,  okay? Do you see this horizontal direction   it is enabled, which means that our cards will  act like this, okay, it's going to act on the   horizontal line is gonna layout on the horizontal  line, what you're saying that we want it to be   on the vertical line, which means that we  want to make it for the mobile version. Okay,   what we're gonna do is, we're going to click  it over here like this. Okay, boom, we made the   layout of workouts for the mobile version, look  at that, how quickly I made it. So the mobile has   small screen. Okay, so I have to resize it like  this. Let's say that, I'm going to come over here,   and then I'm going to hit the K. Or what you  can do is you can come over here and then   select the scale version over here. Okay, I'm  going to hit K over here, like this, and then   click this. And then I'm going to resize it like  this, look at that. It got resized, if you want   to resize even further, according to your screen,  which is normally small, like this, look at that.   You can, you can adjust the width and height  accordingly to your needs, okay, like this, using   the scale isn't isn't the scale to now look at  this side by side comparison how easy and quickly   I made layout from a mobile version from the  desktop version. This is the desktop version over   here. And this is the mobile version over here, by  the way to see the content inside this card, this   chemistry, this button over here, this image over  here, all of them are using the auto layout. And I   have used auto layout to align the content at the  very center. If I see if I select one card like   this, look at that. Okay, I have selected this  card over here. So look at this content over here,   okay, if I come to this auto layout, look, all the  content has 19 pixels of padding, I mean gaps in   between. And then if I select this one over here,  then you can see that the content is aligned to   the very center like this, look at that, I really  hope that you understood the auto layout feature.   The next feature that I want to talk about is  the layout grid. So you can select any frame you   want across all these pages, either the desktop,  tablet, mobile or anything, we are going to find   this frames, Okay, I'm gonna send the first one  as an example. Okay. And then you're going to find   this over here, the layout grid. So when is this  used, if you want to plan your content, I mean,   if you want to make a web design responsive for  the next top, tablet, mobile, etc, you need to   plan your content, right? So using this, you can  plan your content. Let me show you a demo. Okay,   so I'm gonna use the i button over here, I'm gonna  click this, this is used to hide that layout,   okay, like this, look at that, okay, and this  minus sign is used to delete that layout.   And this plus sign is used to add the layer, I  mean, the layout grid, okay. So look at this,   what is written over here, five columns are okay,  so if you count over here, 12345, we have five,   I mean, five grid columns, okay. So if you click  over here, like this, now, what is this, this   didn't count, okay, you can increase the number of  columns over here, you can also select the color   and then you can set the opacity over here like  this as well. So I'm going to click over here   like this. And then look at this, we have this  option on the columns, we can also change it to   grids like this, and you can see these little dots  over here like a graph paper, okay? You see this?   thin lines like this, okay? This pattern, okay?  And so this is the grid. Alright, so if you want   to change it to, let's say, columns, or sorry,  rows, you can also do it like this. Look at that.   It changed from columns to rows like this.  Now let's change it back to columns, okay,   like this. I'm going to click over here and then  columns like this. Now look, how many columns   do we have? 12345, right. So look at this over  here, we have five columns over here, and over   this margin over here, 50 pixels of margin. So if  I zoom in over here, so look at this over here,   you see this first column over here, the gap  between the first column and the start of our   screen over here is 50 pixels. This is the  gap. I mean, this is the margin over here.   And regarding the gutter, we see we have 30 pixels  of gutter over here, okay? Now look at this, this   is the gutter, okay? I mean, the space between the  columns, okay, this is 30 pixels. Now, the best   example that I can give you at the moment is this  one, wait a minute, this layout over here you see   this one over here offered courses. This has three  cards, how many cards, three cards, which means   that we can stack them on three columns. Okay,  let me show you a mess like this. And look at   this over here. Okay, I'm gonna and now I'm going  to click this button over here to show you how the   layout grid is working. Okay, so look In this,  how many layers? I mean, how many columns do we   have? We have three columns and three cards. Okay,  so how many how much gap? Did I put between the?   I mean, how much margin did I put? Okay, so I can  see it over here like this, okay? Look at this, we   have three columns. So it's gonna be highlighted  three over here, and the color is this one red.   And this is used to change the transparency. Okay?  So if I increase the size like this, look at that,   it gets much red. Okay, I'm going to change it to  10% so that it is visible. I mean, both the layout   grid and content becomes visible, okay. 10% is a  sweet spot. And we have margin of 77 pixels. Okay.   On the left and the right, and gutter, we have  turned to pixels. A couple of seconds ago, I told   you that this layout grid is used to plan your  content when you're making responsive websites,   I mean, Web Designs. Okay, let me show you a  demo. Okay. This is the best example that I   can give you right now. So I'm going to click  this over here. And look at this over here,   how many columns do we have? We have three columns  over here with 77 pixels of margin on the left and   the right and then we have 32 pixels of gutter,  okay? So this is, you see this gap over here.   Okay, white colored space between the red and our  start off screen over here. This is 77 pixels of   margin, okay. And this gutter over here, you see  this white color over here? This is 32 pixels.   This is the gutter. Okay? So this is the desktop  layout. Okay, how many columns do we have? We have   three columns and three columns are stacking three  cards. In case of the mobile layout, look at this,   okay, I'm going to click over here, this mobile  on the page section and look at this, how many   columns Do we have, we have just one single column  and this single column is stacking how many cards,   three cards because we have less space, less space  on the mobile version? Okay, so I'm going to click   on this and then I'm going to inspect that layout  grid. Okay. So I'm going to click over here. Now   look, how many columns do we have? We have just  one single column. And how many margin Do we   have 20 pixels of margin. Now for zooming, look at  this, this space over here is 20 pixels of margin.   Okay, and this is the mobile layout. If we  want to add layout grid on your frame, what   you have to do is you're going to select F, okay,  on your keyboard like this, and then you're gonna   drag it like this, look at this, we have a frame,  okay, if you want to add that layout grid, you're   going to select this like this and look at this  over here, you see this layout grid over here,   you're going to click this over here like this,  the plus sign, okay, then it's going to add this   pattern over here. If you want to change it,  then you're going to click this over here. And   then you're going to change it to columns or  rows over here, according to your needs. Okay.   I hope you understood how to use the layout grid.   Alright, now I'm going to discuss about the  constraints properly. Okay, in order to discuss   about the constraints provided, you're going to  come to this section, I mean, this page over here,   responsive test. Okay, so you have noticed  this before, okay, if you click any element   like this, then you're going to find this  constraints property over here. I'm going   to discuss about this one. Okay. This is used to  test whether your design is responsive or not.   So I use the constraints provided along with  the plugin named breakpoints. Okay, this is a   plug in over here, I have actually included this  section for you to test. So you're going to come   over here. Okay. So do you see this guy's over  here? I'm going to zoom in a little bit. Okay.   I'm gonna come over here you see this. These  are our breakpoints for one four pixel is the   breakpoint for the mobile version. Okay. 767 168  pixels is the breakpoint for the tablet version.   This is the breakpoint for the laptop version. And  this one is the Dexter version. Okay, now look,   what happens if I resize it? So I'm going to click  this over here. Okay. look very carefully. Look at   this, the constraint property is working. When  I resize the window like this, look at this,   our content is at the very center, we're here.  Don't worry, we're going to recreate the results.   Okay, just look what happens. So when it comes to  the tablet breakpoint, now look what happens. Now,   if I now if I cross the tablet break? Well, now  what happens? Here is the tablet breakpoint. So   I'm going to cause the tablet breakpoint. Okay,  like this, look at that. Look, our design changed   because the plugin named breakpoints, and if I  resize it like this, now look what happens. We   have some gaps over here, okay, and the content  is actually at the very center over here. So if   I resize it even further, now look what happens.  The font size changes and the content increases in   size. Like that. Look at that. Let me actually  resize it again. Okay, now look what happens   when that small large is the laptop. This is  the tablet version. This is the laptop version,   tablet version, mobile version over here, mobile  tablet, laptop, the constraint properties used   over here. Okay, I'm going to delete this over  here real quick. Okay, so I'm gonna come over   here. Okay. Wait a minute. Now look at this.  This is the design for the laptop version. This   is the tablet version over here and this  one is the most Version over here. Okay,   so I'm gonna just focus on the mobile version over  here like this, wait a minute, there we go. Okay,   so I'm gonna bring my options over here. And then  what I'm going to do is I'm going to select all my   elements together, okay? Like this. And then I'm  gonna group it together like this Ctrl G. Now,   if we select this one over here, and if  you notice over here, now you see this,   this blue color is highlighted, and this one over  here as well. This is the top and this one is the   left, okay, which means that if you resize the  window like this, wait a minute, like this, then   what will happen is your content will be focused,  your content will be locked on the left top, like   this, look at that. But let's say that you want  it to be on the bottom. Right. So how will you   do this? control that Okay, I'm going to select  this I mean, the entire content section and I'm   gonna select this one. Okay, bottom, right. Now  look, what happens if I resize the window. Okay,   now, look, what happened is gonna stay focused. I  mean, he's gonna stay fixed on the bottom, right?   Okay. Okay, now I'm going to select this  one. And I'm gonna drag it down like this,   look at that. Our content is getting fixed on the  bottom right. Now, let's say that I want it to be   on the bottom left, what will I do, I'm going to  do the same thing, okay, I'm going to come to that   constraints property. Wait a minute, there's one,  okay, then then I'm going to select a bottom left,   okay, I'm going to just click this over here, or  what I can do, I can just click this overhead and   select the left option like this. Okay, and  now look what happens, we resize the window,   I'm gonna drag this over here. Now look,  it's gonna stay focused on the bottom left.   Like that. So in the case of testing my  responsiveness of my Web Designs, what I do   is I'm gonna select all my content, and then I'm  gonna center both horizontally and vertically like   this. Okay, now look, what happens if I resize  the window like this, look at that. Okay, it stays   at the exact center like this. Okay, I  do it for all my contents, wait a minute,   let me actually resize it. And I'm going to select  all this content over here like this Ctrl G.   I have grouped them together, I'm  going to select this and I'm gonna   enable this option. Okay, center center. Same  thing for the version as well like this, okay,   Ctrl, G, and then center center like  this. Now, there is a plugin named   breakpoints, okay, I'm going to right click over  here and then select this plug in, okay, you   didn't have to do anything, just look what I do.  Okay. And if you want to test it out, I'm going   to include this section over here, you're gonna  come to this section, and then test it on your own   how the system works, okay, so I'm going to select  this plugins option over here, and then I want to,   and then I'm going to select this breakpoints,  like this. And there is going to give me this   little window over here. Okay, I'm going to  select new adaptive layout like this. And then   I'm going to define a breakpoint over here,  and I'm going to keep it over here as well.   And let me actually, alright,  then, I'm going to select this one.   And then I'm going to right over here for one,  four, which is the mobile display breakpoint,   okay, and then I'm going to right over  here 768, which is the tablet screen,   and then I'm going to click this plus sign over  here, okay, and then I'm going to right over here,   1024 pixels, laughter version, and then plus over  here, again, we're here 1440 pixels, 1440 pixels,   which is the Dexter version, okay, now look  at this plus sign over here, I'm gonna click   this and I'm gonna select this mobile layout, like  this plus sign over here, I'm going to select this   tablet version. Okay, I'm going to select this  over here, and I'm gonna select this laptop as   well. Okay. Now, this is the result we got so far.  Okay, now, this content is at the very center. If   I resize it, wait a minute, let's actually select  this and then guess what happens? Look what   happens. Okay? Oh, I actually need to increase  the width over here as well like this looking at   I mean height, I need to increase the  height like this. Now look what happens   if I resize the window like this, we're gonna  see the mobile version. Okay, this is the tablet   version. And this one is the laptop  version. The constraints tool. And the   break point to both of them are very handy  if you want to test out your responsiveness   of a web design. So I'm going to keep it as it is  so that you can come and practice over here, okay.   Alright, now I'm going to talk about a tool  called components. Okay? So look at this   over here, this footer over here. This is  actually a component. Okay, we are gonna,   you and me together, we're going to change this  social media icons with this one over here.   I'm going to come to this assets over here and  look at this social media icons over here. Okay,   we're going to replace this. So we're going to  replace this one with these ones over here. Okay,   but before that, let's actually test what does  our components do? Okay, so I'm going to come   to the left side over here, and I'm going to  draw a frame F and then like this, look at that.   Let's say that I'm going to write some dummy text  over here Okay, like this. A B, C, D, okay? Ctrl   A and I'm going to change the size to let's say  100 pixels, okay? Like this, look at that. Okay,   I'm going to change the font weight to regular.  Okay? Now look what happens if I copy this to,   let's say three times, okay? This is the second  time, this is the third time over here. Okay,   I'm going to zoom in a little bit like  this. Now look what happens, let's say that   one of many benefits of the components function  is that it helps you to stop repeating the same   design again, and again, they the day, the day  and night difference between copying and pasting   the same thing and using the components, okay,  let's say that I have copied and paste it three   times over here, okay, 123. Let's say that I want  to remove the C, okay, I don't need the C. Okay,   so what so what I have to do is, I'm going to  select this over here, and I'm going to remove the   C over here like this, okay? Same thing, I have  to repeat how many times three times one time,   two time over here like this, okay, and  three time over here like this, look at that.   But if I use a component that, wait  a minute, let me actually remove this   from here. And I'm going to write ABCD  over here, okay? If I right, oh, sorry.   Now, if I'm making a component, how to make a  component, okay, I'm going to click this button   over here, create component, or what I can do is  I can right click over here and create component   like this. Now, this is a component over here, you  can see you can tell it vice, you can tell it by   looking at this icon over here. Or you can also  you can also tell it by looking at this highlight   over here, a component is highlighted in purple  color, okay? Now look what happens if I copy from   this component, okay? All and then click over here  and then drag like this, okay? Now, look at this,   over here, look at my layers over here. This  is a diamond shape, which means that this is   an instance of the parent component, this is the  parent, this is an instance. Okay, I'm gonna do   it the same like this. Again, they say I want to  do it more three times, okay, like this look at.   And let's say that I have to change it, I have to  remove the C, what will I do, I have to remove it   six times, I have to do the same thing six times.  But if I use a component like this one, now look   what happens if I remove the C from the parent  component like this, look at that, I removed the   C, the C is removing all my six designs over here,  look at that, by just changing this one over here,   and nothing else. Everything is changed. This is  the main selling point of the components. Okay,   so I'm going to delete this from here. And  look at this design over here. I will look   at my footer over here. This social media icon is  it is blue in color, it doesn't go with our team.   If I come to our color palette over here, look at  this. This is my color palette over here. Okay,   you can check the hex value over here as well  look at this hex value and this hex value as well.   All right, no, this doesn't go with our color over  here. This is blue color, light blue color. So I'm   going to change this to black and white. Okay,  this one over here, this, if we come to this   assets over here, there's one Okay, now what I'm  going to do is I'm going to click this frame over   here and then hit Alt on my keyboard like this,  and then I'm going to drag it like this. Okay,   it's going to get copied, and then I'm going  to right click, and then I'm going to select   this option over here, move page to Dexter.  Okay, I'm going to come to text over here,   wait a minute, there we go, we have our  design over here, you actually need to,   you actually need to zoom out a little bit  so that you can see where the frame is.   Okay, like this, I got my frame over here.  All right now. Now I'm gonna select this one,   this. Now I'm going to select this tutor  option over here by double clicking over here,   and then double clicking again, like this.  Now I can see the exact width and height of my   tutor over here. I went to the icon over here,  this for 8.81 pixel. So I'm going to copy this   from here like this Ctrl C. And then what I'm  going to do is I'm going to resize all of my   media icons, okay, like this, I'm gonna select  this over here, and then I'm going to hit   cake on my keyboard, okay, like this, I  can resize it like this, look at that.   Now what I'm gonna do is I'm gonna lock it over  here, like this is the constraints property.   And then Ctrl V, if I paste it over here, then  it then this value will automatically get applied   on my height over here as well. Okay, so I'm  gonna select enter like this. Now look at that.   It gave me accurate calculations. So I'm  going to drag it over here, wait a minute,   over here like this. By the way, this folder over  here is the main parent component, okay? Which   means that if we change anything over here, then  all the children that all the children components,   I mean, all the instances will get changed as  well look at this, I placed the social media icon,   the Facebook, black and white over here on the  parent component, and it got applied over here   on the children component. Same thing goes for  all the children components as well look at   that. We have this Facebook icon over here. Now  I'm going to delete this one over here. Okay,   the blue colored one. So what I'm going  to do is I'm going to come over here,   and then I'm going to double click over here.  And then I'm going to delete like this. So it   got removed. And same thing got removed from all  the parent and children components as well look at   that, we'll have the social media icons over here.  Same thing for all the footer instances. Okay,   so I'm going to come back over here, and I'm  going to resize them also in a similar manner,   I'm going to hit K and then resize it like  this, look at that. And then I'm going to hit   this constraints property. And then I'm going to  paste the value that I have copied, okay, Ctrl V,   enter, look at that. So I'm going to select  it together, and I'm going to drag it on here,   like this. Okay, now, what I'm going to do  is I'm going to arrange a series like this.   And then I'm going to hit Shift plus a, after  dragging, after selecting all this, okay,   like this, shift a, and then I can adjust the gap  over here like this, let's say I want a gap of 10   pixels, okay? I change the mind, I'm gonna select  it, like this, there we go. I can also change   the stroke as well. Okay, if I select Ctrl on my  keyboard, and if I select this stroke over here,   like this, then it's gonna select me this,  look at this, I'm going to change the to.   Okay, and I'm going to do the same thing  over here, hit Ctrl on your keyboard,   and then hit Ctrl on your keyboard and select this   circle over here. And then change the to from 3.5  to like this, look at that, it looks beautiful.   Double click over here and then follow the orange  colored guides, okay? Look, our content is look,   our social media icons are aligned the left  according to those texts over there. Okay,   now if I inspect all of my, let me actually delete  this from here. Nine now if I inspect all of my   children instances, look at this, the same thing  got applied over here, because that is because we   change the parent component. All children's,  all children instances are bound to change.   Look at that, I really hope that you understood  how to use this useful tool named components.   Congratulations, guys, we're done discussing  all the essential tools of figma. Now we're   going to start making our web design for the  desktop version. Let's get started. But the   first question is, how will we practice? Alright,  then we're going to practice like this over here,   we're going to draw our frames, okay, like this.  And then we're going to copy this design on our   practice case over here. As a beginner, this is  completely fine to copy others works and designs   because this is part of the learning process. So  I'm going to delete this one here like this. And   then what I'm going to do is I'm gonna move  this to the right side, okay, and then I'm   going to draw a frame over here, like this, follow  along with me, I'm gonna hold my shift, and then   I'm gonna select the names like this, okay, I will  name the frame like this. Alright, and then I'm   going to select the fingers. And then I'm going to  drag it over here like this. There we go. Now what   I'm going to do some zoom in over here, okay,  whatever. This is my color palette over here.   I'm going to keep it over here. There we go. And  then I'm going to make a frame over here. Okay,   so I'm gonna select my F, which is frame to locate  F. And then I'm gonna select this over here, okay,   dekstop. And then this one dekstop, which has  a dimension of 440 pixels in width, like this,   look at that. Okay, I'm going to keep it over here  like this, the first thing that I'm going to do is   I'm going to make grid layouts. Okay? So what I'm  going to do is I'm going to select this element   over here, okay? And then I'm gonna select this  little icon over here, okay, so that I can see the   grids over here. And then I'm going to select this  so that I can better see what is the margin and   what is the gutter over here, okay, you can see  figure, we can see 50 pixels of margin over here.   But let's say that in certain scenarios, you  cannot actually see how much is the margin over   here. So what will you do in this case, in this  case, what you can do is, let me actually show   you a trick over here. So I'm going to come  over here, okay, you see my text over here.   And this gap over here, I'm going to draw a  rectangle over here, let me actually show you   Okay, I'm going to hit R. And then I'm going to  draw a little rectangle over here, and I'm gonna   keep it over here like this, and it's gonna snap  inside this, let me actually zoom in a little bit,   so that you can better see how this is working.  All right, so look at this rectangle over here,   and then I'm gonna stretch it to this till this  side over here, okay, like this, wait a minute,   like this, look at that this rectangle is filling  that gap over here. Now if I select this over   here, and if I inspect this rectangle, you can  see that this rectangle is 50 pixels in width,   which means that here is 50 pixels of gap.  So now what I'm going to do is I'm going to   remove this rectangle from here. Alright, then  I'm going to come to my main design over here,   I'm in the practice case, and then I'm gonna give  this one over here, auto layout grid, okay, like   this. And then I'm going to change it to columns  like this, okay? And then I'm going to give here   how many pixels of margin 50 because we found out  to the rectangle that it is 50 pixels of margin,   okay, like that. And let's actually see what  we have specified in the grid like this. Okay.   And 30 pixels of gutter, Okay, there we go like  that 30 pixels over here, if you hold shift and   up, if you hold shift and then press the up arrow  bottom, then it's gonna change 10 scale at a time   like this look, it is 20 3040 5060 7080 while I'm  holding the shift, but if you release the shift,   and if you use the arrow sign, I mean up arrow  sign, then what do we have? This is gonna change   one pixel, one pixel like that is 80 pixels, okay?  8180 280-384-8586 is gonna take a lot of time,   so I'm going to use the shift, okay, I'm going  to jump to 36. And then I'm going to write 30.   We're here like this. There we go. Looks quite  perfect. Now, now we're gonna make this navbar   over here. Okay, in order to inspect this  element, what I'm going to do is I'm going to   select Ctrl on my keyboard, okay? And then I'm  gonna click over here like this. Now, you can   see all the properties over here, do you see this?  The color, the font family, the font, weight, font   size, etc. Okay, so look at this, it is 90 pixels.  So I'm going to copy this over here like this   Ctrl C, I'm going to come over here and then and  then hit t on your keyboard like this T, and then   click over here, okay, and write a do or sorry,  they do.io. And the font family is four pins,   which is correct over here, change it to semi  bold over here, like this, and then select 90   over here like this. 90, okay. Okay, I'm going to  keep it over here like this. Okay, do you see this   orange colored guides is going to snap like this,  okay, so you don't have to do anything manually.   Next thing that we have is home teachers contact  assigning options. By the way, you have this   dekstop typographic guide over here, which you can  follow. Okay, so this logo is 90 pixels over here,   the nav items, each of these nav  items are 47 pixels in size. Okay,   so I'm going to come over here, I'm going  to hit t on my keyboard like this T,   click, and I'm going to right  put them over here, okay,   same thing, I'm going to copy it four times,  like this 123, and then four. Okay, I'm going   to write over here, teachers. And I'm gonna write  over here, contact us. And over here, signing,   we also need to change the form way,  we also need to change the font weight,   in order to inspect the font weight, I'm gonna  come over here on the original design. And then   I'm gonna click Ctrl. on my keyboard, click like  this, look at this, we have regular and 47 pixels,   also the font size, we have regular font weight,  47 pixels, font size, and look at this, the font   families revolt, okay, so I'm going to come over  here, like this, and I'm going to select all of   them together, how will I do this, look at that,  I'm gonna drag all of them together like this,   select all of them together like this. And  I'm going to right over here, 47, okay, Enter.   And then I'm going to write regular over here  like this, look at that. And then I'm going   to right over here Roboto, because the font  is rowboat over there on the original design   room for two, there we go. Now the next thing that  I'm going to do is I'm going to select all of them   together like this, and then shift a or what I can  do is I'm going to right, I'm going to right click   over here and then add auto layout. Or you can  also do it by using the shortcut shift plus a,   I'm going to do it over here like this. Alright.  Now I'm going to click this over here, because it   should be on the horizontal line like this, look  at that, there we go. And then I'm going to click   this over here. And I'm going to select this so  that it always I mean, all the text should remain   at the center. We're here, both horizontally  and vertically inside this frame, like this,   look at that. And now the next thing that I'm  going to do is I'm going to snap it to this side   over here of my great lines, okay, like that,  look at that. There we go. It snaps like this.   All right now. Now if we look at the original  design over here, okay, if I select this over   here, by double clicking over here like this,  then you can see that we have 50 pixels of gap,   which means that it should be 50 pixels of gap as  well, between that between the nav items. So I'm   going to click this over here like this, and it is  set to 93. So I'm going to change it to 50 pixels.   There we go. I'm gonna start I'm going to snap  it on the grid lines over here like this again,   and what I'm gonna do is I'm going to select  both the logo and the nav items like this.   Oh, by the way, you should change the home text  to medium Okay, you're gonna click this over here   and then from regular to medium like this, okay,  because in the original design over here, it is   said to medium as well because this is the current  design. Alright then. So I'm going to click both   of them together like this and then shift plus a.  Now look at that, whenever items are shifted at   the top in order to bring it at the very middle at  the very center. What I'm going to do is I'm going   to click this over here Okay, and then select this  over here. Now look, it looks exactly carbon copy   of the original document. original design. Now  look at this over here on the original design,   we Have this rectangle over here, okay? I  mean underline over here, how do we recreate   this? Okay, follow along with me. Okay, so I'm  gonna click this over here and then I'm gonna   lock it, I'm going to lock my content like this.  Okay, I'm going to zoom in over here like this,   I'm going to select the Rectangle Tool by  pressing the R button on my keyboard are   and then I'm going to select, I mean, I'm  going to make a rectangle over here like this.   I'm going to resize it like this so that I can  see the orange guides over here. Okay, the orange   guides are snapping like this, look at that, I'm  gonna change it like this are seven, seven pixels   in height, and 126 pixels in width. Okay, now I'm  going to change the corner radius like this, I'm   gonna write 10 over here. Okay, there we go. And  in order to change the color, what I'm going to do   is I'm gonna select this, okay, while selecting  that, look at this color palette over here. Okay,   I'm going to select this color from here,  and then this eye button over here, okay,   like that. And then I'm going to select this  one, look at that, I have successfully changed   the color and also made this underline I'm going  now items, there we go, it looks quite the same as   this one. Now the next thing that we need is the  image, this asset over here. Okay, so, so so what   we're gonna do is we're gonna come to this assets  page over here, okay, and then look at this, we   have the asset over here. So what I'm going to do  is I'm gonna select this and then press the Alt,   key word, press the Alt key on my keyboard like  this, and then I'm going to drag it like hit,   I'm going to drag it like this over here. And  I'm going to right click over here and then   move to page dekstop. Like this, then is  gonna send me to the next page over here,   what you actually need to search where the asset  has moved to, okay, by zooming out like this,   and there we go, we have our asset over  here like this. Okay, now look at this,   we have some unnecessary gap around our  illustration. Just look at that, too. Okay,   so I'm going to select this over here. Now look  at all of these files over here. Do you see this   on welcome number two, this is a frame. Okay, so  look at this, we have so many vectors over here,   I'm going to select the very last one like this,  this one, okay, I'm going to select the very last   one over here. And then what I'm going to do is  I'm going to literally delete this from here,   delete. Now look at that, that whitespace went  away, I'm gonna select this text over here, okay,   I mean, I'm gonna select the whole frame, like  this. Now, look, we still have some gaps around   our illustration. Now, what you're gonna do is  you're gonna select this over here, you see this,   okay? Like this, and then select group over here.  Now look, all the whitespace went away like that.   So I'm going to bring it over here like this.  Now the next thing that we're going to do is   we're going to copy the width and height of this  image, okay, by double clicking over here. Now, do   you see this. So the first thing that we can do is  we can either copy both of them together and then   paste them on this illustration one by one. But  if you want to save some, a little bit of time,   what you can do is you can just select this one,  and then copy the only the width, okay? Ctrl C,   and then you select this one, and then you click  this constraints proportion, okay, like this,   and then paste it over here like this. Now, what  it will do is it's gonna scale our illustration,   proportionately, it is going to  follow the proportional measurement.   And also is going to change our height  as well according to the proportional   measurement. So these are I'm going to click  into like this. There we go. Now look, it looks   as similar as this one, you see this. I'm keeping,  I'm keeping both of them on top of another. Look,   it looks quite the same. Okay, so I'm going to  bring it over here. And then I'm going to take   the help of this orange colored guide and snap  my image over here on my grids like that, look at   that. Alright, now regarding the text, how do we  write the text, okay, so I'm going to double click   over here and double click over here, again, like  this now is going to copy the text, okay? Ctrl C,   you don't have to write anything, okay? Just copy  the text. Okay, so I'm going to come over here and   then T, click over here, okay, Ctrl V. So I have  copied the text over here. And along with that,   it changed those these properties over here as  well. Alright, so I'm going to keep it over here   like this. And I'm going to come back over here  like this, double click over here. And if you want   to copy something quickly, what you're going to do  is you're going to double click over here, okay?   And then you're gonna hit alt, on your keyboard  out and then drag it over here like this, you're   gonna, it got copied very quickly like this. Now  regarding the button, how to create a button,   I'm going to use the auto layout, okay, so what  I'm going to do is I'm going to come over here and   then Firstly, I'm going to hit the T, okay? Click,  and I'm going to write logging. Okay. Sorry,   log in. Now let's see the properties of this text  over here. Okay. Ctrl click like this. 45 pixels.   Bold rowboat okay. So I'm gonna  write rowboat over here. Book door   and bowled over here. 45 here as well.  Enter. Now look what I'm gonna do. I'm   gonna click this over here and then right click  Add Auto Layout like this, look at that. Okay,   now we have it in visible background. So I'm going  to click it over here. And do you see this field   over here? I'm going to click this field.  I'm going to select this over here. Okay?   And do you see my color palette over here? This is  actually not complete black it is actually it has   a color. Okay, do you see this color over here,  it is this color. So I'm going to select this   again. And the field, I'm gonna select this one  and this eye button over here. And then I'm gonna   click over here like this, it got very dark. So  I'm going to double click over here on the text or   control, click like this, okay, and then this  is set to black, I'm going to select this and f,   f, f, f six times, or three times, you  can also read it three times f, f, f,   enter, look at that. We have white colored  text inside our black colored button. So I'm   going to click this over here. And I'm  going to set some border radius, okay?   I mean corner radius, let's say in pixels,  okay, let's actually see the original one,   it is actually 18 pixels, okay, and width is this  one. So I'm going to copy the width from here,   Ctrl C, and the height is 105 pixels, okay. And  I'm going to paste it over here, look at that,   you cannot actually change it over here. But in  this cases, what you can do is you can, you're   going to come over here and just drag it over  here like this a little bit, a little bit, not too   much. And you can see this, it got unlocked, and  the height is law. In order to unlock the type,   you're going to click over here like this, and  you're going to drag it like this. Look at that,   the height and width, both of them got unlocked.  Okay, so I'm going to pay the width over here.   Ctrl V, enter. Okay, don't worry, we're gonna  change the properties, okay, and the height   should be, wait a minute, it should be I guess,  70 to 105. Okay, we'll select this, and 105,   enter. Now, we need the text to be at the very  center, do you remember this property over here,   this little icon, I'm gonna select this, and  I'm gonna click this over here so that it gets   centered at the very middle, like this,  look at both horizontally and vertically.   We got our solution over here. Alright, so  I'm going to click the button over here,   and I'm going to right click, and I'm going to  replicate another model. How do I do this? All on   your keyboard and drag it like this, look at that.  And I'm gonna right over here, what? Come on,   tell me sign up. There's one. Okay. Wait a minute  sign up. Okay, so always, always turn this one on.   So that extra whitespace gets reduced. And the  bottom stays I'm in the bottom text remains at   the very center. Okay, so I'm going to click  it over here again, so that this is enabled,   okay, all the width is enabled. So what this does  is it removes all extra white spaces, so that your   button looks proportional aesthetic. So now look  at this, even if we have a buttons like this,   what we're going to do is we're going to use our  layout, okay, so I'm going to select both of them   together and shift plus a like this, look at that.  Okay, and then I'm going to click this over here,   and then center over here like this, so that it  always remains at the center. And look at this,   we also need to add some drop shadow to our  buttons. How do we do this, I'm going to click   it over here like this, and look at FX over here.  I'm gonna click it over here like this. Okay.   Now let's look at our original document, what is  the priority of our effect the drop shadow effect,   okay, so I'm going to select this button over  here like this, wait a minute, like this,   and then I'm going to select this drop shadow  over here. So they set to 10. On the x, y is 10.   And the blur is four over here. Okay, so I'm going  to come to this practice over here, and then I'm   gonna select the button, I'm gonna select this  drop shadow, I'm going to say they will have 10   like this, the blur is four, that's fine. And for  the wives should be 10, like this, there we go.   Now in order to transfer this blur radius to  this button over here, instead of doing it again,   instead of repeating the same thing, what you're  going to do is you're going to click over here,   double click over here, and then look at this,  I'm going to double click over here, and then   I'm going to right click over here and then copy,  paste. Okay, I'm going to copy the properties,   and I'm going to double click over here, and  right click, and then I'm going to paste the   properties over here like this, look at that,  I have successfully transferred the walk shadow   of the first button to the second button over  here like that we're gonna, this is how the copy   paste properties works. Okay, so far, so good. Now  let's look at the gap between the buttons on the   original document. Okay, so I'm gonna come over  here. Now, instead of looking at the oral layout,   what you can do is you can just select this  first second button over here, and then hold,   you hit all and wherever you place the mouse is  going to show that distance between that button   and the element like let's look at that. I'm going  to keep my mouse on the first button over here.   Let me show this to you again. Okay, so I'm going  to double click over here and double click again,   or just hit Ctrl on your keyboard and then  right click, left click sorry, like this. And   you're going to hit Alt on your keyboard,  okay, and you're going to place your mouse   on the first button over here now, look at this.  Let me actually zoom in, okay, look at this,   we have 53 pixels of gap between the first and  the second button. So I'm going to come over here,   as you remember that we have enable oral layout on  our buttons over here. So I'm going to click this   over here, and then I'm gonna come over here and  write 53 pixels of gap, okay, five, three, enter,   like that. Now, regarding the gap between our text  over here, and the text over here, I mean, the   first text and the second text, what you're going  to do is you're going to do the same thing, okay,   I'm going to come over here like this, I'm going  to Ctrl click like this, and then I'm going to hit   alt, on my keyboard, Alt, and then I'm gonna put  my mouse on this second test, we're gonna, we have   41 pixel, I can see 41 pixels of gap. So I'm going  to come over here. And instead of doing manually,   just select both of them together like this, and  shift plus a, and then you click this option.   And then you're going to do it like this.  Okay, you're gonna keep it in the middle,   middle left, like that. Okay, so how much was the  gap again? 41. Right? So I'm gonna come over here.   And do you see this option after clicking this  41, fix it like that. 41, enter, there we go.   Now let's look at the difference, I mean, the  distance between the buttons and the text,   okay, I'm going to select this button  over here. And then same process, okay,   all on your keyboard, and then select that text  over here like this, we've got 41 pixels as well.   So I'm going to come over here. And I'm going to  select this and a button like this, look at that,   and then shift plus a, now I'm going to write  41. Over here. And there we go. Look at that,   we have successfully copied the design, from the  main design to our practice case over here. Now we   actually need to align our content according  to these gaps and various properties, right,   so I'm going to click on here, okay, this block  over here, and then I'm gonna click Alt on my   keyboard, same process, right, so I'm gonna keep  the mouse at the bottom so that I can see the gap   between my screen and the content, we're gonna it  is 109 pixels over here, you see this 109 pixels.   So I'm gonna come back over here, click this and  Alt, I'm going to hit Alt on my keyboard, and then   I'm going to put my mouse over here like this,  look at that this is 200,000 pixels of gap between   this corner I'm in this window, and this content  over here. Okay, so what was the original one,   it was 109. So what I'm gonna do is I'm  gonna drag it at the bottom like this,   okay, and then I'm going to test it again,  camera, click this over here and all.   And then I'm gonna put my mouse over here. Look,  it is 124, which means that I have to go a little   bit below, like that. Okay, let's test again,  all 204. So I'm going to click this. And then   on it five, press the up arrow on my keyboard,  okay, on it for it is currently on 104. Okay,   100 506 789, like that. And I'm  gonna select this over here, and Alt,   on my keyboard, put my mouse over here, look  at this, this perfect 109 pixels over here,   regarding our image over here, let's fix that  as well. So I'm going to come over here and I'm   going to select this image over here by double  clicking over here. And I'm going to press Alt   on the keyboard, Alt, and then I'm going to put  the mouse over here. 167 pixels over here, okay,   so I'm going to come over here, back over  here and then drag it at the bottom, okay,   and then I'm gonna select old, look at 140 pixels,  okay? So I'm going to click this over here,   shift and up arrow shift up, so it's going to move  10 pixels, okay, so it's currently 150 161 234567,   I have pressed seven times my up arrow. Now look  at that. I'm going to click this over here. And   alt, I'm going to put my mouse over here like  that, because 167 pixels of gap between our image   I'm in illustration and the bottom screen. Now  we're going to the original design over here. Do   you see these lovely doodles over here? Do you see  this little flex over here, how to recreate them?   Let me show you. Okay, so I'm gonna zoom out  and I'm going to come to this assets page over   here. Okay. Now look, now look, I have actually  included this flex illustration over here, okay,   so I'm gonna leave this and I'm gonna copy this,  like this, Alt, drag like this, okay? Right click,   move page to desktop. Okay, so I'm gonna come  to next over here, zoom out and look at and look   where the file is. Okay, the file is over here. I  mean, that frame is over here. Okay? So I'm going   to click it over here like this. And I'm going to  bring it back over here like this. Wait a minute.   There we go. Now look, I'm going to  zoom in into the main file, okay?   Like this. Now look at that. We have this triangle  over here, circle over here, and then this wave   pattern over here, how to recreate that. So I'm  going to come to this flakes image over here.   And first of all, what was it triangle, okay, so  I'm gonna copy a triangle from here. Look at that.   We have a triangle over here. So I'm going to hit  Ctrl on my keyboard and then click over here. Like   this, okay that I have selected this Okay, so I'm  gonna right now I'm gonna hit the old keyboard,   copy. Okay, Alt, and then I'm gonna drag it from  here like that. Look at the deuces, you'll see   what is on my hand over here, I have copied it.  So I'm going to paste it over here directly on my   practice image over here, okay, like this,  I'm going to release my mouse, and then I'm   going to use the Alt key, there we go. Now the  next thing is, I have this circle over here, okay.   Now in order to make the circle, look at  the circle over here, I'm gonna select this,   control, click, and then alt, drag like this.  Okay, now, I'm going to come over here, and I'm   going to select this over here, and then we're  gonna enter, increase the size a little bit how   to do that, I'm going to hit k on my keyboard, and  then I'm going to drag it like this a little bit,   and then it's going to become a little bit bigger.  Okay, now, what is, what do we have, we have this   wave pattern over here. Okay, so I'm going to  come over here, and I'm gonna select this wave   over here. Now, it's, now look at this, this is a  little bit tricky, okay, so this wave is actually   multiple icons together, okay? If I control and  click over here, now look at this, this whole,   this whole wave doesn't get selected, okay, just  a single part gets selected. So in this case,   what should you do, you're gonna select, you're  gonna hit Ctrl, and shift both of them together,   okay, like this Ctrl, Shift, and then click like  this, click, click, click, click OK. And then   you're going to do what you're gonna do, you're  gonna press Ctrl G on your keyboard, which means   we're going to make it a group, or what you're  going to do is you're going to right click over   here, and then make it a group selection like  this, we're gonna, now this will behave like a   single element, instead of behaving like a  for individual, different elements. Okay,   now I'm gonna copy this from here, I'll click  OK. Now, I'm going to come back over here,   and I'm going to paste it over here, and then I'm  going to rotate it a little bit, okay, like that.   There we go. So it looks quite similar to this  one. Now I'm going to increase the gap between   them, like this, look at that. There we go. And,  and in order to change the color of this triangle   and his wave pattern, what you're gonna do is  you're gonna come over here on the main design,   Control, Shift, okay, click this one, and then  click this one, oh, sorry, you're gonna click on,   you're going to, you're going to click on here  first, okay, and then click this over here, that   eyedropper over here, and then you're gonna select  this one. Okay? So first of all, do I click this   over here, and then select this field over here,  then this eyedropper over here, okay, and then   you're gonna select this one, there we go. Look  at that, we have colored our flakes like that.   Okay, it looks quite similar to the original  design. This is our practice case. And this   is our design over here, look at that. Now, we  have a lot of flakes over here, error and our   image over here. And then we have a little bit  of over here. So I'm going to pause the video and   complete all of these doodles over here. In the  meantime, you do the same, you pause the video,   and you complete, you see the original file  over here. And then you make the same on   your practice case over here. Alright, so I'm  going to see you after a couple of minutes.   So we'll come back, I have completed all of  these doodles over here like this, look at that,   it looks quite the carbon copy of the original  design over here. Congratulations, we're done   creating our first web design. Now let's move on  to the next section. There's one over here. Okay,   we're gonna design this. So I'm gonna  come over here and create a frame F,   okay, and then next over here like this, look  at that, I have created this frame over here.   And then I'm going to come to this assets  over here. And let's select this one, okay,   this painter over here and then copy it from  here like this, and right click, send it to,   I mean, move to page, Dexter over here. Okay,  I'm going to come back to next over here.   And I'm going to search for the file. Where is  it? There is it we have our painter over here   like that guy, I'm gonna zoom in a little bit.  And the process is saying during the process,   you need to remove this white colored background.  So select this and look at this highlighted over   here. Okay, so I'm going to delete this vector  at the very bottom over here, right click left,   click over here, and then delete like that.  Look at that. And now we're going to select this   and then come over here on the frame selected to  group and it's going to remove all the unnecessary   whitespace. Okay, so I'm going to keep it over  here like that. Now I'm going to come over here,   and I'm going to inspect this element, what is it  by double. And now I'm going to come over here and   double click over here to inspect the element with  this width over here, 657. Click it over here,   Ctrl C, come back over here, like this,  click and then click this over here,   constraints proportions, okay, and then paste it  over here like this. Ctrl V, enter. There we go.   Like that. And I'm going to keep it at the center  like this and keep it at the center like this. Or   what you can do is you can just select this, Align  Horizontal Centers like this. Oh, sorry, not this.   One, this one Align Vertical fin just like this,  and it's gonna get snapped to the very center.   vertically. Okay? There we go. And regarding  this text over here, what I'm gonna do is I'm   gonna Ctrl click over here like this, and  then I'm going to hit Alt on my keyboard,   drag it like this, okay, that I, I'm going to  keep it over here like this. Okay? Same thing.   I'm going to do the same thing for this text  over here as well. Ctrl, click, and then hit out,   Alt drag, like this, look at that. The process  is saying, you're going to click over here and   then alt and then move your mouse to this first  text. Okay? How many space Do you see is a pixels,   okay, so I'm going to come over here and shift  plus a shift a like this. And I'm going to keep   it at the very middle over here like this, I'm  gonna click this, there we go. And it should be   how much gap 80 pixels, right? It is currently set  to 51 pixels. So write a like this, okay, enter.   There we go. And then I'm gonna come back to this  button over here. So I already have this button,   we already created the buttons. So I'm gonna  come over here and double click on this button,   double click on this button, that will click again  over here. Okay, so I'm gonna copy this button by   writing by hitting alt, and then drag like this.  Okay, I'm gonna keep it over here, raise it, and   I'm gonna change the text to get started. Okay,  like that, double click over here, get started.   All right now looks quite good. So what I'm going  to do is I'm going to click on this button over   here, and then Alt on my keyboard. And then I'm  going to put a mouse on this text over this,   how much gap Do we have, we have 80 pixels  of gap. So I'm going to come back over here   and give 80 pieces of gap as well. Okay,  so in order to do it quickly, I'm going   to click it over here like this shift plus a,  okay. And then I'm going to click over here,   and I'm going to keep it on the very middle like  this. And then I'm going to right at over here,   and this actually should set to 81  ad ended. There we go, we're done.   And regarding the flex, and regarding this little  flex over here, I'm going to pause the video and   completed, you do the thing, you pause the video  and create these flakes over here, as I have   showed you how to create these flakes. So then  I'm going to see you in a couple of minutes.   So far, so good, we actually forgot to include the  layout grid. So what I'm going to do is I'm going   to click over here and then layout grid enabled by  clicking it like this, okay. And then I'm going to   click over here and then change it to columns,  okay, sorry, not rows, columns, like this. And   I'm gonna set the margin to 50 pixels over here  like this, okay. And then gutter should be 30,   like this. All right. Now we're going to snap now  now we're going to snap the content to the very   right side over here like this. And then we're  going to snap this image, this illustration to the   very left side over here like this. Okay, there we  go. Looks quite good. We're done with this section   over here. Now I'm going to show you how you can  make cards. Now I'm going to show you how you can   make cards over here like this, okay, so I'm going  to create a frame over here, F, okay, and then   select this option over here. And then I'm going  to keep it side by side over here. All right,   now look at this over here. So you do manually.  So you do all of this works manually. Okay, I'm   just gonna copy and paste it over here. I'm just  going to show you how to create these cards. Okay,   so I'm going to copy from here like  this, and all drag it like this, okay.   And I'm gonna keep this LMS moving as long  as I didn't see that orange colored skies,   okay, like this. Look at that. You see the  orange juice, it's orange colored guys over   here like this, that I'm gonna release it right  now like this. Alright, then. So I'm gonna.   Now I'm going to do the same thing for  this video elements over here like this,   okay, including the button, Alt, drag like  this. Okay, I'm going to keep it over here.   Now, select the first frame, I  mean the original design, okay,   and see the grids like this. So I'm going  to click over here like this, wait a minute,   we have 77 pixels of margin and gutter tied  to pixels. So I'm going to click over here and   click the layout grid over here like this. So I  want to change it to columns over here, okay, so   the margin is 77 pixels, so 77 into like this, and  the gutter was how much let me actually inspect it   again, a 32. Okay, click it again. Click this 132  over here. Okay, wait a minute, 32 There we go.   And we should have how many columns,  three columns. Okay, click this,   three, enter. All right now. Now what you're  going to do is you're going to click over here   and remove this columns like this and double  click over here on the cards. Look at this.   Width and Height. Look at this one. Look at  the width and height of our card number one,   okay, this 400 in width by 633 in height. So I'm  going to come back over here and I'm going to   select a rectangle, right click on my keyboard,  okay, click over here like this, which should   be fine. 400 Okay, enter, and what should be  the height let's actually inspect like this   633. Okay, so click over here like this, right  633633, enter. There we go, we have our cards,   okay, I'm going to place it over here, like this  and water. And now what I'm going to do is I'm   going to remove the color you see this color  is dark gray color. Okay, so I'm gonna snap it   over here on my layout grid, okay. And then I'm  going to remove in order to remove the color, you   click this minus sign over here, like this. And in  order to see the rectangle, you click this stroke   over here, okay, and then select it to three  pictures like this, or perhaps even four to four,   enter, there we go. And now with this border  radius, we also have border radius around our   main design, okay, so I'm going to create, so  I'm going to create a border radius over here   by clicking over here like this. Wait a minute,  there we go. It should be 15 pixels. Okay? Look,   it looks quite good. And looks like the original  one as well. And I'm going to select this, and I'm   going to create two more copies, okay, Alt, drag,  like this. Do it again, Alt and drag like this.   There we go. I'm gonna give you the  top over here like this. I'm gonna   take it, I'm gonna take it off the top as well.  And look at this. I'm going to place it at the   Center for a grid like this, okay, like this,  wait a minute, like this. There we go. Now how   to place these images, Okay, come back to assets,  okay? You see these three images over here?   Let's copy them, okay, by selecting  them one by one, by selecting them all   by selecting all of them together, right Shift,  click, click on the name, click on the name,   okay, now out copy, like this out, drag over here  like this, okay, now, right click, move to page   desktop like this, okay, and go to next up, zoom  out and see where is it? Here is our image, okay,   click over here, click over here, click  over here like this, bring it over here.   Like this. And do you remember the  steps, you're gonna click over here. And   you're gonna scroll at the very bottom over here,  and remove this vector from here, okay, delete,   click here, click on this, click on this frame  over here, and then change it to group over here,   like this now is going to remove all  our extra additional white spaces, okay,   now drag it over here like this, come over here  on the main design, control, I mean, select   this one and look at this width and height, 359  Ctrl, this one and come over here, select this,   select this little constraint button over here,  like this, and paste it over here like this.   Ctrl V, enter. There we go. We have a little icon  over here, we can place it over here like this.   And you'll see this, we have a little part  over here. Do you see this part? We didn't   have this part over here. Okay, so in order to  remove that, we're going to come over here and   Ctrl, click like this and hit the Delete keyboard,  hit the delete key on your keyboard and it is   going to get vanished like that. Look at that.  There we go. Let's copy the name from here Ctrl,   click alt drag, like this, the same  process for the music and pharmacy as well.   Like that control, click alt drag over here like  this and do the same process. The same process   for this images over here. you pause the video,  take a minute and complete the process. Okay,   I'm going to come back in a minute. All right,  now I'm done doing the process. Now what we are   going to do is we're going to center our image  and the text at the very center of our card.   How do we do this, we're going to click  both the illustration and the chemistry   like this. And I'm going to shift plus a or click  this orange layout over here like this. Okay,   now look is gonna get at the very center. And  the next thing that you're gonna do is, you're   gonna click it over here like this, and click  it over here to keep it keep it at the center   both horizontally and vertically. Okay, like  this, look at that. Okay, and click it over here   again and remove all of this gap over here, get  zero like this, enter. Now what you're gonna do   is you're gonna copy this button from here, okay,  control, control, click over here, like this, and   alt drag, okay, place it over here like this.  Do the same for all the cards as well like this.   Now let's look at the gap between our button  and our text. Okay, so I'm going to come over   here and control click and hold, press the Alt  button on your keyboard and put your mouse on   this text over here. Now look, we have 19 pixels  of gap, okay, so I'm going to come back over here,   click this one and click this one by clicking my  shift key by clicking my shift key on my keyboard   like this. Shift plus a it should be 90 Okay,  I'm going to put 19 over here. And in order to   put this button on the very center, I'm going  to click this over here and click this. There we   go. Now click both of them together like this.  Now you're going to click and then all plus h,   which means that we're going to center both of  them horizontally and vertically together. So out   plus h, all plus h, all plus v like that, look at  that we have horizontally and vertically centered   both the card and the content. Okay, like that.  And I'm going to select both of them together.   And I can either group them together  in a group, or I can also use or allow,   so I'm going to just use the group, okay, Ctrl G,  like that. It became a small group over here. Now   you duplicate the same process and fix these cars  over here. Okay, I leave this to you. Do you see   this design over here, this is the same as number  one over here and number two over here. Okay,   so you're going to do this on your own. Also, I  believe that you can make this footer over here.   So I'm not doing this. I'm just giving this  for you. Now, let me show you how I made these   cards over here. Okay, so I'm going to come  back to my assets over here. And I'm going to   come to, let's say that I want to see like just  the first one, okay, I'm going to see like this,   and alt drag over here like this, okay,  right click, move to page dekstop. Okay,   like this, it moved to my desktop, let  me zoom out, here is my asset over here,   I'm going to keep it over here. Oh, by the  way, what you're gonna do is you're gonna   move this to the right by clicking  over here, Shift, click like this.   Okay, you're going to select all of them together  like this. And you're going to move it like this.   There we go, it got moved over here, like  this. And I'm going to come over here, and I'm   going to select my F on my keyboard, okay, F and  then I'm going to create this Dexter frame like   this, look at that, and I'm gonna drag it over  here like this. There we go. And regarding this,   and regarding the navbar, what I'm going to do is  I'm going to copy it from here, okay, and then I'm   going to paste it over here, like this out, and  then drag it over here like this. There we go.   But before that, we also need to enable  the layout grid like this control,   click this over here, and then layout  grid over here and change it to   columns, columns over here. And then what is the  margin? click over here and enable this over here   like this. Look at that. We have this column, grid  over column grid over here, select this over here,   and we have three columns. And how many margins  50 pixels of margin, okay, 70 pixels of gutter.   So come back over here, like this. Select  this over here, right through over here. Okay.   So how much was it 50 and 7050 pixels margin 70  pixels gunner, come back over here, and right   50. Wait a minute, 50 over here, and 70 gutter.  There we go. Okay, now, so I'm going to select   the first image over here, good double click  over here like this, double click over here,   double click again over here. Now keep  clicking, unless you do select the image, okay,   like this look. Now I have selected the image.  Look at that. I can see the width and height over   here as well. So I'm going to copy the width over  here like this Ctrl C. Now I'm going to come back   over here. Okay, I'm going to select my frame over  here you see this white space? How to remove that,   you're gonna click over here and convert it to a  group like this. Now look, we don't have any white   space. So click on here like this, and then enable  this one, okay, constraints property and then   pays the width over here like this. Ctrl V, enter.  There we go. We have our image over here. Okay,   now how do I know how did I do this circle  over here? Pretty straightforward, okay,   you're gonna see like this circle, why Ctrl. Click  like this. Now look at this, I have a circle of   198 by 198 pixels. Okay, so I'm going to click  my zero, I'm on my key on my keyboard like this,   enter a sorry, click. Now look at this. I have  this circle over here, like this constraints   properly and right 198 like this, 198, enter.  Okay, now what you're gonna do is you're gonna   keep it over here like this, look at that. In  case if the circle is something like, in case,   if the circle looks something like this,  wait a minute, let me actually show you.   In case the cycle looks something like this, what  you're gonna do is you're gonna right click on the   circle, Send to Back like that. Okay? And I'm  gonna keep it over here unless I don't see that   orange colored guide. Okay, look at that.  It's gonna be it should be at the very   center over here. Okay? If you don't see the  guys watching, we're gonna do is you're gonna   select both of them together and hit alt H, which  means center horizontally, like that. Now, you're   going to select both of them together. And then  do you see this option over here used as a mask.   I'm going to select this. Now look at that, I have  this option over here. Again, make a circle, okay,   zero on your keyboard, click over here, and then  use this 198 like this, tap. Sorry, enter like   this. Now, there we go. Now what you're gonna do  is you're gonna remove the field from here, do you   see this? It has a field, it is green color. Do  you see this gray color over here on our circle,   you're going to remove the circle, fill, and then  select the stroke over here and select three over   here like this, enter. Now what you're going to  do is you're going to bring it over here like   this. Yes. Do you see this over here, now bring  it over here like this. Now, if you if you move   the circle, if you try to move the circle like  this, you're gonna see orange colored Guide,   which will snap now what you're gonna do is you're  gonna select your circle, okay, control, click   like this, okay? Now keep moving your circle,  unless, as long as you don't see the orange   colored, orange colored Guide, which snaps at the  very center, we're here like this, look at that.   It is actually getting snapped over here.  the very center, we're here, look at that.   Okay, now what you're gonna do is you're  gonna select both of them together like this,   and Ctrl G. Okay, now look, it got fixed. Okay,  so we're done making this profile image over here.   Now, what you're gonna do is you're going to click  it over here, like this and drag it over here.   But before that, you need to make this car.  Okay, so how to make this car. So I'm gonna   double click over here and see these properties  look with is 399. Let's consider it 400. Okay,   so 400 or 400, which is a perfect  square. So I'm going to come over here,   on my keyboard, click over here, like this. And  what I'm going to write is 400, or 400. Okay,   I'm going to click this over here and write 400.  Over here, 400, Enter. And I'm going to remove   the field from here completely. Now let's  go actually see the main image Ctrl, click   like this, and look at this, we have our stroke  property of four and this color, okay, Ctrl C,   I'm going to copy this stroke color, like that  I'm going to see and then I'm going to select our   rectangle, okay, like this. If you don't see the  rectangle, what you're gonna do is you're gonna   select like this. Now look, I can see my invisible  rectangle, like this stroke over here, and basic   color, Control V, enter, and then I'm gonna  write three over here like this. There we go.   Now regarding the book, now regarding the  shadow watts, you're going to do is you're gonna   click over here, you can just copy and paste the  shadow or what you can do is you can select this   over here like this, and then click this FX over  here, okay, and drop shadow, right then over here,   and then on the y axis as well like this, enter.  Okay, now I'm going to remove the guides from here   by clicking this. Now you see this, we have a  little odd behavior over here, you see this,   we have white colored space over here that  is unexpected. So in order to remove that,   what you're gonna do is you're gonna click it over  here like this, wait a minute, we're gonna click   this rectangle over here, I mean square over here,  and then we're going to fill it with the color.   Okay, color off white, complete, pure white, okay,  fff. In turn, now look, the problem is solved.   Then what you're gonna do is you're gonna either  write the text over here or copy the text from   here, okay, control, click out, drag like this,  okay. And then I'm going to put my image over here   like this, you will see something like this, right  click, and bring it to front like this. Okay? Now   control. Now, select both of them together, like  this, and shift plus a, and then select this   option over here, up at the middle like this,  and select both of them together, shift plus a,   and then also not see shift plus a, sorry,  click both of them together, out V and alt H,   which is center, both horizontally and vertically.  Okay, then I'm going to make it a group control   g like that. There we go, we made ourselves a  card component over here along with the profile,   picture image. Now what you're gonna do is you're  going to replicate the same thing. So pause the   video and complete the process over here and  now and I'll be back after a while. Alright,   then we're done making our teachers page now just  copy this footer from here that you made earlier.   Okay, click over here, and then paste it  over here like this. There we go. Now look,   now look at these two pages over here, the Contact  Us page and the signup page over here, both of   them looks more or less the similar. I'm going to  show you how you can make this one the Contact Us   page. And you're going to make this on the signup  form page on your own. Sounds good. Now let's get   started. Now I'm going to now I'm going to zoom  out and I'm going to select this over here by   clicking and then Shift, click Shift, click  OK. I'm gonna keep it on the right side over   here like this. Now I'm going to zoom in over  here and select a new create a new frame, okay,   F and then desktop like this. There we go. And  I'm going to resize it a bit like this way. Wait   a minute. There we go. Now I'm going to copy  this. Now I'm going to copy this from here,   wait a minute, I'm going to select both of them  together and control like this. There we go.   And look, we are in the Contact Us page,  which means that we need to change this   underline. Okay, so I'm going to  come to this RTL design over here,   and I'm going to select this. And I'm going to  drag it over here. In this contact us page, okay.   There we go. And then I'm going to drag it  to cover the cover all the area like this.   And same thing for the teacher section as  well. You see this one over here. So when   we are on the signup page, this underline  should be on the signup page as well. Okay,   sounds good. Now I'm gonna come back over here.  Now I'm gonna just copy this text from here.   out, drag it over here like this. And here to keep  it at the very center, select both of them Ctrl G,   and then alt, H. Now look, it's going to  be at the very center for frame over here.   Now how did I make this icons along with  the address, phone number, etc. Now I'm   going to come back to my assets page over here,  and you see these images over here, this icon,   I'm going to copy this from here, okay, out and  then drag over here, okay? Then select both of the   all of them together, right click, move to page.  Next up, okay, so I'm going to come back next top,   zoom out and find there is my icons over here.  Okay, then I'm gonna bring it over here like this.   And I want to select the key on my keyboard,  okay, and then I'm going to resize it like this.   Okay, I'm going to make it a small like this, and  I'm going to drag it over here. Okay, I actually   need to make it a little bit more smaller. Wait  a minute. There we go. It looks quite good. And   let's actually make it. There we go. It looks  quite good. Okay. Now regarding the address, okay,   let's inspect what is the address, font size,  okay. Ctrl Click to do that we have 30 pixels,   font size, regular Poppins. Okay, so now let's  actually duplicate the same thing key, enter, ABC,   ABC at the rate gmail.com. Okay. Now, in order  to center the icon and the text both here, I   would vertically, select both of them together  and hit alt H. Now both of them are centered.   Now Ctrl G to log the position. Okay, now  I'm going to keep it over here like this. And   we're getting this one. Select again, t enter,  okay, 123456. Okay, now look what I do, okay,   select both of them together. And alt, h There  we go. By the way, I actually changed my mind,   instead of making a group, make it a  frame, okay, so click over here like this   Ctrl, Shift G to remove the group, okay, and  hit Shift plus a shift plus a like this, and   click this over here and put it at the very  center. We're here like this. Now coming back   over here, in let's inspect this one. What is  the gap between our text and the image over here,   okay, there's inspect by clicking on here and then  alt, hold your mouse over here. 31 pixels, okay,   so come back over here, click this right 31  over here, do you want enter, there we go.   Same thing goes for same thing goes for here  as well. Select both of them, shift plus a,   and click this over here is going to be 31 over  here. 31, enter. There we go. Give it over here   for now. And let's look at this one, it should be  ABC comma D, F, okay? So D click like this, A, B,   C comma D, E, F, okay. Select both of them  together like this shift plus a, give me the   center like this. There we go. And now select all  of them together like this. So they shift plus a   and then keep it at the center over here like  this in order to move it at the very center,   hit all plus h like that, change the gap a  little bit to let's say 180 pixels like this,   and click over here and again, do alt plus h  which is center horizontally. Or you can also   use this options over here as well. Alright,  so far, so good. Now let's make this input   fields. Okay. So let's inspect this one over here,  control click, so 416 pixels by 82 pixels. Okay,   so I'm going to come back over here like this.  hit F on your keyboard, sorry, on your keyboard   to make it rectangle, okay, like this. So it was  416 416, enter. The height was I actually forgot   sorry, it was 82. Okay, so I'm going to click it  over here like this, and eight over here, enter.   Then I'm going to remove this field by selecting  this minus over here again, minus and then   stroke plus 123. Okay, enter, then increase the  corner radius to 12 pixels. Okay, there we go, it   looks quite identical to this one. Now regarding  this text, how do we input the text? Okay,   so I'm going to come over here and inspect, okay?  Ctrl, enter. So we have 20 pixels of font size.   So I'm going to come over here and  right click and write your name,   and let dot dot dot dot like this. Okay? It  should be 20. So I just turned it over here.   And now let's center it over here. So select both  of them together and alt h are not all a sorry,   Alt v like this. Okay. Now I'm going to keep it  I'm going to keep the text sorry, not this one   in the text over here like this. There we go. It  looks quite good. And I'm going to come back over   here. And do you see this? It looks, this is the  original design, do you see this color over here?   In order to replicate the same? I'm going to  come to my original design over here. Okay,   I want to control click over here. And do you see  this transparency over here it is set to 100%. I   want to set it to 50%. Okay, control 50, enter,  there we go. We've replicated the same thing.   Now what you're gonna do is you're going to  click and select both of them, then Ctrl G,   I have made a group over here, okay? out, drag  like this, okay? And write your email over here.   Email over here, like like this. Okay, there we  go. Now, how do we make this, this text over here,   the same process, Okay, I'm gonna control click  over here and see if inspect the elements, okay,   for one for Y to 10 is the dimension over here.  So let's do it. So I'm gonna click over here and   copy it, like this over here, like this. And I'm  just gonna simply drag it over here like this.   There we go. And I'm going to click over  here and Ctrl Shift G to release the   grouping. Like that. I'm going to right over  here, your message here. message here. Okay,   now I'm going to select this option over here,  do you see this option, or width? There we go.   And I'm going to keep it over here like this. Then  Ctrl G to lock our positions. Alright, looks good.   Now let's see the spacing. Okay, I'm going  to click this first element, not this one,   and then hit Alt on your keyboard, move your  mouse. So from here to here it is 50. From   here to here it is how much 46 Okay, there's  duplicate the same, okay, it should be shift   plus a, and 46 over here, okay. And from here to  there, it should be within shift plus a, okay,   and then center it over here like this. It should  be 50. Okay, right 50 over here, like this. 50,   enter. So we have nailed our gaps. Okay, now  keep it at the very center, okay, like this,   Alt H, like that, and button. And regarding the  button, you make the bottom yourself. So I'm   leaving this signup form to you, this is the same  process as this one. Okay. This Contact Us form   and this one over here, this first page over here,  I really hope that you can do it on your own.   Congratulation guys, we have successfully  completed the web design for the next version.   Now we're going to create the design for the  mobile version, the mobile design is over here   on this page over here, why don't we if you can  recall, I have created these two pages over here,   the laptop and the tablet version over here.  Along with that, I have also included the style   guides over here, I mean, the typography guides  over here, so that you can practice on your own   at your house. This is your homework. So I'm  going to come back move version over here and   then I'm gonna show you how I made this design  over here. Okay, so let's get started. Alright,   the first things first, I'm going to move  all of these elements all the way right side,   so that I can create new frames, okay, so I'm  going to select all of them together like this,   okay, like that. And then I'm going to  move it by clicking over here and then drag   dragging over here like this. Alright, there  we go. Now I'm going to zoom in here over here   like this. Now I'm going to click the F on my  keyboard like this, and then I'm going to select   this phone option over here and then I'm and then  I'm gonna click this over here, iPhone 11 Pro Max,   like this. There we go. We have our frame over  here, and then I'm going to align it like this   according to this frame. And then I'm going to  select this one rjL one, okay, like this. And   then I'm going to look at the border radius over  here. I mean corner. Yes, it is set to 40 pixels,   okay? So I'm going to take this over here, and  I'm going to say over here how much 40 like this,   okay, enter. Now let's make this navbar over here,  you see this one? Okay, so I'm gonna Ctrl click   on this logo over here and see its properties.  It is set to semi bold Poppins font family and   font sizes, 48 pixels over here, okay? So I'm  going to come back over here, okay. Click on this   hc t on my keyboard and click OK. So I'm  going to write a do sorry, a Jew dot Pio,   like this and is also and then I'm going to change  the settings to for gate over here. Like This   semi bald and then Poppins. Alright, looks good.  I'm going to keep it over here like this. There we   go. Now, how do you create this hamburger menu  icon over here? Okay, so you have two options,   you can manually create that. Or what you  can do is you can download it from somewhere,   I mean, download the icon from some website,  like freepik, and many others. Alright, today,   I'm going to show you manually how to create this  hamburger menu icon. So let's get started. Okay,   so I'm going to first of all, I'm going to  inspect this element, okay. Ctrl, click like this,   and then I'm going to see it properly. So  how much is it set? width is 30 pixels,   and the height is four pixels. All right? So  I'm going to come over here like this. And   I'm going to draw a what rectangle Okay, on my  keyboard and then drag it like this. All right,   I'm going to right over hit 30. And what was the  height, it was four, four, enter, there we go.   Now I'm going to say to which color Tell me not  black, it is this color, I'm going to come to   this Dexter option over here. And I'm going to  come to my color palette over here you see this?   This color over here. Okay, so I'm going to  click it over here and copy it like this.   Alright, so I'm going to go back to the mobile  version. And I'm going to come over here, and   I'm going to paste it over here like this on this  section, okay? Ctrl V, enter. Oh, now I'm going to   create it three times, okay, I will replicate  it three times. Okay, one. So how I did this,   okay, let me show you control that, first of all,  you're going to hit Alt on your keyboard, okay,   and then drag your mouse like this. Okay, there  we go. And then do the same thing again, like   this alternate keyboard and drag. There we go. Now  let's come to the original one over here. And what   you're going to do is you're going to Ctrl on your  keyboard and click like this, okay, now hit Alt on   your keyboard, and then move your mouse to this  portion over here, I'm in the second line, okay,   so that you can see the gap between the first and  the second line is how much five pixels, okay.   So I'm going to come over here. And what I'm  going to do is I'm gonna multi select all of   them like this, okay, and shift plus a, now send  rate like this. And then I'm gonna click it over   here and you see this gap properly. I'm gonna say  two, five, enter, there we go. All set. Now what   you're gonna do is you're gonna center both the  logo and the icon, horizontally, okay? select both   of them together, like this, and shift plus a. Now  look, the icon jumped at the very top. Let's fix   that by clicking this over here and keep it at the  very center horizontally like this. There we go.   Now let's come to the origin document  over here and click this. Okay,   now let's see its layout. Great. Okay, so I'm  gonna click this icon over here like this. And   then I want to inspect this one, okay? It has  how many columns, one column margin is 20 pixels.   Now, let's recreate the same Okay, so I'm going  to click over here like this, and click this.   Okay. Layout grid. There we go. And I'm going to  change it to what columns and then one over here   and how much is the margin? 20 margin. Okay, there  we go. Now, what you're gonna do is you're gonna,   I mean, we're gonna lie it over here, okay? I  mean, the logo and the hamburger icon, okay, so   we need to increase the gap so that we can  stretch it, I will stretch the icon to the VA,   right on my, on our layout grid. Okay,  like this. We're gonna. Okay, there we go.   Looks good. Now, I'm gonna  come back to the Wait a minute.   Yeah, it looks good. Now I'm gonna come back  over here, click this, okay. And now look,   what I do. I'm going to select the Alt  on my keyboard after clicking this nav   bar over here, and then all on my keyboard. And  I'm going to put my mouse on this screen over   here so that I can see the gap between the screen  and my content. Okay? It is 19 pixel over here,   and 10 pixel at the top. If I come over here is  going to be the same, I guess no strange. Okay.   So I'm going to keep 19 over here. Okay, so how  do I do that? countries that, let's see if it is   okay or not. Okay, so I'm going to click this one,  almost on my keyboard and then put my mouse over   here, this 20 over here. And over here it is how  much 21. So there is one pixel difference, okay?   Not big difference. So let's actually increase  one pixel over here, click this one, and then   come over here and just increase one. How do you  do this, click the up arrow sign on your keyboard,   okay, like this. And then the problem is fixed.  Now let's inspect, okay, so click this over here,   altering your keyboard, put your mouse over  here, so it is 20 over here and on this side,   out, and then look at this 20 over here  as well, but at the top it is how much   nine. So move it a little bit, just what  one pixel Okay, so click this and then   down arrow on your keyboard, down like this. Now  let's inspect alternative keyboard. Keep it over   here. We're going to stand 2020 this symetrical  Alright, looks good. Now. Regarding the image,   how do we work with this same thing, come  to assets over here and look at this one,   okay? Click on here, Alt on your keyboard,  drag over here like this, okay? Right click,   move to page, what mobile. Alright, so zoom  out a little bit so that you can see where   our asset got transferred, okay, so it is  transferred over here, bring it over here, like   this drill is the same, okay, you're gonna double  click over here, or what you can do is you can   just click on here or not here, sorry, over here,  and you're going to select, I mean, you see all   of this vector gets selected, okay, just select  the very last one, okay, there's one, and Delete   on your keyboard. Like this, it got deleted, and  look at this white space. If I click this name   over here, you see this unnecessary white space.  In order to remove them. Click this frame over   here as a group. There we go. All our unnecessary  work split whitespaces went away. So I'm going to   keep it over here. Look, it's very big. Okay, so  we need to resize it rescale. Either you can hit   K, either you can hit k on your keyboard, or just  hit shift on your keyboard and just drag it over   here like this. Alright, like this. Let's do it  manually instead of copying the properties from   here. Okay, let's manually shift, hold shift  on your keyboard and drag like this. Again,   it's gonna resize proportionately legs. Okay,  now, you're gonna follow the orange right? Now   you're going to follow the orange guides over  here, you see this orange guides resuming. You   can see the orange colored guides, okay, you see  these guides, you see that? It's snapping. Okay,   so I'm going to stretch it till my layout grid  over here. Okay, there we go. Boom. Notice inspect   the gap between our nav item, I mean, nav bar and  our image, okay, on the original document, click   this alternate keyboard and put it over here.  47. So click this alternate keyboard over here.   So 36 point 71. So what was this? 47? Okay, so  I went to, sorry, which is over here, let's see.   This must get click over here and all to put it  over here is 58. Okay, it should be 47. So shift   plus up. Let's see how much is that we have moved  10 pixel up. So out on your keyboard, this 48 so   it was 47. So click it, click again and put it in,  press up arrow sign one thing like this. Now look,   it's equal measurement. Alright. And regarding  this flakes over here, you see this little flakes.   Okay? You want to put them on your own. Okay, so  I'm going to leave it as it is, because I showed   you how to recreate this doodles over here, this  flakes over here, okay, what you're gonna do is   you're gonna come to assets over here, okay? And  then you're gonna use this assets over here, okay?   All right, let's come back to the mobile over  here. Let's duplicate this text over here and   create the button. All right, now click  this altar on your keyboard and drag over   here like this. Okay. By the way, I also given  this chart over here, the typographic guide,   like what should be the size, font size of  the logo, and the large text, small text, size   button, etc. so that you can make all  elements with accurate calculations. Okay?   So zoom out and come over here. Alright, so what  we are going to do is we're going to copy this   over here as well. Okay? Like this, click  over here, Alt, drag like this. All right,   there we go. Now let's see how to create this  button over here. Okay, the same thing, okay,   what you're gonna do is you're gonna hit t on your  keyboard, okay, then, click like this. Now you're   gonna write log in like this. Okay, now come over  here and inspect the original document, click,   hit Ctrl. And then take a look, we have font size  of 24, remoto. Both. All right, so come over here,   right 24 Robo Joe, and then it should be how much  Bose There we go. And we're gonna change the color   to white because it is because the original one  is white in color. All right, like this F F F   three times, all right, six times, Okay, it looks  invisible. Now what you're gonna do is you're   gonna hit Shift plus a on your keyboard and make  all the way up like the shift plus eight. Okay?   In case you can't find your invisible button over  here, do this. Okay, if you select like this, then   you can select your button. All right. Now come  at the bottom over here and hit fill, and fill it   with a color black 000, enter. There we go. Now  we can see our button. Okay, so come over here,   click. I'm in control, click, look at the height.  It is 55.41. Let's consider it 55 and the width   is 374 which is I will which stretches from  the very left to the very right to all layers.   Great. So what is the border? Yes. 9.49. Okay,  so click over here, right the border. Yeah,   I'm in corner. Yes. 9.49. All right, there we go.  Now the height is how much 55. Look at this, the   height and the width is locked in order, unlock  it, just come over here and drag it a little bit   over here, like this resize a little bit over  here, the height gets unlocked. And do the same   over here a little bit over here, the width gets  unlocked as well. All right, now in order to,   if you notice carefully that you can see that  the text is not at the very center have a button,   how to do it, just click over here, center like  this both horizontally and vertically. Okay,   now the height of the button should be 55,  enter, and the width, instead of doing it   manually, instead of doing it over here, directly,  just put it over here like this, and then drag   like this, okay? extend till the end over here  like this. Okay, there we go. Now, copy the button   over here like this. All right, now control,  click, double click over here and then sign up.   There we go. And then what you're gonna  do is you're gonna click both of them,   then hit Shift plus a, and now sending the  button both horizontally and vertically together   like this. Alright, now let's inspect the gap  between our first and the second button. Okay,   click, sorry, control, click, control, click on  the original button, and then out, hold your mouse   over here how much it is 17 pixels of gap, okay,  so come over here. And click this and it should be   1717. There we go. All right, now looks good. Now  I'm gonna remove the layout grid from here like   this. Okay, along with that, remove the layout  grid of the original document as well look at   that it looks symmetrical, identical, except the  flex over here, okay, except this flex over here,   because I have kept this for you, so that you can  do it on your own. Alright, now look at the second   frame over here, this is the same as the first  one, okay, so what you have to do is you're gonna   click f4 on your keyboard, then phone camera phone  option, and then click iPhone 11 Pro max like   this, and you're going to get this frame over here  like this, resize it, you don't have to resize it   because it's perfect measurement. And then what  you're going to do is you're going to come to this   over here, okay, click over here, Alt, drag  like this, and then paste over here like this.   There we go. And you're getting this one,  inspect the corner yet is 40 pixels. So   40 pixel over here as well for zero, enter, and  we're getting layer grid, click over here, okay,   sorry, two columns. 20 off gap between the  pixel gap, column count should be one. Okay,   and there we go. And now what you're gonna do  is you're gonna center it over here like this,   at the very center vertically, or what you can  do is, you can just keep it over here, like this,   and just click it and alt H, which means center  horizon view like this, or what do you have the,   or you also have this option over here, you see  this, we have the Align Horizontal Centers, okay,   I'm going to keep it over here like this, click it  over here, like this, look at that it got centered   horizontally. All right, so I'm gonna keep it  over here like this. aggroing. Good, according   to our design over here. All right, now I'm  going to leave this entire design on your hands   because I truly believe that you can do it on  your own because this one is similar to this   one over here, the first frame over here, okay,  so I'm not doing this, you're gonna do it, okay,   including this little doodles over here. Okay,  so you're gonna do this on your own as well.   Now we're gonna move on to the next section over  here, you see this? We're gonna make cards over   here on our offered courses section. Okay,  so how do we do this? Okay, so first of all,   create a frame over here F on your keyboard,  okay, and then select this iPhone 11 Pro Max,   okay, so I need over here like this. I mean,  with the original document at the top like this,   look at that. We have our orange color guides over  here. Okay, now click on this, select the corner   radius, corner radius to 40 over here, and there  we go. And now you can stretch it till over here,   unless as long as it doesn't snap over here at the  bottom, you can see the orange colored guides. If   I zoom in a little bit over here, you can see  the orange colored guides, Okay, there we go.   I mean, it's gonna snap, okay, you can feel it,  that it aligned together. Now what you're gonna   do is you right click our frame over here  by selecting this name over here and then   layout grid, right click on this and select  columns, just one column, enter. All right,   now click on the original document over here and  select this. Not this. Sorry, this one. Okay,   let's, let's inspect how much margin do we have?  We have 20 pixels of margin. Okay, so this one,   on our practice case, it should be 20 pixels of  margin as well. So click OK. So So click over here   and select training. Okay, enter. There we go. Now  regarding this nav bar, you know the drill, right?   Just copy it from here, like this out and then  drag over here like this. There we go. And in   order to center this nav bar horizontally, what  you're gonna do you remember, Alt H, or select any   one, or select this option over here. Okay? All  right, looks good. Keep it over here at the top.   Okay, now in order to complete these designs  very quickly, what you're going to do is you're   going to come to this Dexter option over here,  okay? And this is our offered courses. This is   the original one. And this is the practice case  over here. Okay, so I'm going to click over here   and and then select Alt on my keyboard and drag  over here like this. All right, look at that. I   have successfully copied it. And now right click,  move to page what mobile Alright, come to mobile,   zoom out to find the frame. That is it, we have  our there is it, we have our frame over here. drag   it over here like this, again, this corner. And  now what you're gonna do is you're gonna see like   this text over here, along with the underline,  okay? Copy, throw out, drag like this. All right,   there we go. And now what you're gonna do is  you're gonna shift and then resize like this.   Or what you can do, you can just even hit k  on your keyboard and drag like this. Alright?   Now look at this, it is getting small  proportionality. Okay, now I'm going to keep   it over here, you can take the help of the orange  color guys like this, okay? Or what you can do is   you can just keep it over here as it is and  click it, Alt H or select this option, okay?   align content horizontally. There we go. And let's  inspect the gap between this one and the left   nav bar, like this out and put your mouse over  here. 38 pixels, okay? click over here, alternate   keyboard, put it over here, this 59. Okay, so  what you have to do is you have to just give it   over here, and let's inspect right now, alternate  keyboard, select 40. Okay, so I'm going to click   here, and then press the up arrow two times one,  two. Now it's 38. accurate. All right, looks good.   If we're going to if we're going to recall,  we made this card on the desktop version,   okay? Although that that now in order to make  the design for the mobile version, very quickly,   we're going to take the help of oral layout. So  what we're gonna do is, we're gonna select all   our cards together like this, okay? And then shift  plus a like this. Do you see this option over here   is this called the oral l? Do you see this  little button over here? Oh, by the way,   you're going to click this over here, and  then center both horizontally and vertically,   like this. And now you'll see this little  button over here, this is activated, which is,   which is align content horizontally. Now we're  going to select align content vertically like   this, you see this button over here, click  this Now look, it made us content for our   mobile version, okay, so I'm going to drag from  here to here like this, okay. And then I'm gonna,   what I'm gonna do is I'm gonna keep it I will  align without layout grid over here, like this,   right now when I select key on my keyboard,  or hold, shift, and then resize your   cards like this, as long as it doesn't snap to  our layout. Great on the right, okay, like this.   There we go. It looks quite good, I guess,  click over here and put it at the top like this.   There we go. Okay, now it looks quite big compared  to our design over here. So in order to adjust   the settings, what we're going to do is we're  going to click over here, double click Okay,   and then double click again, double click  again, as long as we don't see this blue colored   lines, our lower image, okay, look at the size of  the image. Okay, you see this, just copy the width   Ctrl C. And now come over here, double click,  double click, double click as long as you don't   see the blue colored lines around our image, okay.  So I have selected this one, select this option,   okay, constraints properly, then paste the  width over here. Ctrl V, enter. There we go.   Now let's change the text. What is the font size  of this text? Okay. Ctrl. Click. Now look at this,   it is 50.7 just consider it 50 pixels, okay,  Ctrl, click, select 255 zero, enter. There we go.   And yeah, select this option over here as well  or a width. So what it will do, let me show   you the control set. What it will do you see this  extra gap over here is going to remove that extra   extra gap so that we can do our measurements  accordingly. I mean, correctly. Okay,   so click this over here now. Now you can see  that the extra gap got removed. Okay, like that.   There we go. And we're getting the button lis  instructed what what is the font size model?   Okay. Ctrl click like this. 24 pixels. Okay.  Ctrl click. So it took You fall over here,   Enter. And then look at this, we have so many gaps  over here. Okay, in order to remove those gaps,   just click this over here or  Oh, wait like this. There we go.   Alright, so far, so good. Now look at this,  we have our content on the very left side,   so we need to center it both horizontally and  vertically. And now let's look at our original   category here. Okay, so double click over  here and look at this height over here. Okay,   so I'm going to copy the height of a Ctrl C,  and then come to our practice case over here,   okay, double click over here and then paste  it over here like this, okay? Ctrl V, enter.   Alright, now, so far, so good. Now we need  to center our content both horizontally and   vertically inside our card over here. Okay, so how  do we do this, first of all, we're gonna on frame   or frame, okay, like this, I'm going to click  over here, and then click this over here, okay,   from frame, we're going to select it to group like  this, okay, and then Ctrl Shift G to remove that   group like this. Now, it doesn't have any oral  layout over here, it is just a single plane card,   I look at this over here, it is also behaving  like a group. So Ctrl, Shift G, remove that   group as well. Alright, now the next thing  that you're going to do is click this content   over here and this button over here as well.  Okay, both of them and then shift plus eight,   to put it inside a frame, okay, and then select  it to zero, like this, and let's enter. All right,   zero over here as well, there we go. It is  removing the extra whitespace from our content,   okay. And now what you're going to  do is you're gonna select both the   card and our content like this, okay? And  then shift plus a, okay, shift a, and then   centric, both horizontal and vertical. Okay,  you're gonna select this button over here,   like this, and then select this button over here,  or what you can do is you can just select alt, H,   and alt v on your keyboard like this look, or  v h like this. There we go. Now look at this.   We have so many gaps over here, but we have  a minimum gap over here. Okay, so how do we   remove those gaps? Okay, so let's inspect this  button over here, okay? Ctrl, click like this,   look at this properties, okay? Look at the  height, it is 55 pixels, okay, so I'm going to   come back over here and control click like this,  and set the height to how much it is set to 62. So   and it is also locked. So what you're going to  do is you're going to select v on your keyboard   and drag it a little bit up, okay. And now set  it to 55 pixels. Great. 55, enter, there we go.   Now, this button is not at the very center,  I mean, this text is not at the very center,   what you're going to do is you're going to click  this over here, okay. And let's send it over here   like this. There we go, boom. But still, you  have so many gaps in our content, I get it. So   let's inspect. Okay, so click over here. And  look at this, we have 7.66 pixels of gap. Okay,   so let's, let's see, to see, enter, there we  go. Now select both of them together again,   and alt v alt h to sender both of them both  horizontally and vertically. There we go.   Our bottom looks exactly the carbon copy of the  original one over here. Now, I'm going to leave   the rest of these cards, you see this card  over here, and this card over here as well.   I am leaving this to you fix them. Along with  that this design over here you see this design,   this is similar to our design, I mean frame number  one, this one and frame number two over here   as well. So do it on your own. And yeah, you're  gonna do is footer over here as well on your own.   Now we're gonna make the teachers page. Okay,  this one. All right, so zoom out a little bit   and delete this one from here, delete. All right,  and then we're going to move it to the right side.   Select properly like this. Alright, so  right so over here like this. There we go.   And now come to the next version  over here and you see this   page over here, the original document this  one, so I'm going to copy it from here, okay,   the original design, okay, click on the name over  here, Dexter for all on your keyboard and drag it   over here like this. Alright, now right click,  move to page which one mobile like this, okay,   now come to the mobile version, zoom up, find it.  Where is it here Is it okay? So I'm going to keep   it over here at the top, and I'm going to move  it. Both of them live in all these design building   designs over here on the very right over here.  Okay, let's zoom in over here. Click F on your   keyboard, select the iPhone 11 Pro max like this,  okay, drag it over here like this. And said the   border radius, I mean corner yes to 40 over here  like this, enter. Now select this layout grid, say   two columns over here and then count will be one  enter. So the margin 20 pixels over here, enter.   All right now just just replicate the nav bar by  Alt on your keyboard. drag it over here like this.   All right. Then release it like this and then alt  h to center heart, the center horizontally like   this. Okay, there we go. So far, so good. Now look  at this desktop design over here, okay? So out,   drag like this, okay, keep it over here, then  and then hit k on your keyboard, okay? Okay,   and then drag it like this, as long as it  doesn't get shrunk like this a bit like this one,   the original design. Let's make it, let's make  it a little bit smaller like this, and then   click on here, select this, or Alt h on your  keyboard. There we go. Keep it a little bit up   like this. Alright, looks good. And now select  your frame over here like this, and then   hit v on your keyboard, okay, V, and then  drag it to the very end over here like this.   There we go. So far, so good. Now we're  going to replicate the cards over here. Okay,   so how many cards? Do we have?  123? Sorry, 12345, the five cards?   Not six cards as the original design on that on  the text version. Okay, so. So do you recall that   how we made these cards over here? Okay. So what  will we use over here, the same as this one over   here, you see this design over here, we made this,  the same as this, we're gonna use the auto layout.   How do I do this, like this? Look at look, follow  me. Okay, I'm gonna select all my cars over here,   like this shift plus a, or right click and add  auto layout like this. Look at this little button   over here. Okay? It is horizontal, say to vertical  like this look, it became designed for our mobile   version, you see this? Okay, I'm going to  keep it over here like this. There we go.   Alright, and then I'm going to resize it by  hitting key on my keyboard and resizing like this.   As long as you see this one, as long as  this one, this line doesn't align with our   layout grid. Okay, like this. There we go. Oh.  And I'm gonna keep it over here like this. And   we're getting this cards over here. Same thing for  the same thing, obviously, all of them together,   and then shift plus a, and then click this over  here like this. All right, now keep it over here,   like this, and then resize it like this. Okay,  key on your keyboard, and then resize like this.   Actually, it is very big. So I'm going to keep  it over here like this. Now, what you're gonna   do is do remember how I resize this first frame  over here. Okay, on our offered courses section,   this one, do you remember how I resize this  card according to the original design, you're   gonna do the same thing over here. Okay, you're  gonna first or resize this card, and then this   two, and then you're going to resize these two  cards over here, and whether we don't need the   last one, okay, so like, we can easily I will, we  can delete this one, okay, like this still it, we   have two cards over here. Oh, by the way,  we can also place it over here like this,   there we go. Now, what you're gonna do is you're  gonna resize these cards, according to the   original file over here, I mean, the original  designer, I showed you how to do it right over   here, I showed you how to resize it according  to the original design. So do it on your own,   do this section on your own, because I truly  believe that you can do it. And regarding this   footer over here, you don't have to recreate it  again, because it is a component. I mean, this is   the original component over here, wait a minute,  this is the original component over here. And   this one, wait a second, this one is an instance  of the original document. Okay, so this is just   an instance. Okay, just copy it from here all  and then drag over here like this. There we go.   And if in case if we want to change something over  here, just changed the original document, okay,   just changed over here and everything, I will all  the children will get changed according to the   parent component. Okay. All right. Now let's look  how to make this contact us for Okay, there's one   over here. So we're going to create I mean, we're  gonna move this to the very right side like this,   select all of them together, and then drag to the  right side like this. There we go. And then come   over here and hit F on your keyboard F, you're  gonna click F on your keyboard and then select   this iPhone 11 Pro max like this, give it over  here. And what was the corner DSC room, we're   for the Texas So hey, 40 over here, okay. 40,  enter that oralia I mean layout grid over here,   say two columns over here, like this columns. And  let's set one, enter, and over here, right in the   basis of margin, there we go. Just copy the  nav bar from here because we made it once. All   right, and then what you're gonna write  is, what you're going to click is this one,   Align Horizontal Centers. There we go. Boom,  keep it up at the top like this. There we go.   Or you can just use your mouse and move it  like this. There we go. To beat over here,   and just copy this text from here. Click and then  drag like this. Alright, and in order Take it,   I mean, in order to keep it at the center of H on  your keyboard, Alt H, move it a little bit up like   this. And if you want accurate measurements, just  select this and also on your keyboard and drag,   keep your mouse over here, this 15 pixels, okay?  So I'm gonna keep, I'm going to click over here,   keep my mouse over here, like this is 30 pixels.  Okay, so let's move it a little bit up. So how to   do it, click over here and then hold shift  on your keyboard and press up like this   one, too. Okay, now let's inspect, click  over here, alternate keyboard, look,   it is 10 pixels of gap. So click over here  12345, I pressed five times the arrow down   button over like on my keyboard, like that.  Look at that is now accurate measurements.   All right, now copy this line from here as well  out, drag over here like this, okay. Then alt   h to center horizontal. That gives you the we're  here at the bottom of the get in touch text. All   right, now how to recreate them. Remember where  our assets it is over here on this assets page.   All right, not this one. This one over here. Wait  a second, this one. Okay. So I'm going to select   all of them together like this, and then out  drag like this. Then select all of them again,   right click move to page where Come on, tell me  it's mobile. So come to mobile over here, zoom   out to see where is it here Is it okay? I'm going  to select all of them together like this and then   select k on my keyboard and drag or select shift  on my keyboard, okay, and then drag like this. And   that is going to get resized like that. Okay, I  want to bring it over here like this, within that.   So it's quite big compared to this one.  You can, you can also inspect the icon   size like this control click like this,  you can see that it is with 50 pixels.   And the height is 38.09 pixels, okay? So you can  do that as well as what I'm going to just use my   Scale tool, okay, so I'm gonna select all of them  together and the hit key on my keyboard, and then   scale it down like this. There we go. All right,  now now what we're going to do is we're gonna   select this phone over here like this, okay, I  will, we're gonna make it horizontal like this.   Okay, now, let's copy the text from here,  okay, out, drag like this. Double click   out, drag like this, okay, or just click over  here, I'm in control, click over here and all,   no sorry, out, drag over here like this. Or  what you can do is just control click over here,   like this, and then alt, drag like this.  Alright, now what you're gonna do is look   at this very carefully. I'm going to select  both of them together and take the help of home   auto layout. Okay, the boss is over here, kick it  over here, like this, the plus thing. All right,   now keep it at the very center over here,  both the text and the icon like this. There   we go. Now let's keep a gap of 30 pixels,  okay? between our icon and the text. Okay,   the same thing for for here, shift a, click over  here and center it over here like this. All right.   Now, how much was the gap 30 pixels, okay, see,  like this curly, enter, go. The same over here,   shift a, how much 30, enter, see like this, keep  it at the very center. We're here. Okay? Now, so   far, so good. It looks like this one. Okay. Now,  now if you notice carefully, then you can see that   this text are not aligned to a single line. Okay,  so let me bring my ruler over here like this, like   clicking over here. And then rulers over here like  this. So I got my, so I got my ruler over here   that I'm going to click over here and then keep my  ruler over here like this. So I'm going to keep it   over here, okay, to this line. Now, if I zoom in,  then you can see that the text is over here, okay,   according to a ruler, and what this text does it  align with a ruler over here at the same time,   this text doesn't align with the ruler over  here. That's because the width of this icon   width of this icon and the width of this icon is  not the thing. So in this case, what you're gonna   do is you're gonna just remove that oralia How  to remove the auto layout, okay, click over here,   and select this group. And then what you're gonna  do is you're gonna click this and then Ctrl,   Shift g on your keyboard, remove that group. Now,  both of them behave like individual elements.   All right, same thing over here, remove  the frame to group and then Ctrl Shift key   to remove that group. Come over here. Select  this frame to group Okay, Ctrl Shift G, remove   that group. There we go. Now what you're gonna do  is select all the text over here like this, okay,   and then use auto layout shift plus a like this.  Now, our texts are at the very center here,   according to our what according to this ruler  over here, you see this ruler and you see this   continent we're here. Now if want to even  also use this one and keep it over here,   okay? On the left side of the horizontal line like  this. All right. Now regarding this icons over   here, you can do the same, you can just use auto  layout as well, by clicking all of them together,   I mean selecting all of them together and then  shift plus K. And then we need to keep it at   the center both horizontally and vertically. So  click over here and look like this. Alright, then,   so far, so good. Okay, now we're going to select  all of them together like this. Okay, and then   Ctrl G on your keyboard to lock the position. All  right, there we go. Look at that. It looks very   nice. Now click this original document over here  like this. Alright, and then alternate keyboard,   put your mouse over here like this, how much  is the gap between our address and this text?   46. There's duplicate the same as well. Click  over here and then keep it over here like this.   And the alternative would give it over here, how  much how much is this? 53 so you have to go How   much? Nine more steps? Okay, so he nine times the  up arrow sign, okay. 123456789. Now let's inspect   Okay, click on here, Alt n and then put your mouse  over here. 44. Wait a minute, it was how much?   Sorry. 46 Oh, sorry, I moved to pixel up. So I'm  gonna go to two pixels down. So click two times   the down arrow. Okay, one, two. Now it's gonna be  calamy exact measurement. Okay, so click on here   out and put it over here like this. 46. There we  go. Now let's create this form over here. Okay, so   let's inspect the first one. Okay, click Control,  click over here like this, how much is the height   63.9. Let's consider 64. Okay, so come over here.  And if you want to remove the ruler, what you're   gonna do is you're going to click over here, and  then select this rulers and the rule, go away,   like that. Now hit r on your keyboard and drag it  like this, how much was the height? 65? Right. 64.   All right, so I'm going to click over here and  write 64, Enter. And I'm going to keep it over   here like this. And I'm going to drag it until I  didn't cover the entire width of one layout. Great   like that. Now what is the border radius corner?  Yes, is 9.36. So of the RTL design, so I'm going   to click over here and write line boy 9.36 over,  hit enter, there we go. And then at some stroke,   like this, how much three, enter? Not sure sorry,  let's consider it to enter, there we go. Now,   you can see that this form at the top, and over  here are the similar, I mean, similar identical.   So what you're gonna do is you're gonna alter your  keyboard and drag over here like this, alright.   And we're getting this one, the same over here as  well drag it over here, like this, and then drag   like this, there we go, boom. And listen, let's  remove our oral layout and the layout grid from   here by selecting this or you can also remove it  permanently. But don't do that. Okay, just select   this one. And it's going to get removed, I mean,  the oral layout, so comment and whatnot over here.   You see this forms over here, select this and  remove the field. And it's gonna get white just   like our original document over here. Okay, the  same for this one. And do the same for this one as   well. Now I'm leaving the rest of the work to you.  What you're gonna do is you're going to place this   text you see this text over here, this text is  text, this text and the button on our practice   case over here. Okay? I believe that you can do  it. All right, all right. Now do you remember our   last frame over here? This is the same as this  one. Wait a minute, this one this frame that   contact us frame and this one, okay? The first  frame over here, okay? The process is the same.   You have to do it on your own. I'm leaving this  I'm leaving this to you. Alright guys, personally,   I think that this video became extremely long.  So what kind of content do you want? Do you   want very big in depth tutorial videos are short  videos, let me know in the comments down below.   So ladies and gentlemen, we're done with our  tutorial. If you liked the video, give a like,   share with a friend and feel free to subscribe.  Till then I'll see you in the next video. Bye bye

Channel: freeCodeCamp.org

Views: 100,153

Rating: 4.9242563 out of 5

Keywords:

Id: D56hs0Twfco

Length: 194min 27sec (11667 seconds)

Published: Wed Sep 01 2021