Naan Mudhalavan Frontend Development Session - 2

35:58 Yeah. Hi all. Very good morning and welcome back uh to front end development with React and also MongoDB database administration course. Uh let us wait for 5 minutes and we'll start.

41:07 Yeah. Okay. Uh good morning all once again. So now uh let us begin. So I've seen uh many of youall like uh yesterday in our session uh your faculty was telling that uh students are fa facing issue while registering in MongoDB. So no worries. So no worries. I'll once again show you. Please listen clearly. Okay, please listen carefully.

42:54 I hope uh my screen is visible. Fine. Now students who have not registered till now in MongoDB, please don't click this Google authenticate button. Fine. Please don't click this Google. You can see an option sign up here. You can see an option sign up here. Please click on that sign up.

43:43 Fine. And if you come down, you type your email id here. You type your whatever email id you have registered with nm. Please use that email ID only. Fine. Type your email ID here. Type your first name, last name, your preferred first name and last name here. Then create your own password. Create your own password. Leave this company field blank. Accept this and click on sign up. Understood? Once again I'm repeating students who have not registered for that MongoDB. Not registered for that MongoDB directly

44:30 you know I we have forwarded a link fine we have forwarded a link uh to your faculty. I hope everyone has got that uh link. So directly open that link. If you open that link, it will ask to register. If you click on this register, okay, you'll be navigated to the login page. You'll be navigated to the login page. Right? Students who have not registered in MongoDB, then click on the sign up button. Instead of uh clicking on this

45:17 Google, click on this Google, click on this sign up button. Fine. Here now, if you scroll down, you can find four inputs here. Email, first name, last name, and password. Okay. Type your email which you have registered with the NM with non-Mudal one portal whatever you have given in nonmodal one portal and the first name and the last name your preferred first name and last name then your password okay and then your password fine now accept this leave this company name optional leave it and click on sign up fine now you will be navigated to

46:07 your dashboard. Fine. Now after registering whoever have uh registered now manually type your

47:01 So what happens here is this error will occur when you directly go and click on Google. Okay? When you directly uh click on Google and sign up and if you type like this it it will won't uh come. If you want, I'll show you.

47:47 Okay. Now here if you type manually it won't work because while I'm registering I have directly click uh clicked on this Google. Okay. Students who have directly clicked on this Google and you have registered and if you type like this it won't come. Okay. Now you can directly click on this who have uh uh registered directly with Google. Okay. Who have registered directly with Google? If you have registered directly with Google,

48:34 your name you can see uh it will navigate to MongoDB's Atlas uh this thing. Okay, no worries. If you click on this profile, you can see your name. You click on this profile who have directly navigated uh who have directly registered with Google. You can find your name something which you have given in Google like if you have given uh the Google automatically gives you you the role number right if you are using your student email id it will give you the role number instead of your name. That is why I told you please don't register using Google manually type your email.

49:19 Fine for students. Yesterday many of the faculty was asking. Many of the faculty was asking sir this uh email id and password uh is incorrect and invalid email address. This will occur because while registering you have clicked on Google. If you have manually uh followed this

50:06 process, if you have manually followed this process then it will come. If you manually give your email, first name, last name and password then by typing here it will work. If you have directly clicked on this Google and if you try to type your email and password it won't work. Fine. Understood? Now if I click on Google now automatically it will sign in. people who have registered using Google button they only should click on this Google so that it will log. Okay. Now uh your path will be registered. Now your path will be registered.

50:54 Fine. Now here you have to do your 22 units. You have to do your 22 units. Okay, you have to complete your 22 units. Okay, for suppose if I start with unit one, I click on start unit one. I can click on register. You have enrolled for your unit one. Now if you can see you have in a unit you have multiple lessons here in the left side see you have three lessons you have three lessons in each lesson

51:41 you'll have learn and a practice learn and practice what is learn is a video fine learn is a video this is a video and see this will see the video then then come to practice then you'll have a lab here. If you click on this it will navigate it to your lab. Okay, you have to finish the task whatever it is assigned there and come back here and you'll be having a quiz. Fine. You'll be having a quiz again. After completing this lesson one again you have to move on to lesson two like that lesson three. Then after completing your total all the three

52:29 units if you complete this bar will go to 100%. This pro progress will go to 100%. Then then if you click on next there will be an option here. So if you click on this next see you have completed this and exit. Okay. If you have completed totally it will come green color. If it is in

