Naan Mudhalavan Frontend Development Session - 4

28:49 Yeah. Hi all. Uh very good morning and welcome you all to the front end development with React and also database administration uh of MongoDB. Uh let us wait for 2 minutes uh and we'll begin the session at 116.

30:08 Okay. Uh before we start our technical session, I have got many queries that how to come uh yall are facing many issues while completing the IBM skill build the add-on course. Right? So uh now I'll show you uh how to complete it before starting a technical session. Let me give you a brief about it.

30:54 Hope my uh screen is shared. So uh after uh you all registering into that link whatever we have given after registering uh registering into that link whatever we have given will open this kind of uh you know uh interface I mean this page. Okay. Then if you come down

31:39 sorry uh in the right hand side you can see go to activity. Here in the right hand side you can uh click on go to activity.

34:21 Oh, sorry. Uh, I have muted myself. I'm really very sorry. So once again I'm telling after after uh registering into uh into this IBM skill build you have to get this uh kind of uh interface okay uh like getting started with AI it is about 3 hours okay and this is the progress bar you'll find it here okay then after if you come on you'll find this create credly account

35:10 to create this credly account. Okay. After that you'll find these three modules here. Okay. Three modules. Click on the first module and you click on go to activity.

36:04 Okay. Now, uh if you click on that first course, you'll be uh seeing the course here like this. Left side, you'll find all the uh models here. If you come down, if you uh read this and if you come down then your uh unit bar the progress bar will get uh uh you know it is uh it'll come to complete status but when you click on this only it'll get totally completed. If not there something will be pending. Okay. After that like this you have to keep on uh starting there is a small quiz also. Okay. Like this you have to uh

36:57 keep on uh you know doing this all units. Okay. Then afterwards close this. After completing this again you come back. You you have to complete this second uh unit also. You can go to activity here. Resume module if you are paused already. Okay. Then you can click on this next button here. After reading this click on next. Okay. After reading this you have to click on next. This you have to keep on keep on doing it. Fine.

37:45 I hope understood everyone like this you have to keep on doing this three units. Then here in actions you can find the proof of completion uh thing. After completing everything here you'll find the proof of completion. Okay. I hope everyone understood how to uh Okay, once again I'm repeating.

38:36 Okay. After uh you have registered, you'll be navigated to this page with the course name called getting started with artificial intelligence. Fine. Please enroll it. You click on enroll. Okay. After en enrolling in the first step, you'll find this uh creating credly account. Please create account. Okay. It is easy credly account. Then after uh you will find these three courses down there. You'll find these three courses. You have to complete each and every course. You click on this course. You click on go to activity.

39:26 Okay. Like this you have to uh complete all the courses. One by one, one by one. Left side you can see the lessons. Okay. I hope everyone understood how to do it like this. If you complete all the three courses here, if you complete all the three courses, here you'll find a proof of completion. Here in this actions column, you'll find the proof of completion. If you click on that proof of completion, you'll get the proof of completion there.

40:19 So I hope uh everyone understood uh how to uh register and do the course. So where were we? We were uh So we'll come back to our session. We were at

41:45 Okay, we were at what we were discussing. We were discussing grid, right? We are seeing box, we have flex and we have seen grid, right? So this is how we write grid. Okay. HD.

43:12 Yeah. Okay. Now, so I have shown you responsiveness of a website, right? I have shown you uh some uh kind of responsiveness. Like if I open this Mango DV also. See now this is almost an

44:00 uh okay we have one more option in uh this chrome to inspect uh if you click on control shift I here you find a laptop and mobile phone option here if you click on this okay now you and check whether this is you know um responsive or not like see this is uh 989 it is almost an uh uh you can call it uh in a small tab okay uh uh iPhone uh tab

44:46 or uh any tab okay see in this tab also how it is looking. Now if I try to minimize this, see how it is adopting the size of the screen. See the search bar how it has uh trans. Okay. And also maybe the nav bar also. Maybe the nav bar also. See, see before it was like this. When I click control shift I

