Transcript for:
Interview Preparation Session Notes

question answer Hi how are you hi I'm good so what about you sir yeah I'm good so just tell me a little bit about yourself and what you are studying what you have learned so far yeah okay my name is Deepak Patel and I'm currently pursuing bch computer science from suila Dei sushila bansel College of Engineering in the and I am from via District mad prades uh currently it's my sth semester and I'm doing web development related work like creating a websites and and another thing yeah so what are all the things or what are all the technologies that you have learned so far actually I have um working with uh web development approx two years ago when I was uh in second year I started my web development journey and I have actually I have uh knowledge about HTML CSS JavaScript boot step twiin and uh all the Technologies but I have mostly worked with HTML CSS and JavaScript okay so in this knowledge about uh okay okay just go ahead yes okay so in this interview will mainly focus on CSS and JavaScript little bit uh about HTML also so let's start our interview so first of all we will start with HTML so can you just tell me the full form of HTML what is the will form HTML okay HTML is a stand for hyper text markup language actually H hyper text is stand like whenever the element element like P whenever the p is uh wrap up in the codes uh angular codes then uh it it is called hypertext okay why do we use HTML like what is the use case of HTML uhuh actually we you we use the HTML for creating the skeleton of the website so that uh it can be visible to the user like okay what is semantic tag in HTML like you have heard of semantic tags semantic Texs like header footer body or sidebar Etc these are these all are centic teag because they follow a standard B like there is a section then it will so a different uh it it will create a different portion for the website okay yeah that's good why why can't we use just divs for everything why do we use semantic tags actually semantic tag currently we are working with the HTML 5 and and when the HTML 5 was introduced then there will there also come come a semantic Tex so that's why uh semantic Tech give the website or scroller Coller basically rer is the Google uh votes Google vote so which which uh investigate huh which in investigate the whole website and because of the crawler or because of the cement T he understand everything very easily yeah that's that's good so yeah mainly uh for provides yeah it it helps in Search and optimization and also it gives meaning to the developers also for example you are a developer so you will understand by seeing the footer tag that the code for footer is inside that tag yeah so now let's come to CSS or or there is one more question what is difference between div tag and span tag okay dip tag uh basically is used for uh taking a whole line of which cover uh hold the space along with the line and span T just take the uh just take the space with the content contain in it yes yeah and like that is related to its width how much width it will cover yeah but what is underlying difference like behind the scenes why it happens like that what is other difference okay span span is inline element inline element are those who take the uh space uh according to the element uh content and Block Level element are those element which take whole Space uh uh means a full line yes so it will take the yeah yeah this element call is Block Level element and the spin is called inline element yes yeah that's correct now let's come to our CSS okay and in CSS just uh can you explain uh in a bit more detail what is a block level element and what is an inline element uh from the perspective of CSS yeah okay inline element in inline element we cannot Define the uh we cannot Define the width and height and because of this are inline element if you want to give the uh height and width then you have to do H changes in their uh display property basically display property if you suppose if you have a span element okay then SP span element we can't give directly some width and height so we just set their property to inline block so inline block will give you the uh priority to uh use the width and height yes and in Block like and block element uh in Block element there is uh we can set the height and WID according to our desire yes that is correct so can you give some other examples of inline elements that are by default inline in HTML okay inline element some are uh like image tag and so image tag and then second one is input tag input element span span we have already yeah discussed okay what about anchor tag anchor tag also there is bold tag okay now I know whenever I will do my work like related to create the website then I use this T but the mostly just just like image tag and span tag input tag basically be worked with most of the in this T that's why I yeah so you said uh image is an inine element okay huh and you also said we cannot set height and width on inine elements H but on in uh on image tags we can set uh height and width how is it possible okay inline block element it is a inline block element actually image image is it is a inline block element so that's why we are able to do height set no it is in line you can check so uh uh image tag is in line element what you can do is you can share your screen okay now you can share your screen and open an HTML file and and you can open that HTML file with live server just create an empty folder your uh your vs code I'm not able to see I think you have shared only Chrome screen so share your entire screen so stop sharing and share it again entire screen okay is it visible to you yes uh okay this is my index. HTML yeah and so connect one CSS file and one Javascript file okay [Music] okay okay yes okay yeah done yeah now create one image tag and add some URL some take some image from Google or somewhere and add that link [Music] here okay yeah now you can inspect it and check what is its display property so in computed you will be able to see its property computed go to computer tab there is one layout and one computed select that image and uh click on that browser styles that is one checkbox in the side uh there is one checkbox below computed yeah below computed right side filter Styles you can see yeah so now here you can in the the filter Styles you can search for display yeah so it is display in line by default any image has display inline property now try to give height width in CSS select it give it 500 bit okay how is it working it is in line element do you know this I don't have about that you know box model in CSS huh I know okay can I explain in Hindi yes yes you can explain in Hindi [Music] okay C but INX and [Music] then and then box size border box [Music] [Music] but so what is what is by default what is the default value of box sizing it's box sizing content yeah so we set it to border box content content box but we have we should do this box sizeing border box whenever I used to create a website then I always did the three line so that yeah that's okay so you know about specificity in CSS what is specificity okay I know I know I know spe specificity actually tells that uh spe specificity yeah it is difficult to pronounce that word yeah it's okay it's very normal it is tongue twister not everyone can pronounce so yeah okay specificity specificity tells that uh suppose we have okay [Music] [Music] Hindi this indicates that class this indicate that ID this indicate that uh uh a element and this indicate super specificity actually in the by using this we can uh set to any element uh High specificity because whenever we give this property so it's uh all the property of that element become very high if we said this and after that there is uh this okay id id property uh matters high after that this and after this this and or uh if you if we go with this like uh internal CSS then internal CSS is also preferable first first one is important second one is internal CSS third one is uh uh ID fourth one is class and fifth one is this according to yeah so specificity has some kind of number number thing do you know like how much is the specificity for class like do you know that number how much the specificity of one class is come to vs code come to vs code okay and open CSS file so you have used here element selector for image okay so if you hover on that image just hover and just put your cursor so if you see selector specificity is written above and it is one 0 0 1 so the specificity of selector uh specificity of uh tag selector or element selector is one and a specificity of a class selector if you just put uh yeah it is 10 so that's I got I got recall it because uh when I have did a work on it and you also taught in in a video uh regarding this that specificity also in mathematic like 1 10 100,000 and infinite this is I have learn from your yeah that's good now uh let's move to JavaScript it is enough about CSS so you can open vs code just by default keep open vs code and just keep it like this yeah so what is uh like what are different data types or in JavaScript can you tell okay there are two mainly two types uh primitive and non okay there are two types of data types in our JavaScript primitive data types are those uh which take uh which take uh memory in the stake memory and non primitive data types are those which take the memory in the Heap memory okay and the Heap memories data is stored in the stake memory as a reference variable or yeah this one okay and just tell me some examples examples for both okay primitive for primitive data type we have string Boolean Boolean [Music] null and then also we have boo string undefined undefined find and undefine number Yeah okay or there is also a new new data type introduced right in new JavaScript versions like symbol Yes actually I haven't used this symbol but I have worked with all this yeah okay that's enough uh for primitive give some examples for non- primitive okay class object object and then Aras functions yes there all yeah so all these things behind the scenes are objects so uh like if you just say object that is also enough but if you mention all these uh different thing that is also okay and arrays and class are not different on data types uh if you just create one array just uh can clear your uh clear your this uh create one array put some number 1 2 3 4 and that's enough okay now console log below uh type of array type of this array type of array yeah yeah it's okay now check in console uh before checking just tell what will be the output this of this array type of array whenever I'm learning from a YouTuber he said that aray is a object but uh actually I he told that okay it is a object but yes yes if if we print this so I will we Weil we will get uh object as huh its type okay so we can check what is its output you can come to Chrome and check the console what is it type open Chrome yes object okay yeah so it is object now but I want to know actually when I learning learning from a YouTuber then I was in dilemma like how it is an object so can you uh which Youtuber you have like which Youtuber you have learned from uh there is an YouTuber like is it's okay it's okay Cam okay okay okay free free code C free code C is not an YouTuber that is an organization where lot a lot of YouTubers come and make videos okay yeah so yeah because behind the scenes it is an object so that's why in JavaScript there is not a separate data types for array it is just object and functions are like if you check type of function then it will be function but behind the scenes that is also an object now uh when one more question come to your vs code come to open JavaScript file what will be type of null if you check type of null what will be that console log type of null is okay cons print in the console just do just do a console log okay inside console log put that type of null whole expression yes what will be the output also object yeah why do you know this actually this is this is a bug in JavaScript from long time and it has never been been fixed because lot of code relies on this so this is a JavaScript issue it should be null it should be null but it is object by mistake okay so you should know that but why it is actually I just yeah it is like this you cannot do anything about it data type whose type of if you check its type it is object object okay it is AR is also object array is also object and null is also object and object is also object null is not object null is a different data type but if you check using type of if you check type of operator using type of operator it will give you object which is not correct but it is like this okay so now let's move to our next question which is what is difference between let and const variable can you explain like let and bar leave const const we will see later let and were okay where basically when we go with the where keyword let it remove for first when we go with the keyword like keybo equals to 29 I will go with the uh I can go with the example or I should just explain it explain it if we need we will write examples also just first explain it so basically huh basically we can re red declare it again again like keyword 91 and when then we go CG keyword so it's its value become 91 and whenever we want to use this keyword uh keyword before declaration like C CG or keyword then we will get a uh answer like undefined okay because uh when we talk about where keybord so in the memory it it becomes it uh just H the variable uh H the variable above so with the value of undefined but in the case of let when we declare it in keyword 1 equals to 34 and when we use to console this CG then we will get a error uh the error is temporal head Zone actually this thing I learned from you and it is um basically for my for me it uh very unique when I learn but now uh I have knowledge about this it is a uh Block Level element oh sorry block uh it has block uh scope it has block scope and it has Global scope okay so why is global scope you have said right so if we create a function just create a function or uh can you explain like how like block use said let is a block level element okay and V is a global global scope so what is uh what is difference like can you just uh give an example here can you just write a block like block scope variable and just like how it is different you just said block it has block scope so uh can you create a block scope and create a let and variable and show the difference okay uh I want to tell you that uh I have worked with this thing earlier but now now I am learning uh the JavaScript from beginning so that's why I haven't go with the X my script uh X my script concept so uh that's why I have only this knowledge because okay okay so you don't know the how to create a block scope right okay that's okay now you but you told that function is a uh Global scope okay so which means which means if we create a if we create a if we create a variable inside a function using V so what will happen in this in that case we'll be able to access it outside of the function never we can't it become the GL Block Level scope Block Level scope outside of the function suppose outside of the function okay and whenever you try to access this number one variable C number one variable then we you will find that we can't access this because it's a it's scope variable become local scope and outside of the local scope we can't uh use the variable so so why you said it is a global scope variable where suppose Global scope number oneals to 204 and if you want to use this then you can and whenever you going want to print it then it's value become yeah can also yeah in that case if we use let also we can do the same thing let also becomes Global scope so uh actually what you should say is let is a block scope and V is a function scope function scope is you will have to say function scope means if you declare it inside a function it will not go outside of the function you cannot access it outside of the function okay so uh and what is a block scope like if you if you use if else okay and inside if else if you create a variable using V it will be accessible outside of that ifls okay and if you create using let it will not be accessible outside of that ifs because it has block scope okay so first you'll have to learn what is a block block scope you will learn later what is a block you will have to learn first okay okay now I will send you some questions okay some JavaScript questions you have to answer that question so here in the chat in the Google meet chat you will receive the question you can copy it and paste it on in your vs code remove all the existing code and paste this code okay and don't check the browser console just without checking the browser console just try to answer this how what will be the answer of console log X line number four okay uh it it got called and its value become 20 undefined undefined okay why can you explain this okay as I told you the value when we create a variable then hting come under the picture and uh suppose it it give this when we did when when we declare a variable then its value firstly become the uh undefined and uh for the same thing for function also its value become under this uh this got host hoist above the function scope and then uh when its value become undefined and when we are accessing this so This become undefined okay and if we try to console log on line number five like first first X and then uh console log first declare X and then console log just move that line down okay line number four move to five line number yes like this now its value become 10 yeah yes so that is correct both answers are correct now I will send you one more more question okay copy this question okay first time it become I know that first time it it will go with start and uh this and this this is time off means um when we give the set time out so there is an I haven't learned but I have did this thing uh one year ago someone some YouTuber told that uh there is a um event Loop because this got exed first start then F time out print over [Music] M but right now we have given the time 0 milliseconds 0 millisecond means zero time which is no time I know but whenever this uh site Time Out come in the picture then uh JavaScript giv some send this this all the function outside the uh execution State okay after some time it get called again yes that is correct start and time yes that is correct I have did I have did this so many time because I just uh want to know Asen JavaScript that's why yeah that's correct now I will send you one more question copy that and paste it okay what will be output of this code first time it got one and three [Music] one okay first time okay so first time to first time [Music] okay tricky question can I use pen and paper yes you can use pen and paper but don't check the console huh I will never never I just want to do some [Music] one 1 2 three actually okay are you sure 1 2 three you can check the console now okay four oh why is it coming like this can you explain it now minute char [Music] it no I have not idea about it okay it's not a problem you can you can try to understand it later you can save this question okay Sor okay now we will not go to more questions I will ask you to make some can you make a to-do list uh to-do list app using JavaScript where there will be one input feied you enter in the input there will be one button add when you click on ADD uh all the list will come below and there will be one delete button if we click on delete it will be deleted so this much functionality we want we don't want uh edit functionality you want create and delete that's it so can you can you do that in this project okay and styling does not matter you can use ulli or anything styling does not matter much so you don't need to style we need bare minimum HTML that's it HTML and JavaScript okay by I have just made this project within uh [Music] that's it you can create it from scratch you have to create it right now like on the screen just open your vs code hello yes yes your audio just got stuck for us for a second so just create it right now you don't need to explain what you have created I want you to create right now here first we have to take input from the user Tex ID input text we can take us element qu selector we can what's good ex Mill B can you uh tell again what I have to do what you understood you tell you can explain like what you understood [Music] okay input button button but for pick or you for what M container C variable okay [Music] element by this button click let's get this take C I [Music] think let T what just click here button click click store [Music] can Buton click [Music] whates cck inst [Music] one click here click St input text okay input input value go variable M yeah be for [Music] Speck hello be yes is yeah you need to see everything okay your job is to make it working so whenever you feel like you need help you can ask okay [Music] [Music] next [Music] f c not the function okay [Music] C yes yes okay no problem so this is actually uh machine coding round uh we can say okay so machine machine coding round you have to build some application and when you do live coding your mind should be cool and you should not panic if you're not able to do that okay so and background noise you don't worry too much about okay because if you go in office in office there is even more noise than this and you have to work every day so ignore that noise and don't worry about that okay while working don't worry about that so it's okay now our like interview is kind of over this was the last thing last question we can say so overall if I have to rate you like uh uh for this interview how many points I I will give you out of 1 to 10 so I will give you like Five Points half okay because this uh machine like earlier you have explained the theory part very much like well uh something was not uh like something you have explained very well something not very well this one you have explained like uh like uh um because of English there was some difficulty for you to explain but you have explained uh up to the extent you could but uh when it came to the Practical thing practical coding you are not able to even console log what is uh What uh like when user is clicking you are not able to console log that and you are not able to understand how the code is running you are trying to console log it on the like below of the file it will run only once like you are expecting it to run every time you click it will never run okay so uh like when it came to practical round you you did not do well so that's why I gave you five points and if the interview was real like let's say I'm going to hire you for something some role or fresher role I will never hire you like I will not hire someone who who have prepared this much and like he's not able to code so uh you you will be rejected from this interview okay so all the things that you knew uh I have not asked something extra out of the thing right all the things that you knew uh I have asked from that only and still you were not able to do that so you because Theory as much as you can explain uh that does not matter if you cannot code it okay if you can code it and cannot explain that that is okay that is better like then that is better than being explained uh being able to explain and not able to code because when you come to company when you join any company you write code every time okay and not anyone not not everyone will be helping every time when you get a stck not everyone will help you you have to do it by yourself so you need lot of practice in making projects by yourself okay by yourself you have to make lot of projects and this was your first interview kind of thing right have you ever given interview before never yeah so first interview is never going to be the best interview don't expect it like this this is the first time you are giving interview prepare it we will do your interview like after 1 month two month whenever you are ready with es6 concepts with promises with uh like let War everything then we will do it again and I hope at that time you will perform better do a lot of practice okay lot of uh like practice project make lot of project so that whenever you are asked to code you can code it effortlessly so if you have any question you can also ask otherwise we can close this [Music] interview okay and whenever you whenever you give interview make sure uh that your environment is not disturbing not disturbing Okay so so for example someone in your house is walking so you'll be distracted okay you'll be distracted for example I think she's your mom right yes yeah so she's working so you'll be distracted why she's coming so uh whenever you go for interview it is it is not for example this is a mock interview if you don't get if you don't pass it is it is not very good like it doesn't matter like if you don't pass if you pass even you will not get a job if you don't pass not get a job but when you are giving actual interview you should be very serious about your en environment okay just tell everyone that I'm going to give interview for 1 hour nobody is going to come here okay if they come uh that will not be good uh because you'll lose your focus and you'll not be able to crack interview and will not get the job and everyone like they will not distur like you will have to tell them that so even mock interviews you should treat like a real interview okay you should tell like I'm going to give a mock interview PR it is a practice interview and if I pass in this there is a very good chance that I will pass real interviews also so just tell everyone in your house you are going to practice so that there will be no disturbance from from next time okay [Music] practice next time HTM HTML next time uh whenever you give uh actual interview uh at that time you should you should be prepared with es6 Concepts I I have not asked any single question from es6 okay so but that is very much important in companies nowadays everyone uses CS6 and spread operator uh destructuring and let conar promises Asing kit these things are used very much okay so you should uh prepare for next time and yeah all the best okay but the thing is but whenever you are in in an interview situation and something goes wrong let's say something goes wrong then what happens you lose control your over your mind like you will not you'll not be able to think [Music] but so this see inter [Music] for the [Music] intervie practice that's all it that matters [Music] so so inter Concepts [Music] HTML h out thank good night good night byee thank bye