Naan Mudhalavan Frontend Development Session - 3

35:01 Yeah. Hi all. Uh very good morning. I welcome you all to the front end development with React and the MongoDB database administration by Smart Bridge and MongoDB. So uh let us wait for 3 minutes. Uh we'll start the session at 11:5. Okay. Let us wait for 3 minutes. Let everyone settle down. We start at 11:5. Faith.

38:48 Okay. Uh let us begin. So in our previous class we have discussed about CSS right uh internal inline internal and external CSS right inline internal and external CSS. Now and also I guess we have uh discussed about div. Yeah, we have discussed about div. Let me share my screen.

40:10 So we have discussed about box right? Yeah we have discussed about div. Okay. And we'll move on to our next topic called a box model. What is a box model? Okay. What is a box model? See uh while developing your web page, you know, uh you have to lay out your web page. You have to uh make a particular you know specific layout. Okay. inside that layout only you have to you know uh you can put all the elements inside it.

40:56 So likewise to uh to solve this problem we have something called box model. Okay we have something called box model. Okay. To place all the elements um in a particular div and also individual elements also can act as a box. Okay. So using div I'll show you how to how a box model is. Let me make another file box. HTML

41:43 make a div and this is box. Okay, this is a box. So now uh shall we make another style for it? First of all, let me give a class for it.

42:31 class I'll give it as box. Okay. Now here box box enter. Before that let us link the stylesheet here. So now initially let us give the width of that box. Let us give 200 cells.

43:22 Let us give a background color for it. blue and let us see the output of it. This is a box. So I have given a div and using uh external CSS I have given width and I have given this thing. Now I have something called padding.

44:11 Okay we have something called see padding will happen. So before padding I'll first let us give the border for it then you'll understand neatly. I give the border 5 px solid give it red color. Okay. If you observe,

44:57 if you observe the see actually this is the div. If you give border for it outside the whatever uh element is there outside the element outside this blue color div you're getting your border you are getting your border see you are getting your border outside the element your border is getting applied outside the element your border is getting applied okay now similarly let us do padding for What happens if you do padding? See, automatically inside

45:44 from inside the element it will take the padding from inside the element it will take the padding the all four sides padding. It will take on can see. Can you see inside the div element only the padding is getting applied. Okay. Inside the div element the padding is getting applied. Now if I give margin 30 px inside the border outside the border it is getting applied. So this here is the

46:31 margin. Can I write on this? [Music]

48:27 Okay, now let me take Yes.

50:42 Okay. Uh I hope my screen is shared. So, This is margin

51:33 the outside element whatever you get outside element whatever you get that is margin. Okay, that is the margin that any element not only div you can take any HTML element this outside the element whatever space uh you want then you can use this margin okay and this is the border

52:35 This is the border. And if you observe you have got uh some kind of space between the div and the content the div and the content. So this is nothing but this is nothing but padding. Okay. The space you get between the element and the uh content inside that element. This is this is called padding. Okay. This is called padding.

53:29 Understood. This is a box model. Okay. You can make layout. You can make layout in your HTML pages. Okay. If you want, let me console.log Frog

54:23 payments. Yeah. See you have padding 20 20 20 year. Okay. Actual width is 200 pixels as we have given here in VS code. Actual width is 200 pixels. Okay.

55:20 You can see the width here, 200 pixels. I can change it here also. Okay. But uh this is this this will not get saved. Okay. For temporary only it will show. So after that uh what we have applied the border. Let us come to the border. See the border 5 px 5px red. Okay, this is 5 px red we have applied. Okay, then comes the padding 20 px. See you can see the total green color box whatever it is there that is 20 px.

56:07 That is 20 px. Can see then again what we have applied. We have applied margin of 30 px. This is the margin. can see the the you know the space outside the see the space outside the uh element is called margin. Okay. If you want to u give space outside an element okay like uh you have two divs if you have you think you have two divs from the above div and the uh below div. If you want some space between them either you can give margin bottom for the above div or you can give uh you can

56:53 give margin top from the below div. Okay. So that it will give space around the element. and understood what is box model. [Music] I hope everyone has understood this box model. Okay. So the use case of this box model is nothing but you can uh create a nice uh layout in your uh uh HTML page. Okay. By