53:14 light light green that means that unit is in is partially completed. You can see the progress of that unit also here. Fine. After that you can go to second unit, third unit, fourth unit like that. 22 units you can 22 units you can finish. Understood. So

54:00 as I told you all, please click on sign up and give your email id here. Please don't click on this Google authenticate button. Please don't click on this Google authenticate button. Okay. Whoever have clicked on this Google authenticate button then in you can direct while logging in also you can directly click on this Google. Fine. Okay. So now let us move on to our topic.

58:57 Yeah. Okay guys, sorry I was uh connecting my charger. So where were we? Yesterday uh in our previous class we have discussed about we have discussed about paragraph tag right paragraph tag pre-tag also right? This is paragraph tag and pretag. Fine. Okay. Now let us move on to some more tags like uh we have uh excuse me image tag. Let us

59:42 we have image tag. Okay. In this image tag, you'll be having two attributes. You'll be having two attributes. What are these attributes are? Like uh see uh the these two attributes uh are mandatory for an image. Okay. This SRC is nothing but the source. SRC is nothing but the source and alt is nothing but the alternative. Okay, I'll tell you what is source and alternative. First, uh you have if you want to render an image on your HTML, you have to give the link of that

1:00:34 photography just so let me take an image. So I'll copy this image. Copy image address. Okay. Then I'll paste it inside this. Okay. Now let us see see our images rendered successfully. Okay. So whatever you give inside the src that will that will help you to render your image. That will help you to

1:01:20 render your image. If I change anything, if I change anything, this will go. So if your source is wrong, if your source is wrong, then what will happen? If your source is wrong, then what will happen? So here what will happen is here your alternate will come into the action if this source uh link is not working properly like I'll do change in this

1:02:12 Where is this see the course if I uh give uh any wrong link or this link was not working this source post was not working then your alternate will get printed on your uh displayed on your web page. Okay, stating that this is an image icon. This is an image icon instead of the image source was not working. That is why an alternate name for it has displayed

1:02:58 here. The alternate name is tiger. Okay, understood. So this is how an image tag in HTML work. This is how an image tag in HTML work.

1:04:35 Okay. Now let us move on to another tag. So let this work fine. After this now let us move on to your list. Okay. Okay, we have something called list. We have two types of list. One is ordered list and one is unordered list. See what is ordered list and what is unordered list. See uh the ordered list will have the count of how many items are there in the list. Whereas your unordered list will not have the count. It will just list the items. Like first let me show you unordered list first. The name of that element is ul and

1:05:23 inside ul you have to write the elements. Okay. This is called unordered list. Okay. Whatever you want, you can write it. Fine. Now coming to order list. The same uh way to write. Okay. Just you'll get a number beside

1:06:09 it. Just you will get a number beside it. Fine. understood the difference between ordered list and unordered The UL is unordered list. The O is

1:06:56 ordered list. Okay, the difference between those two is the count is not specified in unordered list. Okay, in ordered list uh just you'll get like a bullet point but whereas in uh ordered list you'll get the number. Okay, how manyever you write how manyever list you write list item this LI is called the list item. Okay, so I'll write this list item here for your This is list item. Okay. This is the list item.

1:07:44 Now uh let us move on to anchor tag. Okay. So let us move on to anchor tag. So anchor tag uh is basically used uh to uh give any links in your uh website. Okay. tag anchor tag hf par http is col/www dot

1:08:32 www W dot well dot copy. Okay. Oh, command line in VS code control slash okay shortcut for wait I'll write here

1:09:42 Okay, this is uh the shortcut for comments. Control + slash This is the shortcut uh for comments. Control + slash Fine. Now where are we? Yeah, we are seeing about this Google, right? So, okay, because

1:10:29 Google cannot be opened. So here uh this is HTTP. So we are uh giving HTTPS. So it cannot be opened inside our browser. So what you do is copy this inside our VS code. It will not get open. Come to your browser. Come to your browser. Okay. Open your uh web page here. index.html page here. Then you can find Google option here down. Then click on this Google. It will navigate to Google. Okay. Likewise uh

1:11:19 like any link if you take um like Google, right? Here if you type YouTube.com copy this link here. Paste the URL here. You come down. I have given. Oh