45:40 is the laptop screen. Okay. when I try to minimize it at a certain point. See, see the nav bar what will happen? See this all things have uh you know come into this button. Okay. Now still if I compress see Can you see how it is getting uh uh how it is responding to the screen size whatever it is? Okay, understanding.

46:28 So that is why that is what I want to show you guys. So whatever application you also build it should be responsive. Okay, it should be responsive. For that we have something called media queries. Okay, for that we have something called media queries. So that media queries will give us you know uh responsiveness to our web applications. Okay.

47:33 So let me create another file. What shall we create? Index 2 dot html. Okay, I'll give the boiler plate here. Then after let me give a div.

48:25 Let my div be empty but let me give a class for it main. Okay. Now create I'll create one CSS file style dot style five dot CSS. Okay. Now I'll now I'll try to link this file dot CSS. Me open this picture mode. Let me link this style sheet here

49:14 sorry the sty dot CSS fine now in style f.t CSS what I'll do using main class I'll give uh background color something like gray. Okay. Now let me check whether Sorry, I've not given height and width right. Let me give width.

50:40 Okay. Now it is light gray. Now I'll write a media query so that at a particular screen size my CSS should change like uh at uh screen size um media and I'll write max width of

51:32 60 pixels. Okay. Now here I'll write dot sorry main to change the background color blue. So let me control C. I'll open this in Google Chrome

52:17 so that I can check the responsiveness here. Let me write another media query for it at red media whenever it is having a minimum width of one 10 1 10 1 10 1 10 1 10 1 10 1 10 1 10 1 10 1 10 1 10 1 08 on the 24

53:06 pixels. Then I'll change my CSS again to background color. What did I give there? Blue. Okay. So now let me check it here once. See this is my desktop size. Whenever I reduce it whenever it is lesser than that means wait I'll show you from second see till in from the phone I'll tell you whenever my screen width is maximum of 760 or 780 whatever I've given there yeah it is 760 I guess till 760

53:56 it's 760 yeah till 760 60. This will work. This CSS will work. See it is 760. Whenever I move a little about 760, see my this CSS is coming again. Okay. Now if I increase it and whenever my screen touches 1080 what I have given here 1024

54:42 2 4 see 1 22 2 2 3 also it will be the 23 is not working. Okay. Whenever it crosses 23 I have written whenever my media my screen is having a minimum width of,024 pixels please give me this CSS. Whenever it is having minimum width of,024 that means I'm giving this CSS. Okay. Okay. Understood?

56:00 I hope everyone understood this. So uh what we will do is here we will we will write one more screen size for maybe tab you think like um we will write media [Music] minimum width of uh I think 760. Okay,

56:46 760. And what was the second screen size? It is,24, right? max uh width of 1,000 24. Okay. Now what we will do? We will tell them to apply another background color.

57:38 Okay. Now let us check whether this will work or not. will come from here till 760. This will work. This is not working. Color wrong. chocolate. Okay,

58:28 this isn't working. should work. Why it is not working? Give green here. You're tough. 761 I'll give maximum width of three I'll give

59:16 it is not Okay. Did I make a mistake somewhere? I guess main background color. Oh man. I have not given pixels here.

1:00:06 Okay. Till 720 pixels. Sorry. 760 pixels. This is fine. After 761 I'm giving this till till, 2020 23 I'm giving this. Okay, let me give,24 year

1:00:53 20,24 again you the I'm giving this a screen size of uh the desktop you think this is Sorry, mobile screen. Okay. And this is for tabs. Okay. And this is for uh laptop or desktops. Okay,

1:01:40 understood how we uh you know divide our uh screen size and give our responsiveness. Understood? Yeah. Right. So this screen size would be for mobile. Okay. This screen size would be for tabs are you know the screen size whose uh minimum width will be 761. Okay.

1:02:27 And this is for our laptops and desktops. Okay. So you using this you can write CSS. Okay. You can write CSS for your website so that it will be responsive. So that it will be responsive. I hope everyone understood this. I hope everyone understood.