57:38 giving spaces, by giving padding, you can uh style your content however you want. Okay. So if I tell you to calculate the total width. Now tell me what will be the total width of it. Now tell me what will be the total width of this? Only the element leave over the margin. Only the element leave over the margin.

59:21 Tell me the total width of this. What will be the total width of this? See this is 200. First of all, this is 200. Okay. The width whatever we have given now this is 20 px here and uh 20 pixels here. Okay. And this and this is And this is 5 px and 5 px. And this is 5

1:00:08 px and 5 px 5 px 5 px X. Okay. Now total what what is the width here? 5 20 25 + 2550 + 200 it is 250 pixels is is the width of this element. Now but however you have given 200 only.

1:00:55 You have given 200 only. But after adding But after adding all the uh properties of padding and uh border your element width has been increased. Your element width has been increased. So now actual width was 200 uh pixels. After that you have added 20 uh 20 padding right 20 padding. So 2020 20 it is 40. Then again you have given 5 px 5px of border.

1:01:44 Okay. So this is how your width is calculated. Now the width of this element is 250 px. If you include the margin also then again it will uh go differently like your margin with your margin what what you have given margin of 30 right 30 means it will go up to here it is 60 again here sorry here it is 30 and here also it is 30 then it will go up to 60 250 + uh 60 it is 310.

1:02:46 Okay, unlisted. So now uh let us move on to next uh topic called flex display display property display flex

1:03:31 Okay. So, uh here it has only one element inside div. So for suppose if I have multiple elements like this div three see how can I position this now how can Can I position this?

1:04:22 Now, how can I position this? So, to align the uh items to align the items um inside this div to plan accordingly to align to layout your uh elements inside a div. then you have a property uh you can use a property called display. Okay. So let me keep it like this only that I can share this file with you. So let me create flex. HTML.

1:05:18 Okay. Now here let me take a main view.

1:06:34 Excuse me. So here what I have done I have made uh three divs uh a main div. Inside a main div I have created three subdivs. Okay for three subdivs I have given a same class name. Okay. And I have given three ids for three individual divs. three ids for three individual divs. So now let me make another style dot CSS

1:07:24 style three. Okay. Now let me link this file here. Let me link this uh style 3.cs. Okay. Now what shall we do? Let me first give a main div width and height.

1:08:10 Let me give 500 px of width and 500 px of height. Let me give a background color to it. Okay, let me see the preview of it. 500 as let me put 400. Yeah, fine. 400 400 and this. Now let me target uh

1:08:58 the subdiv class. Let me give a height and width common first. See, I'll tell you here. I can show you why uh why can we why do we use this uh class and id you in this example you'll get to know y class and y id. So,

1:09:43 so using this subdive class, using this subdive class I can give height of uh px. Let me give only 50 px. Okay, let me give 80px. Okay. And width width of

1:10:31 80 pixels. Okay, let me give you the background color of it. Okay. Now you can see I have given three divs but I want to give diff for each and every div. I have three divs here right? I have three divs. I want to give three different colors for that. Okay. So instead of writing the color here, I'll take the ID selector

1:11:16 which will be unique item one background color brown. Okay. Similarly, see it will be two item three and I'll change the background color to chocolate. And one more.

1:12:02 Great. Okay. So using the subdiv see I can also give height and width for each and every uh id like this. But my it will take few lines extra. So instead of that instead of that I have taken I have taken a class which will be common uh for these three divs and I have taken id which will be unique for these three divs. Okay. Now I have to align these items. I have to align these items. Okay. like uh

1:12:48 like in you know in x-axis I want to align it. Okay. In x-axis I want to align it. Okay. horizontally I want to align this items. So using a property called display flex. Okay, display flex. It will by defaultly arrange all the items horizontally. It will by defaultly arrange all the items

1:13:37 horizontally. Okay. After that, after that if I want to change the direction of this, so I can give the flex direction column. So it will come back to the column like this. Otherwise by default it will be in this order. Default it will be in this order. So now now look now here I want to uh you know give uh arrange items with equal space between them or else first I want to bring the all items to the center of this div. So here I have one property called justify content center. So equally to the center