1:12:22 You click on this. It will navigate to YouTube. Okay. like that using anchor tag. Using anchor tag using anchor tag you can uh give you any links in your you can give any links in your HTML your web page. You can give any link in your web page. Fine. Now you can see you have got uh see Google and YouTube side by side. So to overcome this you have something called BR tag. Okay. Nothing but it is a

1:13:10 break. It is a break. Fine. It is a break. You can break any line like this. Fine. Understood till here. The anchor tag how it works. It is called um hyperlink. It is also called as hyperlink or anchor tag. Right.

1:14:03 Okay. It is also called as anchor tag or hyperlink. Okay. Fine. Now let us move on to uh huh we also have few uh formatting tags also. Before formatting tags, we also have the superscript and subscript.

1:14:52 Like if you want to display uh two power two, you want to display two power two, how will you display here? How will you display? So in that case you have see for now I'll take an heading tag. Z heading I want I'll display first how to display first in numerically one and st but st should come up so to overcome this I have another tag called

1:15:38 supererscript Okay, this is super script. Can you all see? Okay. Can you all see this? The if you

1:16:23 want to write any content above any uh character. Okay. If you want to write any character above a character then you can use this subscript. Uh so sorry this is supererscript. Similarly if you want to write like u in chemistry you'll have a formula right uh the formula for water h1 tag. What is the formula for water? H 2 o right? But the two should come under beneath the uh h right. So for that you have to use this subscript.

1:17:17 Okay. Got understood the superscript and subscript. You want to write any character above uh the character. If you want to write any character above any character then you have to use the subscript supererscript. If you want to write any character below any character then you have to use this subscript. Okay. Understood? Fine. Now uh yeah we are discussing about uh formatting formatting tags right so we have

1:18:05 example in the poem if so this is will this Fine. So we have something called B and I tag bold and italic. Okay, bold and itallic. So if you want

1:18:51 to specify any line to be bold using HTML, you have B tag here directly. You can use this B tag. Fine. Okay. And similarly if you want to use italic can use this italic tag. Okay. Now this has become bold and this

1:19:38 has become italic. Okay. You can use this kind of uh tags also in HTML. Understood. Now, now u let us see input tags. Now let us see input tags. And also we have horizontal rule. Forgot to show horizontal rule.

1:20:24 See can you see this horizontal rule here horizontal rule I have given so that it will break if you want to uh categorize anything so in above P also I'll give see HR tag it this. Okay, you can sort everything here like this char tag. After image also you can give

1:21:23 this is called horizontal rule. Fine. This is the heading tag. This is the paragraph tag. This is the pre- tag. This is the image tag. This is the unordered list and ordered list. This is the anchor tag. This is the superscript and subscript tag. Fine. supererscript and subscript. Okay,

1:22:09 understood. Can see the horizontal rule how it is coming. Now uh let us start with we'll look into input tag. Okay. What is an input tag? Basically,

1:22:58 so basically what is an input tag? Whatever you are giving, whatever the application is asking for an input from the user. So there you'll be using this input tags like in MongoDB just now we have seen see it is asking for email address. So for this for this you have to use for this you have to use input tags. Okay. And these are the input tags. For example, input text.

1:23:58 Okay. This is input tag for text. Similarly, you'll be having input tag for email also. Okay? But you have to give break here. want to space view break here also and here also

1:24:45 fine two brakes you give and you'll also have a label for Okay, this is for name and you can have label here also. Okay.

1:25:32 Again you give a break tag here. Again you give a break tag here. After that you give another input for password. We'll have these many types of inputs are there here. label password. Okay, these are all the input these are all the input tags. You have many input tags like uh let me show you BR tag. Enter BR tag.

1:26:25 Let us take time. We have an input for time also. put for a time. Similarly input for date you can give label here. per date. Okay. Then uh

1:27:18 break tag. Break tag. You can label label for you also have date and time. You have both here. Okay. Show you date and time. Okay. Show you input for date and time. Yeah, this is date and time. In this you can select will not come. should come. But

1:28:12 wait, it is not coming. Actually, it should come. Give me a minute. Okay. Uh actually uh you'll get both date but it is not coming here. Y

1:29:02 input date time. Why is it not showing? Yes, because of this I guess it is not coming. Okay, you can select date and time

1:29:50 and select date and time label for it. date and time. Okay, these are the input fields for date, name, email, password. See what happens in password. If you type anything, it will not be shown. Okay. Okay. Here uh if you do not write add in email then it will not work. Okay. by while uh submitting your form then uh this will show you an error. Okay. Then you can select a time here.