1:03:32 So I've told you we have some CSS libraries. Okay, we have some CSS libraries which will helps us uh you know in uh cutting down our work. Okay. like you have we have many we have plenty libraries but let us use this bootstrap. Okay, we have something called Bootstrap. I hope uh not all but uh I hope uh uh I hope everyone had not all but some

1:04:19 people know this bootstrap okay who worked on the web pages web applications. So what you know you can see the tagline for it build a fast responsive sites with bootstrap. Okay. Build fast responsive sites with Bootstrap. Understood? So if you come down, I'll tell how to use Bootstrap in it. Okay. I'll tell how to use Bootstrap. First let us create a file.

1:05:10 In this create a file called navbar dot html. Okay. narrow.html.clumation. Enter. Now I'll tell how to use this bootstrap here. Here you can find uh you can find this include via CDN or include v uh install via package manager. First of all uh forget about this package manager. I'll tell you while doing it in react.

1:05:56 See this include via CDN you have they have given you two links two uh tags here one is linker tag and one is crypto tag. Okay please copy this link tag and paste it in the header tag of your paste it in the header tag of your file. Paste it in the header tag of your HTML file. Then copy the script tag. Paste it inside the body but at the last of the at the end of the body only. Okay.

1:06:42 Whatever you write, whatever HTML content you write, you have to write above the script tag only. The script the crypto tag should be the last uh element of your body. Okay. last tab of your body. Fine. Clear. Now go to uh once again I'm repeating search for bootstrap. Open this getbootstrap.com. Open uh in the landing page itself. If you come down a little bit you'll find this two CDN uh you know you'll find these two links to copy paste. Okay. You can copy this. Copy this. Paste the linker tag in the header tag.

1:07:27 Okay, you can see this is the header tag. Put the link tag in the header tag. And put this crypto tag in the body tag. Okay. Now I'll tell how it will work. Come to docs. Okay. Click on docs. If you come down, you'll find the components here. You'll find the components here. down the component inside the components you can find a nav bar here click on this nav bar inside boots tab you click on this docs in the left let's uh in the sidebar on your left hand side if you come down there are components inside components

1:08:12 there is a navbar okay click on that navbar and if you scroll down in in the navbar You'll find the first one. Please copy it. Please copy it. Please copy it. Please copy it. Okay. The first number you can see this clipboard option here. If you click on this clipboard, it will get copied.

1:08:57 Now come back to your HTML page. HTML file. Now here paste that navar inside your body above the script. paste that nav bar inside the body but above the script and format it. How to format it? I'm telling you the shortcut

1:09:59 So this is the shortcut to format your code. Okay. Alt shift and F. Alt shift and F will format your code. Okay. Now after doing this, click on show preview. Copy this and open it in your browser. Open it in your browser. Okay. So did we do anything? Did we write any code

1:10:45 for this? No. Just we have copied it from this bootstrap and we have pasted it here. Right. Now let us check whether this is responsive or not. Okay. Till here it is fine. But now let us check whether it is responsive or not. See now let us check whether it is

1:11:31 responsive or not. So this is our screen. Now when we try to minimize it at a particular point all the um navar items are you know collapsed and when you click on this then they will appear. So did we write any CSS for it? Did you write any CSS for it? You can see did we write any CSS for it? No. Right. I will write in a CSS for it.

1:12:33 Did we write any CFS to it? So this is what the power of Bootstrap is. Okay. No need to write any you know uh media queries for it. Already whatever components are there in Bootstrap are responsive. What all components are there in Bootstrap are responsive. Okay. What all components are there in Bootstrap are responsive. Okay, understood. If you have any doubts now, please write it aside. Okay. After uh in the last 20 minutes of the session, I'll on the live chat then you can ask whatever doubt you

1:13:19 have. Okay, understood.

1:15:02 So uh this is all about HTML and CSS. Okay. Now let us move into JavaScript. Now let us move into JavaScript. Before moving into JavaScript, I want to share this files with you. So give me a minute. I'm sharing these files with your faculty.

1:16:17 I'm sharing it uh with your faculty. Please ask your faculty to share it.