1:14:27 I'll get my all the uh subdiv to the center. Okay, using justify content center I can get my I can get my content to the center. Similarly, you have uh justify content space around. So it will give equal space around each of the element. It will give equal space around each of the element. Okay. Can see.

1:15:12 Now we also have uh another value for this property called justify content like space between. The space between. What space between does is it will not give space at the last elements. Okay. It will not give space between the last elements and the main element. It will give the space only in the between. Okay. But whereas in space around you can see whereas in space around you can see it is giving space to the corner elements also. But whereas in space between it will give the space

1:15:58 here only. Okay. And also if you want to move all the elements to the um end of the element, you can use this justify content end. Can use this justify content end. So this is about horizontal. Now what about vertical alignment? So for this you have property called align items. You have property called align items center. Okay.

1:16:45 Or you have another property called align items end. Okay. By defaultly it will be in the start only. So this is the start. Okay. Now this is the center. This is the center and this is the end. Okay, this is the end. This is the center and this is the start. If you want to bring these uh content to the center of this then you can do you can use these both properties. So you have got your content to the center. Okay, you have got the content to the center. Okay,

1:17:31 you can also use this space between space around properties with align also. So, uh I'll give you 2 minutes. Uh you please uh note down this. You please note down this. put both of the files uh beside

1:18:19 please note down this very important uh CSS properties these are I'll give you 2 minutes time please note down This

1:22:02 See, please make a note of this. Okay. Then if you have understood this topic, I'll uh uh tell you a game. Uh everyone please uh spare a 15 to 20 minutes to play that game if you are if you are done with this I'll give you that game I'll show you that game how to play but you have to have an idea about this display uh flex property Okay.

1:23:25 Okay. Uh shall I show you that game? So this is the game. Okay. Can type flex froggy then you'll uh get this game. So here what is the task is you have to move this frog onto that leaf.

1:24:15 Okay, you have to move this uh frog onto this uh pad or leaf. Okay, so using this just five listify content and so using that CSS property I have moved that frog to there okay like this next so this is the second unit so here it is justify justify content and

1:25:05 center. Okay. Like this. Like this. Please uh complete all the levels till level 13 14 you'll find easy. After that you have uh some small change you can also do it okay like flex direction flex flow it is very simple shorten properties those are come on everyone play this game

1:25:52 I need everyone uh to play this him.

1:29:13 I hope everyone is uh playing the game. Okay. in level uh till level yeah 12 you can play easily. This is also uh very easy you can play uh

1:30:20 Okay. Just uh you can till level 12 and 13 uh can use the flex direction. Okay, the flex direction I have showed you here, right? Uh the flex direction I have showed you here. The flex direction is nothing but you can uh specify uh in what direction your item should start whether horizontally or vertically. If you want to uh start your items horizontally by defaultly it will be horizontal. Okay, no need to worry. I mean uh horizontal means row. Okay. If

1:31:08 you uh want to place your items in column then you can use uh flex direction column. Okay. And or column reverse. column uh will you know make your items in a column uh manner then if you want to reverse that that means from the uh the items will rotate from first to last and last to first like here I'll show you see this is in row if I do row reverse it will come like this Okay.

1:31:55 Go default. Okay. I need everyone to uh do this. I need everyone to do this.

1:38:22 I hope uh everyone completed at least till this level. till level 16 at least.

1:39:08 Level 16 at least. I hope everyone are done.

1:40:57 Okay students, if you have any doubts regarding this, uh keep a note of it. In last uh 10 to 20 minutes, I'll enable the live chat. There you can uh uh post your uh doubt. Okay. But here at least up to in the session itself you please complete all the 15 uh at least the 15 levels because till there I guess everyone can do it. till there I guess everyone can do it.

1:41:56 Okay. Now uh let us move on to another topic. Let us move on to another topic. I hope everyone has completed to at least level 15. Okay. So So let me share this in your faculty's group. Let me share this in your faculties group so that uh everyone can play this

1:42:55 So I have shared the game link in the f in your fac for your faculties. So please ask them and take that link people who have not played. Okay. So that you can uh you'll get a nice hands-on practice on this uh display flex property. Okay. Now let us move on to display grid. Okay. display grid. So now let me create another let me share my screen first.