1:30:36 Okay. And you can select a date here. Can select a date and time here like this. Fine. And you have many inputs. input for color. Huh. This is color.

1:31:25 And you have many I'll keep on uh doing it. You all please note down label for uh Checkbox. [Music]

1:32:21 And for radio button. Okay. This is the radio button. This is the check box. And this is the radio button. Once if you select it again, it will not uh deselect. Fine. We are range range. Okay, you can select the range

1:33:07 here like this. Then comes input tag for uh file. For upload file you can have this input tag called type file. Okay. There are all the input uh these are all the input tags here. Okay.

1:34:16 Okay. Uh if you want you have many input fields. If you want you can try you can try on your own. These many I have shown. Maximum maximum I have shown I'll show you the search also input search and I guess you have something called text video.

1:35:02 number. You have number also. Main important thing contact number. Okay, which will you cannot type any character in this. You can only type the numbers. Fine. You can only type the numbers here. Cannot type the characters. Now uh yeah

1:35:49 almost I think we have covered almost all the input fields. Covered almost the all the input fields. If you want it give If you want you can take a screenshot or you can note it down from here. Right. Okay. The name, email, password, time, date, date and time, color, checkbox, radio button, range, upload file, and

1:36:36 contact number. Okay, most probably we'll be using these input fields. Most probably we'll be using these input fields. Okay. Now let us uh move on to CSS. Now let us move on to CSS.

1:37:22 So what is CSS actually? What I have told you about CSS? What I have told you about CSS? CSS is nothing but cascading style sheets. Cascading style sheets. Okay. Uh I'll enable uh the live chat in last 10 to 20 minutes. Okay. If you have any doubts regarding anything, you can post it in that live chat. Please don't misuse it. That is why if you all are misusing it, that is why we have uh uh uh you know disabling the live chat. The last 10 to 15 minutes. Uh I'll enable the live chat. If if you have any doubts, you can ask it in the live chat.

1:38:08 Okay. Now let us move on to CSS. Let us move on to CSS. So what is CSS? Actually CSS is nothing but cascading style sheets. Guys give me a minute. cascading style sheets. So we can write

1:38:54 CSS in three different types. So actually what CSS does is it will give a beautifification. It will it will give styles to our uh web page. Okay. You can add style to your web page. Fine. So we can uh write CSS in three different types. So one is inline CSS, one is internal CSS and one is external CSS. Okay. One is inline CSS, one is internal CSS and one is external CSS. for your

1:39:40 one second. So here I have a paragraph tag right for paragraph tag Move. This is the paragraph tag. This is the paragraph tag. So now inside paragraph

1:40:28 tag the opening tag inside the opening tag of the paragraph element there you have to open a style attribute. You'll be having a style attribute. Okay. Whatever you write inside the opening tag are called the attributes. Attribute is nothing but a key and a value. attribute is nothing but a key and a value. Fine. Now here I'm trying to write a background color to see.

1:41:15 So I'm trying to write a background uh style using inline CSS. So this is inline CSS it. So this is inline CSS. Okay. Also beside that only you can also write color of the text. wrong. Okay. Whatever uh you can do, you can do it here.

1:42:25 Okay, you can change however you want, but you are writing it inside a opening tag of your opening tag of your element. Whatever style you write inside the opening tag whatever style you write inside an opening tag. So that will be your inline CSS. Now how to write ex internal CSS? How to write internal CSS? Here inside the head I've told you right the

1:43:13 HTML document will have two main uh child tags like head and body okay whatever you write inside the body that will get displayed that will get displayed right so now if you want to write style internal CSS. So you have to write it inside this header tag. You have to write it inside this header tag. Okay. Here you have to open the style tag. Okay. Now inside the style tag you have to write CSS here. So how to write CSS here? Now

1:43:59 here in paragraph tag I have written so that so that my CSS is applied to my paragraph. So now here what should I write so that my CSS will apply to my paragraph tag. So we have something called selectors. Okay. We have something called selectors. Okay. element selector, class selector, ID selector and universal selector. You have four types of selectors. Wait, comment it down and write

1:45:01 One is one is element selector. One is uh class selector, one is ID selector and one is universal selector. Okay, four types of selectors we have so that we can write CSS. What are they? One is element selector, one is class selector, one is ID selector and one is universal selector. So in this internal CSS,