1:17:03 the center zip file. Please ask your faculty to share it with you.

1:18:38 Okay. Uh I have forwarded uh the all the HTML CSS files whatever we have discussed to your uh faculty. So now let us discuss about JavaScript. Okay. So, JavaScript was you know uh introduced in the year 1995. Okay. Between 1995 to 1996 I guess. Okay. after that you know uh it was not so interactive.

1:19:25 Okay. So what happened is some organization called European computer manufacturing association has hand over the JavaScript. They have took JavaScript and they have developed the JavaScript okay in a such a way they have standardized it. Before they have taken JavaScript it was not so good to use. Okay. Was not so good to use. So an organization called European Computer Manufacturers Association has handovered JavaScript. they have standardized it in

1:20:12 year 1997. Okay. Until present it is with the same organization. And one more thing JavaScript is also called as IKMAS script. Okay. IKMAKMA is nothing but European Computers Manufacturers Association. Wait, I'll show you. script. So you can see is script where it is.

1:20:59 Huh? my script. The full see this European Computer Manufacturers Association Okay. European Computer Manufacturers Association. Okay. Now,

1:21:45 JavaScript is in their hands. Okay. JavaScript is in their hands from 1997. From 1997, they have standardized it. And whatever versions you see, whatever versions you see, the version are called ES ES. Okay. ES from E from 1997. The versions are started like there's no JavaScript version one. It is called ES1, ES2, ES3 like that. ESS is nothing but XMAS ECMAS script. Okay. Is nothing but ECMA S is nothing

1:22:30 but script like that ECMA ES1 ES2 the versions are like that. So we are in ES we are in ES4. Okay. Okay, we are in ES14 which was uh uh released in 2023 I guess. Okay, the latest uh version of JavaScript is ES14 which was uh released in 2023. Okay.

1:23:31 So this is the basics about JavaScript. It was founded in 1995. Okay. But it was not standard. After IMA has taken care as hand over the JavaScript. Okay. from 1997. They have standardized a JavaScript in a such a way that the ser it is you know uh no application is running without JavaScript. I mean in the front end in front end whatever it is there must be JavaScript. Okay. In front end, in front end, back

1:24:18 end whatever technologies they might use. But in front end, in the user interface along with HTML and CSS, JavaScript is mandatory because that gives the functionality. Okay, that gives the functionality. I hope I have explained you uh what is JavaScript in the beginning. Did I? [Music]

1:25:05 So I gave you an example of uh I guess okay I'll give you another example. See uh you think about a car. You think about a car. See car you know uh what happens while manufacturing first the steel body will come only the steel body. Okay. After that then it comes for painting. Okay. Then everything gets painted. Then all the seats uh you know uh seats uh the mirror the steering

1:25:51 everything gets fitted at last they'll fit an engine okay in the front of the car uh inside the boner they'll fit an engine okay till in this process you can compare it with our development also like the car will come with the metal body whatever it is. After that it will get painted. The metal body is nothing but your HTML. Okay. After that painting is nothing but your CSS like painting not only painting adding uh uh you know seats whatever it is. Okay. After that without the engine if you

1:26:38 paint the car, put wheels for it and you know uh you put it put everything in it like seats whatever uh color you want you put it and without engine you put it on the road will it go? Will it go? Right. So after giving after uh you know fixing the engine to it after allocating what what all engines are there to it what all motors are there to it then the car will start moving if you drive right. So till HTML and CSS the website only

1:27:26 with HTML and CSS the website are static. Okay. The website are static like without an engine you put a car on the road will it move? No. Right. So it is static. It is like a you know uh what do you call it is like a toy. Okay. You put it there that's it. It will be there till you move. Okay, like HTML and CSS also if you want to change some data in HTML it will not change automatically like if you type date today's date and you put it till you change the date on your HTML it will be like that only right so so

1:28:14 you need an engine to drive that car okay you need an engine to drive that car. So what happens if you give that engine now you can take that car anywhere from one corner to another corner. Similarly, if you use JavaScript, you will you'll be able to make you'll be able to make your web application dynamic. Okay, you you can you'll you can able to make your