1:43:54 HTML six. I'm copying the same uh divs here. But you have to notice the difference between this flex and the div uh flex and the grid. So in flex what you are able to do is you can only align the items by giving spaces. Okay. But with grid what happens is you can this is more you know this thing

1:44:42 uh you can specify the item uh to flow from one uh end to another end. Okay. Uh I'll show it practically. Don't worry. Let me show it practically. Create another uh CSS file called style. Right. Okay.

1:45:47 Now um so what we have given here we have given same a main div main div for the let me give the he and width of it let me give the height and width of it background Hello.

1:47:08 Okay. Uh till here everything is same. Okay. Till here everything is same. But we will change a property from here. Okay. There we have used uh display. And there we have used display flex. But here what we will do we have we will use display grid. Okay display grid. After I do you'll uh notice the difference. What is the difference between uh the flex and the grid? Okay. show you display

1:47:55 grid. Okay, close this. And this also show

1:49:06 Okay. Now what we will do? Wait before showing you I'll show you the output how to check see. See when you inspect uh this element you can find

1:49:52 Beside a div you can find this grid option here. Okay. When you click on this grid now it is showing you the grid there. Okay. You have to enable this grid option. Then you'll show your grid. Okay. If you want uh that grid option there first of all you have to display this uh div as grid. Okay. You have to display this grid as uh this div as grid. So that then only you can see then only you can see the grid option there and then there you can enable it. Fine. Now instead of giving height and width here

1:50:40 so I let height and width be I'll first uh make like this is like giving uh dividing your page into boxes okay like rows and columns like a spreadsheet you can like an Excel sheet you'll have right Excel sheet how will you have the rows and columns similarly you can divide your uh div into this rows and columns like giving uh grid template columns uh let me give how much is the width here so 100x X

1:51:46 one 2 3 4 5 6 Okay, I have given six. So instead of this I'll remove this. it is waste of giving height and width. So similarly I'll give the row all shape to okay template rows and grid template. Let me make it five only instead of six so that you will get confused.

1:52:35 [Music] 1 2 3 4 5 6 Oh, these are six. Let me make it five only, right? Okay, this is fine. Okay, we have five. So now I'll change this also make it to [Music] okay there is no need of height and width. Okay each now what happens here is what happens here is here automatically you know one item will occupy one cell. Cell means uh a

1:53:21 one box. Okay. See one item will occupy this is one item. This is one item and this is one item. Right? So each item will occupy one one box. Okay. Each occup uh one one you know cell you can call one one cell. Okay. Automatically without height and width. If you give it your height and width, what will happen is see it will take the you know uh this thing it will you know uh take whatever size you give you know

1:54:06 forcefully. Okay, instead of this remove this fine. Now the task here is the task here is now you can now here you can align you know you can display the items wherever you want. Okay. Like I have this brown color div here dark brown color. I want this to occupy in this uh you know six boxes. I can tell how to occupy it. Okay. Like this is my item right? I'll set grid

1:54:54 grid row start. Okay. grid row start. Okay. Similarly, grid column start and similarly grid row end and grid column. column end. Okay. So, how to specify the start and

1:55:40 stop? See, see once again I'm saying how to get these lines. When you open inspect elements, you can find a div like this. Okay. Actually, your div will be like this. When you inspect on it when you're the main div whatever div you are making is displayed as grid like here when you do this display grid you do this display grid then only you'll get an option called grid option here. Okay. Then when you enable it then you can see the all uh dotted lines there. Then you can see all the dotted lines there. Now you minimize this.

1:56:26 Okay. Minimize this. Now see what I've told I want to display this brown color div from here to these six boxes. So what should I specify is you can see the numbers here. You can see the numbers like this. Right? See these are row one. This is row two. This is row three. This is row four. This is row five. How many rows I've given here? 1 2 3 4 and five. Got it? Five rows. Okay. And how many columns I've given? 1 2 3 4 5 6 1 2 3 4 5 6. Got it? Six columns. Okay. Want I'll remove one.

1:57:14 You can remove it one given any background wait for it. Why it is coming? Did I give any background for it? All right.

1:58:07 Something is overriding my this listing. Oh, I have not given width that is why it is fine. Fine. No worries. It has taken the complete width. Okay. If you want, I can also specify the width also here. Width 500 px. Done. Control shift I