1:45:49 what is internal CSS? Right? Writing CSS, writing CSS inside the HTML uh head of the HTML file is called internal CSS. What is inline CSS? writing CSS inside the opening tag is called inline CSS. Okay. So here what to write? How to write? So I've told you write element selector. Now I want to select only this paragraph element and I want to give CSS. So I will use this element selector. How to write element selector? directly specify the element name and open a curly braces directly

1:46:37 specify the element name and the curly braces. So instead of uh okay fine I have given this to inline CSS I have given in paragraph tag right now the same CSS using uh internal CSS I will give it to pre-tag okay I will give it to pre-tag instead of paragraph I will give it to pre-tag okay pre-tag background color.

1:47:56 Yeah. Okay. Now let us write the same inline style whatever you have written in paragraph tag to this pre-tag. Fine. So let me write a background color. What background color did we take? Here is this thing Q. Yes, the same background color, right? And the color brown and the color brown, right? and the font family

1:48:44 curs. Okay, can you see for paragraph tag I have used for paragraph tag I have used inline CSS but for pre-tag I have used internal CSS but both styling is same but both styling is same okay for paragraph tag I have using inline CSS here fine For paragraph tag I have using inline CSS whereas for pre-tag I have used an internal CSS. Okay I have using internal

1:49:44 Excuse me. Fine. This is internal CSS. This whatever style you write inside the head tag of the HTML element then it is called internal CSS. Then it is called internal CSS. So this is inline CSS. Whatever CSS you write inside the opening tag of the element then it is called inline CSS. Now let us uh move on to

1:50:30 so before moving into external CSS I'll show you these selectors also. We have done with element selector. If you want to select a particular element and if you want to give CSS for it then you can use this element selector like this pretty easy pre-formatted text. If you want to use if you want to give any styling to this H1 element so you can directly write H1 bracket background color or something to aqua. Okay. For this H1 tag, I have given background color like this. Using internal CSS. Using internal CSS.

1:51:16 Okay. Using internal CSS. So now whatever we have done here is so this is element selector. These two are element selector. Now let us come to class selector. Now let us come to class selector. How to select a class?

1:52:07 So before selecting a class, you have to create a class. You have to create a class to create a class inside the attributes view using the attributes of the HTML elements like let us see if you have observed for H1 tag I have given background color blue. So in my HTML file, wherever I have this H1 tag, wherever I have this H1 tag, see here I have the H1 tag and also here

1:52:53 at the two places my CSS got applied. At these two places my CSS got applied. So to overcome this to overcome this we have something called class selectors. So for example, um I'll give a class for this H1 tag. Class heading one. Okay. Class heading heading one. Fine, I have given class

1:53:40 for only this first H1 tag. But for this H1 tag, I'm not giving any class. Where is this? For this H1 tag, I'm not giving any I am not giving any this thing class. So if I remove the CSS of this H1 tag from here, my CSS will go okay for both of the H1 tags, it will go. Now I want to give only the background for this H1 tag background for this H1 tag. So using the class I will select. But a small syntax

1:54:26 difference in selecting here you have directly return the element name. But here what you have to do you have to write dot and the class name dot and the class name. Fine. What is the class name? Eding. You have created a class. You have given a class for that heading tag called heading uh hyphen 1. Now inside this I will write background color blue.

1:55:12 So if you observe for this only I am getting the background color for this I am not getting because here I have used class selector but before I have given H1 tag using the element selector I have selected H1 tag I have selected H1 tag then I have given the CSS there I have selected H1 tag and I given the CSS there. Fine.

1:55:59 So this is about class selector. Now if you give this class wherever you want, you can give this class for wherever you want. Like I give this class to this H2 tag for that also that CSS will get applied. If I give this class for uh [Music] unordered list see here also it got applied. Okay. So using class you can give the CSS to multiple elements. Okay. Using class you can give CSS to multiple elements.

1:56:45 Fine. Understood. Now what we will do is we have two more selectors. Okay, we have two more selector called ID selector. So before before giving uh what do you call selecting the ID uh selecting the CSS using ID first you have to create an ID. You have to create an ID for whatever element you

1:57:32 want to do for. Okay. ID called main. Okay. So what will happen here? What will happen here? So this class I have used for multiple elements. 1 2 3. So but I want the background color for this to be

1:58:19 changed. So not the background color, the font color to be changed. the text color to be changed only for this but the background color should be same. So for that I'll use this heading uh what do you call ID selector. I'll use this ID selector sorry using a small syntax change again here main main heading and I'll give color