1:29:00 web application dynamic like your date will change automatically. Okay. If there any day it will also change automatically. If any notification to be displayed automatically it will come like that. If you make use of JavaScript then you can make your website dynamic. So that that is why we use JavaScript in our front end mandatory with HTML and CSS. Fine. Now let me explain.

1:29:58 Just give me a minute. I'll drink some water and come.

1:31:46 Okay. Now let us come to variables in JavaScript. Okay. Let us come to variables in JavaScript. So here in JavaScript when it was introduced they have introduced with only one variable called where. Okay. One variable called where. Fine. So what is the issue with this where okay

1:32:32 so totally we have three uh types of variable that is I'll write where let and con okay why where and y let and y const okay but in Java there will not be uh the variables with the name you know like int. Okay, there will there will be no int int comma float comma double comma care. So this won't be in

1:33:20 this won't be in JavaScript. Okay, this won't be in JavaScript. We'll only have So we'll only have this vat and con. Okay. So before that in any variable you can store any type of data like where where uh you can say name. Okay name

1:34:07 engine. Okay where phone number you can store it as directly like this. Okay. And uh in session you can store it a boolean proof. Okay. Like this you have to give. So this is a string. This is a number. This is a

1:34:52 boolean. This is a boolean. Did you leave anything? So for now uh only this let us look into the primitive data types. Okay. So when to use where and when to use let and when to use const. I'll tell you the difference between vlet and con. Okay. So

1:35:43 what is the main drawback of VA? So think see you all know right this is where a So this is declaration. Okay. This is declarization. This is initialization. Okay,

1:36:29 you're initializing a value for it. Okay, so in where what happens is you can declare it in one line, you can initialize it in another line and also you are able to again declare it and you are able to again initialize it. Okay, you can declare a variable with where you can initialize it again. You can redeclare it. This shouldn't happen. Okay, this

1:37:14 shouldn't happen. like think if I'm uh working if I'm working from Hyderabad and my one of my colleague is working from Chennai on the same uh code base. Okay. So he will use this variable where a and he will use it at in my task. I'll also use it where a and I'll do it for suppose see there is a number so here I'll take a string a b c number fine it will not give a error but here what happens is

1:38:02 here what happens if we develop a code from there it pushes the code into the production here I'll push it then my server will crash. Okay? Like I'll get some errors. With that error, my server will stop running. Which is which shouldn't happen. Which shouldn't happen, right? Because he is declaring a variable A. He is using it as a number. Here I'm declaring a variable and I'm using it as a string or number maybe whatever number I am using it for. Okay, put it number only if you want.

1:38:51 This will give me error. See first of all I shouldn't I should not able to declare it again. Okay. Right. I should not I I should not be able to declare it again. Right. I shouldn't be able to declare it again right so that is why aftermas script they have introduced this let and con with let here in let you can initialize it you can initialize it

1:39:41 and you can redeclare it and sorry you can reinitialize it how manyever times you want okay how manyever times you want you can reinitialize it okay be = 20 okay Sorry. Okay. Like this. How many other times you want you can reinitialize it. But it will not able it will not allow you to redeclare it. It will not a uh you know it will not allow you to redeclare it. Okay.

1:40:29 You can see it is giving me error. Cannot redeclare. Okay. Can see this. Cannot redeclare it. Cannot redeclare it. So that is why we have got this yet. Oh, sorry. It's cannot redeclare it. Okay.

1:41:44 Fine. Now coming to const. Const is nothing but a constant. Const. Okay. where you can you should declare and initialize the value in the same step. If I if I try to declare it and if I try

1:42:30 to initialize the value, it won't work. It won't work. So you have to declare and then and there you have to redeclare it. Okay. Then and there you have to sorry declare the value. You you have to initialize the value. Understood.

1:43:30 Sorry guys. Okay. Then so this is about const. So this is about const. Fine. So now let us see so and when to use what to use I'll tell see in the most of the cases in whatever it may be whether it may be react or express node in any JavaScript file maximum 90% we'll be using this con variable able that 10% we'll be using this let