1:58:54 display grid on the grid and minimize it. Fine. Okay. Now what I have told I want to display my brown color div that means my first div in these six boxes. in these six boxes. So here I you can see I've written grid row start, grid row and grid column start and grid column end. You have to give the line number from where to start and where to end. Okay, from where to start and where to end. So these are the rows. Okay, till rows it is fine. So for rows you have you know uh lines okay this is the line this is the line line number you have. So you have to specify this line number where

1:59:40 to start. So this line number I wanted to start it from read row start one. Okay. And where to end? This is line number two. I want to end it in this row. Right. What is the line number of this row? It is three. Okay. And now come to the column where it should start. It should start from line number one. Yes, line number one. And it should go to line number four. See how it got occupied there.

2:00:31 Can you see how it got occupied there? Okay. Like this. You can also specify uh the second box from where to where you can uh you know uh spread like See, let me give this.

2:01:20 Okay. Now I'll display this till totally down. Till totally down I will display this. Okay. Let it start from fourth line only. Okay. Now let it sorry this is row right. So the row should start at one only and it should end the row at okay and the column should start at four and should end at six.

2:02:09 Okay, got it. Now this is how I can tell from where my items uh should flow from. Okay, come from where my items should flow from. And we also have a shortand property for this. We also have a shortand property for this. like see I'll display this green uh div uh inside this nine boxes is a shortened property it is grid row and grid column. Okay. So here you have to tell the grid

2:02:57 row start by row end. So I want to start it at three and I want to end it at six. Like this you can use a shortand property for this. Also you can tell where to start at which column should start. It has to start at column 1 divided by uh sorry uh by the column end is four.

2:03:43 Okay. like this you can tell from where you can display your grid item. Okay. So let me take another div also. Wait for

2:04:59 So here I've taken another div uh item four. Okay. Now another short end property we have. Another short end property we have. Okay. It is grid area. Okay. Grid area. It is called grid area. In that you can specify all the four terms together. All the four this this is grid area. You can specify all the four things at a time. Okay. Row start, column start, row end and column end. What is the row start? You can start the row at uh let us start it at four uh by let us start the column also at four

2:05:46 by let us end the uh row at six and column at six. See, so this is also a type of shortand property to display this. Okay, please note down this. Please note down this grid.

2:07:30 Please note down this everyone. Please note down this

2:09:01 Okay, we have left out with media queries. After this can uh let us move on to this uh to media queries. So I hope everyone has understood this uh grid how to use how to make use of grid. I hope everyone understood how to make use of grid. You understood the difference between flex and the grid. Right? Hope you all have understood the difference between flex and grid. So in flex what happens is you cannot specify uh the item where to flow like uh you

2:09:49 cannot customize the u position of the item just you can give the spaces you can align it that's it but here you can customize your position of uh your item in the grid okay both are useful uh in sometimes display flex may be useful in some cases uh grid is useful. Okay.

2:11:12 So do anyone have idea on media queries? What are media queries? Do anyone know what is a media query? What is responsiveness? Yeah. Uh let me show you what is responsiveness.

2:11:57 Responsiveness uh Which website is nice responsive? Like uh let me take my own

2:12:52 See when I try to increase and decrease my screen size. You can see how uh responsively it is acting till here only. Oh Okay, let me open another Tesla's website.

2:13:49 see you can see how uh smoothly it is acting. See when it is in the laptop screen you can see the display how it is mainly this thing you see how it is when I reduce it when I reduce the screen size see how it is acting accordingly observe this is because of the responsiveness uh given by developing the uh your website itself. You can see the footer.

2:14:39 See the footer is like this in the small screen. When you increase this, see the footer of how it is going. See and also the nav bar also I guess see the navigation bar was like this when you try to decrease this see when you try to decrease the screen size then you got I any option here.

2:15:30 So this is how responsiveness is. See your what is responsive? Your web application should act according to the size of the screen. Okay. Then only your website is called your website is set to be responsive. Okay. Then only your website is set to be responsive. Okay. So to you know uh achieve that you have to write responsiveness uh you have to write uh CSS using media queries. Okay. You have to write CSS using media queries.