1:59:05 brown The main headings color only was changed because I have given ID here. I have given ID here. Okay. I have given ID in in this H1 tag. So my color was changed. This is using ID selector. This is using ID selector.

2:00:02 Okay. Element selector you directly use the name of the element. In class selector you use this dot before the class name. And in the ID selector you use this hashtag before the before the ID name before the ID name. So this is about internal CSS. This is about internal CSS. Now, now let us come back. Now let us come back. We are left out with external CSS. What

2:00:47 is external CSS? I'll tell you this universal selector also. Don't worry. See universal selector is nothing but I'll show you here only. Universal selector.

2:01:45 See what is universal selector is it will select the total elements in this HTML file. Star is nothing but it will select all the elements. all the elements in this. It will select all the elements in this whatever HTML page we are in. Okay. It will select all the HTML elements in whatever page we are in. Understood? So here using star I have given font style italic. Font style italic. Fine. Then I have taken uh sorry to the

2:02:32 whole page you have got this italic style. Okay. If you want I'll give a background color also. If you to check the total page is now in blue color. Okay. If you want to do any uh styling, you want to do any styling uh to your uh this thing total page. If you want to do styling to your total page, then you can use this then you can use this what do you call universal selector. Then you can use this universal selector. Okay.

2:03:26 Please make a note of it. Please make a note of it. If you want, you can take a screenshot or you can write it.

2:04:59 Okay. Uh now let us see now let us see uh external CSS. How to write external CSS quickly. The same syntax here. The same syntax here. There is no change in the syntax. But you write CSS in other file. You create another file called sty style dot css. Okay. Now you copy the same thing.

2:05:44 Copy the same thing. You paste it here. But you have to now see all the CSS is gone. All the CSS is gone. Now you have to now you have to link this CSS file. You have to

2:06:31 you have to link the CSS file to this index.html file. So how to link it here? If inside the header tag as I told you on the first day itself that inside header tag you'll be having the information the are the main links of the file which are required for this document. Right now let us link that file here. How to link? You have a link tag. If you type link you'll get these suggestions here. If you type link, you get the

2:07:16 suggestions here. You can find CSS here. Link CSS. Link CSS. link relation is stylesheet and href is your file name your CSS file name now see again our CSS is got applied again from where from this file

2:08:02 from this file if you want I'll show you I'll change the color of that pretext like this main heading color. I'll change see I have changed it is changing. Okay. The same way how did you write inline internal CSS? In the same way you have to write it in an external file and you have to link that here. You have to write it you have to write it in in an external

2:08:48 file and you have to link that here. Understood? This is about This is about external CSS. This is about external CSS.

2:09:48 So we have uh still many things to do in CSS like Uh first we'll move on to the uh box model. Fine. The box model uh we have we have to discuss div. We have to discuss a div and um this is about so uh in this 15 minute in in five more

2:10:36 minutes I'll uh uh enable the live chat. I'll enable the live chat. If you have any queries regarding it, regarding anything, then you can ask. Okay. Do you have any doubts regarding this uh topic also? You can ask. So, uh you might ask why class selector and why ID selector. Okay, why class selector and why ID selector? See class can be same for the multiple elements. Class can be used a single class can be used by multiple elements but ID should be unique. Okay. ID should be unique

2:11:27 class can be given for multiple elements. This AM class can be used by multiple elements whereas ID cannot be used by multiple elements. Okay, ID should be unique. Okay, understood? ID should be unique. And and one more thing, we do not write inline CSS or internal CSS. We only write external CSS. Okay, we do not write inline CSS. It will work if you write also but it is not preferable in some cases in some cases rare cases you will write inline CSS otherwise not and also no writing

2:12:13 internal CSS you shouldn't write internal CSS the best way to write uh CSS is keep the CSS in another file like external CSS then you have to link that external file inside this header tag of the HTML file.

2:13:08 Okay. Uh let us I'll show you one more tag and I'll open I'll enable the live chat. We also have something called div tag. Okay. Div. What is div is nothing but it is divide. Okay. It it helps us to divide our application into parts and you can display your uh web page. It is like a container. You can tell it is like a what do you called? Instead of uh putting fruits on a table, right? Instead of uh putting fruits everything on a table, you can uh you can uh take a bowl, right? You can