1:44:17 variable. Okay. But we might not use we might not use this where we might not use this where. Okay, understood? 90% of the cases we'll be using only this const. And in the 10% cases we will be using let like inside for loop if you want to change the value. Okay. If you want to reassign a value to a variable reinitialize a value there we use let otherwise const only fine. Now let us come to

1:45:04 index dot js.

1:46:29 You can take a screenshot of this if you want. Okay. You can take a screenshot of this. Can take a screenshot of this. Okay. Now come to index.js file in index dot js file. Now let me write all the variable how the all the data types. So con name equal to [Music]

1:49:05 What's that?

1:49:53 Fine. This is an object. And uh we can write on obese equal to singing program and

1:50:46 whatever it is. like this. So this is a string and this is a number and this is a boolean. This is an object. And this is

1:51:33 okay. In JavaScript, this is how you write a string. This is how you write a number. This is how you write a boolean. This is how you write an object like inside uh curly braces a key and a value. Okay, a key and a value. Wait, I'll show you key value. Okay, inside you have to write key and the value. The value might be any data type. Okay, if it is if it is in string you can write it like this. Okay. If it is in number, you can directly write it like this. Or else you can create another object inside this

1:52:19 like uh you can uh insert address. Okay. You can you can also create uh you can also create another object inside it. But we will give the key for it. Address inside address shall we give or

1:53:05 wait let us give permanent address. Okay. insert permanent address also I'm giving the same okay inside an object you can also give an object inside an object you can also give an array also like [Music]

1:53:56 Okay. Inside object but you have to check whether you are having a key and a value for it. Okay. You are having a key. This is the key and no equal to symbol. This is colon. No equal to. This is colon and a value for it. Okay, you're having a key and a value for it. Understood? And inside array also you can have obies like this. And you can have a number also here like 1 2 3 4. And you can have a boolean also here two. And you can also have an object

1:54:43 and also you can also have an array inside it. Okay, this is a string, this is a number, this is boolean, this is an object, this is an array. Okay, inside any inside the object and also inside an array you can have any data type but the main difference is inside object object will start with an curly braces. array will start with an uh square braces, square brackets. Fine. So, inside an object, you'll have key and a value separated with a comma. Key, this is the key and this is the value. Okay? Whereas in the array you'll have

1:55:30 only the value that means you can call it as a element element of an array. You can call this as an element. Okay, excuse me. This is the element. This is the element. And this is the element. Separated with a comma. Okay. Separated with the comma. Okay. Understood. I hope everyone understood the data types here. And I want to tell you about the naming. Whatever JavaScript variable you're naming, whatever JavaScript variable or a functions, we'll come into functions ne

1:56:17 uh in after a few topics. But um let us discuss about the name. Whatever uh naming you give it should be in Okay, it should be in camel casing like if you have seen here I have given a permanent address like this. Okay.

1:57:07 Like uh if you have a uh two words, if you want to give two words for a variable like const my name, if you want to give, you cannot write my name like this. Okay, this is wrong. This is wrong.

1:57:54 This is also This is also wrong. Okay. The correct way of writing is const my name. This is camel casing. This is camel casing.

1:58:40 Okay. This is called camel casing. Understood? This is camel casing. The first letter if you have two words. If you have one word, you can directly write it starting with the lower case. Okay? If you are having any second word, that should start with a capital letter. Okay? That should start with capital letter. Okay? This is the naming convention in JavaScript. Hope everyone understood the naming convention. How to uh write a name for a variable.

1:59:26 camel casing. Okay. The first letter should be small. The first word first letter lower case and the second word first letter in upper case. So that if I read if see if I write like this my name who you cannot identify. Can you uh read this variable name? It is difficult right? So whatever how manyever uh you know uh letters you have how many words you have make sure in the first first word

2:00:14 first letter of the first word should be in lower case and rest of the words should start with capital the first uh the first character of the first uh the rest of the word should be in upper case. Fine. This is about the naming convention.