2:16:15 Okay. We are left out with that topic. we are left out with the topic. Okay, I'll I'll show you uh we we also have CSS library called Bootstrap Tailwind. Okay, I'll also uh let you know what uh how can we use that Bootstrap? How can we use uh the classes in that bootstrap? You'll you also in that bootstrap you have the utility classes like you just have to copy the class and you have to use it. Okay, no need to write any CSS uh uh for that directly. Bootstrap has developed few classes.

2:17:00 Okay, for that uh CSS is done behind the scenes. Okay, they they have written the CSS for that class. just you have to copy that class and paste it inside your uh HTML. Okay, with a few steps uh you have to do before uh making use of Bootstrap. I'll show you what is Bootstrap also and also how to write manually. How can you write uh responsiveness manually? I'll show you both of them uh in the next class. Uh for now if you have any doubts I'm enabling the live chat.

2:18:01 Nope. Uh everyone has registered for the MongoDB database administration uh course and also I hope everyone has started doing it. I hope everyone has started doing it also.

2:18:52 So, I'm enabling the live chat. If you have any queries, you can please ask. Yeah, the live chat is enabled. If you have any doubts uh you can Ask.

2:21:11 Yeah. Uh, second level level 11th level. Wait. Uh what is in 11th level? see I have showed Oh

2:22:13 11th 111 I have showed you the flex direction it is column. Okay. The flexor direction and uh and items baseline. Sorry. Flex and

2:23:00 Yeah, that's it. Flex direction. You have to change the uh direction first. Okay. From row to column. Then you have to justify the content using flexen. But I cannot project. Yes. Okay. Give me a minute. See, I guess um

2:23:47 learn.com I think you are uh getting this page right someone who has

2:24:36 I log in with email but I cannot place on dashboard it is placed on this project page I think you are getting this page right so if you click on this if you click on this uh name uh you can see this icon here your profile there you can find this learn.mongodb.com university if you click on that it will navigate it to your MongoDB dashboard okay there you can see a button which is not visible and click on my dashboard code then you will get your dashboard.

2:25:22 Okay. So I logged in with Google but my name is proper in that. Will that be okay? See if you are okay with that name it is okay fine otherwise please change your name. You're okay with that name let it be. If you're okay with that name let it be. Otherwise leave it. You change your name. Okay. How to

2:26:08 change your name is click on your profile manage your MongoDB account this you can click on unlink from Google then you can change the name here see you you have to click you know you have to click this unlink from Google okay password reset mail you'll get uh you'll get your password reset mail. Okay, you have to after uh creating a new password, let me

2:26:55 stop sharing my screen and show you it. After clicking on this password reset mail, you'll get a mail uh to your email

2:27:45 regarding your password uh reset. When you click on that link, you can create a new password here like this. Okay, you can save password and then you can continue. Your password has been updated successfully. and code. And

2:28:51 Okay. Now after uh changing that. After uh changing your password you please log. After changing your password, please login. So there is a server issue. Okay.

2:29:57 So uh it is telling me to try again after uh 5 minutes if I try. So refresh this log outage. Okay.

2:30:42 Now here now I can change my name. Okay. Now here I can change my name. Okay. After changing the name, after changing the name, click on save changes here. Click on save changes. Okay. Click on save changes. Then after that if see if I want to change my name to try ABS. Okay. I have saved changes here. Okay, after saving changes, please log out. Please log out and open an incog window.

2:31:30 Then here you type learn.mongodb.com. Then here you again manually sign in. You'll get this page. Go to back to homepage. Go back and please wait. It it will be loading. Now here you can see my name has changed.

2:32:17 Okay. My name has changed. Fine. Understood how to change your name. I hope everyone understood how to change your name. I hope everyone understood how to change your name. See everywhere it got logged out. I hope everyone understood how to change your name.

2:33:04 See if you have not completed only then you'll not receive your certificate. If you have completed the unit then you'll get your certificate. Once make sure you have watched uh your unit is 100% complete. Unit is third and ninth unit is 100% complete.

2:34:03 Okay. Uh I hope everyone has understood today's session. Okay. Do you have any doubts? Yeah. Yesterday for last class I forgot to give you the code files. Today I'll definitely put it in the group. Please ask your faculty for the code files. Okay. Uh okay. If you have any queries, please uh reach out to your faculty and explain them whatever query you have so that your faculty will let us know. Fine.