2:13:55 take a fruit ball and you can put all the fruits in that fruit bowl. Right? You can also put the fruits on a table but it is better to take a fruit bowl and put all the fruits in that fruit ball. So similarly div acts like that only. Instead of leaving all the elements here and there, take a particular whatever elements you want, put it in a div, display it. After that, take another div, then display it. Fine. Okay. In one container, it would be in one container it would be. Understood? I'll explain this. Just a div tag. Okay. Me give a div tag.

2:14:43 Let me give a class for it. Excuse me. I've given container class and here let me write. Okay. do not get confused that is why I'm writing it. I'm specifying the HIG height.

2:16:00 Okay, this is a div. It is like a box. Now inside this you can place multiple elements. Okay, inside this now you can place multiple elements. Fine, you can specify and I forgot to tell you what is pixels. Pixel is a unit for the size. Okay, but actually what is pixel? So pixel is a dot on your screen. Whatever screen you are seeing a dot a dot on it is 1 px.

2:16:46 A dot on it is 1 px. So uh 100 px means 100 dots. Okay. The size of 100 dots it is. Okay. Understood? So we'll go uh we'll see the box model tomorrow or in the next class. Sorry in the next class. Right. We have next class on Monday. So if you have any doubts you can uh reach out to us. Wait, let me enable the live chat.

2:17:51 Yeah. Yes. Uh students, I'm enabling the live chat. If you have any doubts only, please uh text in the chat. Please don't misuse it.

2:19:30 See external CSS uh the same way of writing internal CSS only the same syntax whatever we have written internal CSS here whatever we have written here that only we have copied and pasted here okay in a file called style dot CSS. Now after writing that CSS you have to link it using this tag. You have to link that C uh CSS file using this link tag. Okay, this is external CSS. Yes.

2:20:39 What is meant by Href? Href is hypertext reference. Hypertext reference is ID selector. A way of selecting a way of selecting CSS. Right? I've shown you different types of uh selectors class ID element and uh universal right. So ID selector must be unique okay it should be an ID should be to a particular you know element only to a single element throughout your HTML thing. It should not repeat. Your ID should not repeat. Whereas class, you can give class for multiple elements.

2:21:32 Then class nothing. I have taken a see I have given a class name called container. I have given a class name called container. for this div. Okay, div is a box. You thinking div is a box. Okay, inside style I have selected this container class and I have given this height, width and background color. Height, width and background color.

2:22:27 See div is nothing but it is a divide. You can tell it as a divide or else you can tell it as a box. You can tell it as a container. As I told you right on a table you can put multiple fruits but it is easy you know if you take a fruit ball and you if you can put all the fruits in that fruit bowl it will look good right similarly here also instead of putting all the elements here and there you can take a particular div and put it inside that div okay we'll go uh I'll we'll go deep into that div don't worry

2:24:50 If you have any doubts, you can ask in the live chat. It is enabled. see ordered and unordered list. There's nothing in ordered and unordered list. See this is ordered list. Can you see the difference? This is the unordered list.

2:25:37 This is the ordered list. Can you see the difference here? The order I mean uh you'll get the count. Here you'll get the count. But here you'll not get the count. That is the difference.

2:28:15 See uh please don't uh spam in the chat because whoever are asking doubts they will miss they will miss okay please don't mis misuse this channel. See anchor tag is nothing. It is nothing but an uh hyperlink. Where is it? Anchor link. See this is anchor tag. You know you can uh give any links in your web page like this, Google, YouTube. If you want to navigate from your web page

2:29:01 to uh another uh you know whatever link you give, you can use this anchor tag. Okay. Meta tag we use uh to uh give the document information. Okay. like scale uh UTF uniform transform uh code. Okay,

2:29:47 I'll share today's uh this thing also today's uh what the code please ask your faculty today's code I'll share it with the faculty please ask your faculty to

2:31:17 [Music] Okay. Uh students if you face uh any issue regarding your MongoDB registration uh please uh tell your query to your faculty so that your faculty will reach out to us. Okay. Today also I have explained we have given you the recording class also.

2:32:03 Okay, please follow those steps. Okay. Okay, then uh I'll put this uh code in your to your faculties. Okay. I'll give this code to your faculties. Please ask your faculties. Fine. Uh so this is all for uh today's session. Okay. So let's wind up today's session. Have a nice day. Thank you for joining. Have a nice day. Bye-bye.