2:01:39 So uh I hope everyone understood about this uh JavaScript variables when to use how to use right how to use and when to use. If you want you can take a screenshot of this uh difference between where lat and const. Okay. And you can also take a screenshot of this. Uh however I'll send this code. I have already sent the HTML and CSS code with your faculty. Please ask your faculty uh to share it. Okay. If you have any

2:02:26 doubts, please uh note it down. Uh 12:40 I'll be enabling the live chat. Whatever doubts you have, you can ask in this live chat. Okay.

2:07:34 Yeah. Uh I guess uh the live chat is on. Uh if you have any queries please try to post it. Yeah, I hope the live chat is on. If you

2:08:21 have any queries regarding anything, you can ask it in the live chat. Why we use JavaScript? My god. Clearly I've explained. I have given you the car example. You're asking why do we use JavaScript? What can I tell? The JavaScript is used to give a the

2:09:08 dynamic functionality to our web pages. Okay. It is used to give dynamic functionality to our web page. Okay. uh if with HTML and CSS the web the the web page or web whatever you build it will be only in static mode okay till you change the data that will not get changed okay by JavaScript you can like you want to change the date day by day okay if it if you don't use JavaScript daily morning you have to open or else night after 12 you have to open change the it and you have to save it.

2:09:55 So with JavaScript everything is dynamic. Okay, automatically uh your date will change without your uh interference. Okay, like that. This is a small example. So with JavaScript you can achieve many things. Okay. You can make your website, you can give life to your website. You can think you can give life to your website.

2:10:51 Yeah. Anything else students? If you have any doubts, please uh you have to use this dot js extension. Okay, for file see you can see index.js here index.js JS is the dot you have to use for file.

2:12:15 anything else? Uh students, if you have any doubts, please post it in the live chat. I hope everyone understood how to uh register uh in IBM and how to complete the course.

2:13:54 students. If you have any doubts, please post it in the live chat. Deadline to complete MongoDB and uh IBM is uh before this course complete before your training session. I guess this is the second week, right?

2:14:40 Uh before the last date of your training class. Okay. Before the last date of your training class, please complete it.

2:16:00 Students uh please don't waste time. You have any doubts please ask in the live chat. We are here to clear your doubts in the last 10 minutes, 10, 15 minutes.

2:17:14 So I hope everyone understood today's session whatever we have discussed we have discussed about media queries like giving responsiveness uh to our web pages using this media queries okay writing the screen size there. After that we have seen a CSS library called Bootstrap. CSS library called Bootstrap. Name is index or index JavaScript. Which extension name extension uh do you need?

2:18:09 Okay. After that we have discussed about Bootstrap and the CSS library. Uh in that CSS library we have seen how to include the uh script tag and the link tag from Bootstrap. Then we have seen uh we have copied and pasted uh the navbar from there right. We have copied and pasted the navbar and seen how responsive it is without writing any CSS. Right? Then we'll let then we have seen uh introduction to

2:18:56 JavaScript. We'll look look into uh we look more into Bootstrap while we are uh doing React. Okay. While we discuss React, we'll you know uh look into React. uh we'll look into bootstrap there deeply how to make use of it. Okay. Then after we have seen JavaScript type different types of variables in JavaScript, right? Different types of variables in JavaScript.

2:19:45 After completing uh after seeing the different types of variables when to use what what is the different between those all where latlet and const we have seen the data types how to write data types these are the data types in JavaScript okay and we have seen the naming convention how to declare aer variable in. Okay, I hope everyone is clear till here. If you have any doubts, uh we have still more five minutes, you can post it in the chat.

2:20:32 Excuse me.

2:23:07 Yeah. Uh students if you have any queries please reach out to your faculty. Please uh tell them the query whatever issue you are facing. Okay. So that they will come to us and they'll you know uh bring bring your query to our notice so that we can resolve it. Okay. Uh so shall we wind up the session here? I hope everyone understood today's session. Okay. Uh students uh we'll wind up the session here. Uh

2:23:52 okay. Thank you all. Uh thank you for joining. Have a nice day. Okay, bye-bye.