Fresher Got Selected as Frontend Engineeer | JavaScript and React | ProCodrr Mock Interviews

HTML CSS JavaScript react G and GitHub npm Tailwind react how are you yes sir I'm fine sir okay just introduce yourself then we'll move to the questions yes sir thanks for giving me the opportunity sir uh my name is shya D and uh I am from Pune I have done my bch in information technology in 2021 and from the W walan College of Engineering sangi and uh currently I'm looking for job okay yeah so how long have you been learning web development uh from past 4 five months I I have been working on web development what are all the Technologies you have learned so far I'm working on the M Stack so I have learned HTML CSS JavaScript react in the front end and uh some of the back end like mongod DB and nodejs okay so this interview is for front end so we'll mainly focus on HTML CSS JavaScript and react okay yes sir okay so let's start or can you can you tell me what is what is HTML HTML is hypertext markup language language which is uh basically used for describing the content and the structure of a web page okay what are semantic tags in HTML what sir semantic tags uh semantic tags are like which means uh describe its meaning to the browser or for the developer for example uh table tag it uh shows its meaning these are like semantic TS can you give me four examples apart from table uh table article then footer header yeah that's these are yes okay so apart from providing meaning to the developer and browser does it help in any other way in um search engine optimization also it helps yeah that's correct okay so what is difference between tag and uh element in HTML uh element is uh tag with its content included uh tag is just the starting and the uh hand tag and the content with content it is called the element okay what are attributes in attributes uh attributes provides additional information about the uh element or the tax and they are included in the start starting time okay yeah it is not a starting time it is opening time yeah yes open yeah what is difference between div and SP uh d uh D is a block level element and span is a inline element so block takes the full width of the mean whatever the parent it is in and in line is take the width of the content that yes can you give me some examples of elements 2 3 four five examples in line uh for example uh span tag uh then image tag okay and another I can't I know what I can okay no problem apart from this width difference is there any other difference like block has complete width of its parent and inline has width of its content inside it so is there any other difference block elements always start on the new line yeah in line are always me they can be inside of text or anything okay so can we give height and width on inline elements uh height and WID no we cannot okay but on image tag we can give height and width what it right on image tag image is an inline element right yes sir and we can give height and width on Element image right oh yes yes how is it possible so image itself has its own attributes like width and height yeah but even if we give using CSS it works like it is in line but how height and width Works sorry sir I can't I don't okay so basically in line elements are of two types one is replaced in line another is non- repaced in line so replaced in line means those Elements which come through some URL for example image comes through some URL okay yes video tag is also in line but it comes through an URL same is the case with iframe so those elements inline Elements which came through are are loaded through an URL those are called replaced inline elements and on replace element inline elements we can give height withd okay thank you s I didn't know this yes okay now do you know difference would been canvases and SVG in element uh in HTML so I just know that they are used in graphics yes okay in difference you don't right oh no I haven't used it okay no problem uh let's move to CSS can you uh tell me what is full form of CSS uh cascading style shoots okay can you tell me the meaning of first word in the full form Cascade full form sir full form is cascading Styles sheet what does it mean by uh cascading cascading uh means in CSS it means that how the styles are applied to the elements uh Suppose there are parent element and a child element so if we apply style to the parent it will also apply to the child but if unless until we specify some specific style to the child element so uh it is the process in which it is applied Styles or the priority which is given to the okay you said if if we give some Style on parent it will be applied to the child also yes let's say we give width on parent 500 pixel will it be applied on the child also or if we give border radius uh no sir but uh cascading is like the priority which is given to the Styles okay in which uh order are the styles are applied yeah that is that is correct that is better like cascading does not have any relation with the parent it is it is the order like in which order the CSS is being applied so there is one Cascade rule in CSS that whichever style will come below that will be applied like below Styles will override the Styles above if yes uh like they conflict each other okay and what is it specificity specificity is like the priority which is given to the selectors which selector have a higher specificity they are applied uh that styles are applied first and U if means there are same um element have two um selectors yes and which selectors are given higher priority okay yeah that's correct now now can you tell me what is default value of position property position property has a default value of static okay yeah that's correct now what is difference between position relative and position absolute relative position uh is relative to it the normal uh Statics static position and absolute is um position according to the ancestor element that it takes yes okay yeah like you're close it's good now let's move to our next question what is flexbox uh flexbox is a layout um system system that we use in CSS uh for me defining the layout of a web page yeah that's true now there is one question I have if let's say we have one container D on which we give display flex and inside the container we have two spans Span in Span one it is written hello in Span 2 it is written world so if we give height and width to span will it work yes sir okay but span is an inline element should not work why it will work uh sorry sir I okay so basically it will work so whenever we give display Flex on the parent all of its Childs automatically become display block okay so even if we use any even if you just go and give display in line that will not be taken it will be rejected like it will be overwritten and automatically it will become display block if parent has display Flex okay okay so that's why any element if we put inside Flex box we can give height and width okay okay okay uh what is Box model in CSS uh Box model is which suppose uh every element in HTML have some uh it includes like content then padding border and the margin so this uh every element has all these four things so incl this is called the Box model Box model okay there is one property called box sizing border box so yes sir do you know what is the default value of box sizing uh it's content box okay so why do we give what happens what is difference between content box and box uh border box uh in content box uh when we calculate the total width uh the padding and the margin are are included with its content also is the total width it's calculated with the including its uh padding and marging border so with with contain box uh uh with border box uh in the whole width the means the whole we is calculated uh includ ining the I think yeah you are you're going in the right direction but it is not 100% correct sorry sir I you you forgot mean I in water box uh we don't include the total um in the total width of the content we include the Ping and margin we don't calculate it separately me okay you are saying the other way around whatever you are saying the for box border box that is for Content box okay so and margin and padding is not calculated here margin and Border we we should say margin and Border uh sorry sorry padding and Border okay margin is outside so uh yeah that is that is fair that is good now let's move to JavaScript so can you tell me different data types first uh before going to that question can you tell me why do we need JavaScript for making websites so JavaScript makes the web pages uh interactive okay that is for dyam dynamic content we can okay so what are different data types in JavaScript uh in JavaScript there are eight data types uh seven of them are non primitive and primitive and the other one is non-primitive uh like number uh then string uh then uh symbol big int undefined null and object is uh non primitive yes that's true so why do we have these two categories what is difference non Primitives are uh mean we cannot directly uh uh have a we have a reference to that object we cannot directly change that values that's why yeah like partially correct okay now what like what in how many ways we can create variable in JavaScript three ways using V uh late and uh const yeah so what is difference between let and V so where uh where where using where we can redeclare the variable and it has like a Glo Global scope if we use it outside okay and late we cannot redeclare it but we can reinitialize its value but we cannot redeclare it and what about the scope of L uh L is a block scope L has a block scope okay this is correct like for let that is block scope this is correct but war is not a global scope variable what is a function scope variable oh okay okay [Music] so what is difference between par parameter and argument yes sir uh in parameters are passed at the time of function definition when we are writing function definition at that time parameter are passed and arguments are the actual value that we pass when we call the function okay yeah that's true now what is difference between slice and splice method array method slice slice is uh used to means Suppose there is string and uh that slice used to we have to give two arguments in that the start and the end index okay for AR I'm asking are you are you telling for string it will I think it will work the same way uh for a like for string it is little different okay I think splice splice method is not present on string okay slice is there to take elements hello one second your voice is breaking let me check hello hello yes your voice was breaking I think there was some issue in my internet okay yeah so slice and dis for array methods splice uh is U we want to take um element means we want to bring elements from uh array we have to mention the start index and the uh end index and from that we can take I'm not sure about the splice method sir okay okay so you know about map method yes sir map uh why do we use map method in AR uh when we want to transform an array uh we use map method yeah that's true now let's move to okay uh first tell me what are promises in JavaScript promises uh promise is like object and uh it is used to uh for it's a solution to the problem that we have with the call back call back heal problem so we for that we use promises because it's like object it uh returns a promise okay how much experience do you have no sir I'm a fresher okay you're answering very well that's why I thought you have some experience yes I have in so I'm looking for a job so that's why okay so far is good let's see how it goes what is uh Dom Dom is like uh Tom is a tree like structure that is uh is made by the browser mean it is used for uh mean JavaScript uses do uh HTML elements to manipulate the elements in the HTML yes that's true now like you know event bubbling and event capturing uh no sir okay no problem now let's move to react can you tell me why do we need react why can't we build everything using JavaScript yes sir uh because uh with JavaScript you have to select every element multiple times so it makes mean after when there is a big application it becomes very difficult to manage that um and maintain that code with react react has a modular approach means uh you can create components and it becomes very easy to manage every part of the code okay okay so basically the problem in JavaScript is we have to select multiple times right yes sir okay any other like only if the problem of selecting yeah no sir also with um react there is a react is very efficient in updating the Dom it it doesn't reflect um immediately change the Dom it has a virtual Dom which means first it updates the virtual Dom and then only the updated part is updated in the actual Dom yeah butv but in JavaScript also we update only the part which we need if we don't update everything on the page let's say if you make a counter app you will update the in text of that counter element right you will not update everything so yes sir JavaScript also that is also efficient so it reduces the Dom manipulation yeah that's that's correct yeah that's correct so basically we don't have to manipulate the term in react right like whenever we make react we don't even write a single line of code to manipulate term right yeah yes sir so basically the react is a declarative approach of programming and JavaScript if we make JavaScript project that is imperative approach of making applications do you know these things declarative and imperative uh yes sir I have read yes can you tell me what is difference between imperative and declarative I don't know exactly declarative means we uh it's the code becomes very easy to manage uh yeah that's true that's true but that is not the exact difference between uh declarative and imperative basically uh declarative means that we tell our component or our application that this is our state I will update the state I don't care about the UI UI will automatically be updated okay okay but in imperative way of programming means means there will be some variable we will create or there will be some state that will create in JavaScript in JavaScript there is no concept of state but we can call our normal variables as a state and if we update the variable we have to update the Dom again every time we update the variable we need to update the Dom so we need to tell do this and then do that so the code becomes double almost double one is for increasing the variable one is for updating the Dom that updated value to the Dom so if we can do something uh if we do do something in JavaScript in 100 lines the same thing can be done in react in 50 lines yes sir because of declarative approach it reduces the Dom manipulation part from JavaScript yeah so that is difference between imperative and declarative what is concept of a state in Javas uh in react yes sir uh state is like mean it's like a dynamic aspect of a component uh or a variable that we we want to keep track of and change with some event or something like okay now why don't we use normal variables why do we use react uh react state um can't we change the variable yeah say uh in react we cannot directly mean uh update that variable with the with a event so we have to use um the state like we have to use hooks for that what if we update a variable directly and use it on what will happen it doesn't uh update actual in the UI yes that's true basically state is something if we update a state it reflects on our on our UI state is that kind of variable normal variables will not update on the yes now let's move to some output based questions I will send you some JavaScript code Snippets you have to share your screen and and open one vs code folder where you can create a HTML file and JavaScript file connect it yes sir open in the browser is it visible sir yeah I can see your screen [Music] yes so I have to create new HTML file yes create a new HTML file connect a Javascript file to it zoom in your vs code two three times do control+ yeah yes that's good yes just add one H1 it's okay create Javascript file add one [Music] H1 world yeah just write hello world in H1 open this with live server open the console I zoom in the console also four five times say it's not control+ it should Zoom uh okay that's okay now I will send you some code Snippets you have to guess the output in the Google meet chat box okay so I have to guess the output sir yes say to it would be 10 okay can you explain now it will WR yes when in full function uh first this x is a has a it's outside the function so first uh it will be undefined and when we are um this running when this function is executed uh X will take the value of 10 I think so okay so online number 10 uh online number four 10 will be console logged right yes sir okay but we are trying to access it before before value is being cre assigned to X yes sir so how the 10 will come so first it will be assigned the value of undefined uh in the execution context and when we are running we are executing this function and because it is in this function it will take the value of 10 while executing this function okay you can save it and check so can I check here you can check here whatever wherever you think is undef yes can you explain why it is undefined so the yes it will it will be undefined in initially but I thought it will take this value no because before we are accessing before assigning that's why it is undefined oh okay sir okay what will happen if we change that bar to let on line number five where to late yes so it would be same output okay undefined right yes okay you can clear it and uh make it l uh no sir I think it's undefined uh one second just wait don't run it now yes what will be output same so same okay why do it like same reason because of same reason it will be yes sir okay you can save it and run it there is error iting yes because L has a block scope we can we cannot use it before uh declaring sir okay because of block scope we cannot use it yes because is um declared in this uh function and it is being used before it is being uh declared that's why the if we declare it outside of the function what will happen if you copy line number five and four copy line number four five four and five both select both lines and remove all the code control copy this and remove all all the code yes remove everything remove everything and paste the copied code or you before for function no no remove remove everything just do contr a and delete back yes yeah now paste paste those two lines okay what will happen out uh what will be output in this [Music] case I think s I think same sir same error yes sir yes this will be error but the reason is not because of the block scope the reason is because of temporal Red Zone let uh let do you know temporal Dead Zone I have heard but I am not yes no okay okay so let and const variables and they are put in temporal Dead Zone if value is not assigned to it they're created they are present in the memory but they put in a space that is called temporal Dead Zone and if we try to access it we will get that error that you cannot access this variable before it is initialized okay okay sir the reason is not block scope it is temporal Dead Zone okay okay sir okay uh now I will send you the next question yes yes sir yeah can you tell me the order in which order the output will come yes uh first start will first start then uh end and then time out okay why it will be in this order uh because it is a asynchronous function so it will be executed after the uh other code is executed okay yes that's true can you tell me the process through which it will go how it will go and come uh yes so first um first this will execute and uh this function is uh is uh stacked in the uh uh call back q and after this other code is executed it will be on the call stack and then this uh function will be executed after there the call back call stack becomes empty this that's true that's true now you you work with promises right uh yes sir okay I'll send you one promise related question abent copy copy all thing yes the first uh in end will be executed and uh then the time out and then this promise okay okay you can check you can check the order can you zoom in your terminal also is it possible to [Music] zoom zoomed everything right yes it's okay and first uh okay do you know the reason behind this first promise is coming then time out you don't know no sir no problem this is Advanced question okay so don't worry if you are not able to answer basically uh this set time out that and the promise both will go to the Q but there are two cues one is call back Q when is microtask Q okay so first set time out will go to the call back queue and then promise will go to promise function will go to the microtas and out of if both cues have some call back function the microtask Q is given more priority okay so okay microtask Q will be emptied first and then call back Q will be emptied that's why we see here that time out is coming later first promise is being printed Okay so okay so I didn't know about the microq so I will check it yeah no problem so all the promises and do you know mutation Observer no problem if you don't know okay there are some things which go to the microtask you including promises and event listeners set time out these things go to the uh call back que okay and call back has less priority yes sir okay have you worked with Asing function uh yes sir in some somewhat in projects okay I've sent you one code related to that and copy it and paste it the first uh result will be result and uh then the hello world say it again no no hello what I have to tell in this on line number six what will be value of result we are console logging result right so what will come in the console it would be hello world sir okay yes okay that is an async function you have you noticed that uh yes sir okay so will it be hello world yes sir because there is no other thing so okay okay you can run it okay promise so function returns promise that's why which function asynchronous as function return promise yes promise object that's right yes Asing function always returns promise so whatever you return from the using function that will that will be wbed in a promise weting this now can you get this value this hello world value as a string in the result I don't want the result to be a promise you don't need to remove the innc don't remove the sync so I think I have to it sorry sir I want okay okay no problem okay so I am sending you one question what will be output of this if we console log or print it in the console what will be output of this so it would be true okay because you're comparing two arrays right two AR yes and both are same okay you can check it you can console log it and print it uh just put put this in the console l otherwise nothing will come so I think it would be false because it are uh immutable okay that's why it has a different reference when you create different op yes you can save it and Che false if we compare to empty objects what will happen like empty object dou equal to empty object uh false sir because uh every object has a different reference yes that's true now I'm sending you new question so user to uh will uh uh get the referals to the address of user one and uh user two also can access the properties of user one okay so what will happen to user one after we console log on line number 15 and 16 like on 15 what will be user one the whole whole object user one will be printed and what will be value of name in user one it would be John sir no [Music] no yes sir John and what will be value of name in user to user two is a rames okay okay you can close this terminal and open the console of browser because yes okay both are getting yes do you know why both are getting changed yes sir why because uh the reference address is same for both the object so if we change one it will be changed for the other yes that's true now let's move to next question so basically I am sending you an array copy this and will out all the values which are less than three so use spitter method and after filtering out we we we should get all the values which are less than three oh I have to print this yeah print whatever is the new array you need to print it don't use new keyword is yes new arror you can do yes yes now all the values that we have in in this array after filter I want you to modify it and add five to each value to this new array sir yeah in the same line after filter after you are doing filter okay in the same inline uh can you chain chain map method uh instead of filter filter should be there after filtering whatever value you are receiving you will use map on that so basically wherever your cursor is you can use do map [Music] yes yes now run it that's good now can you convert this return in statement to an implicit return without using return keyword can you do uh without using return qord Yes because we are using Arrow function so we can return if the statement is single we can use without Arrow so I have to remove the cly Braes yes semicolon also yes same with Filter also same do same [Music] thing now yeah now it is in one line all the logic that's good yes now can you create one remove this code remove everything okay create one string and you can create is like variable s s Str something like that and put hi I am I am something your name you can give I am so I write everything in a small small case right everything is small letter I everything okay h h of high also remove make it small okay now I want you to make the first letter of each word capital letter can you do that like perform some operation on this string and generate a new string using this string where the first letter of each word is capital letter first letter of each word sir yes okay I can make the whole using uh the two upper case uh function but I okay okay so can you make it uh like can you transform it into array like array with each word like array with four words hi I am sh okay I spit yes split with M uh one space uh is this correct sir this is close Okay you can check what is coming in there you can check [Music] for sorry sir I okay just put space in your string where you are doing split just put space in the empty string yes now here basically you want to split using the space okay okay now can you can you do some map operation on this array and transform it into like transform each like now you have one array right of four words now transform the first letter of each word can you do that e sorry sir I am not okay I know that we use two uppercase function to what I okay okay we want some hint or shall we move so what we can do is you are getting the Val Val means you are getting each word okay yes yes you can transform the first you can select the first character of word how you can get the first character of I String yes that's what I am how okay you don't know how to get the first character right mean using uh index I can get yeah using Intex you can get same like an array but uh this is a string so can I get this yes yeah you can get on string you can use it like array okay okay you can make it AER case okay I think it is a function you have to call it yeah basically you are not is storing the return value of this in the ARR like array do map you are doing now your your return value are not console login yeah yeah I have to take it yes now the last part is left we need to and can I [Music] use yes you can do that go I have to get the remaining letters so [Music] yes so I don't know okay why do we use slice method on a stream slice yes okay I can concatenate the remaining stream yeah yes sir it's working okay I think value. length you don't need to pass I think it will work automatically s just remove that let's see if it works just pass only one okay yes that is optional it will automatically take to the end yes if let's say you want to one less than the end then you can use like you can pass second arent okay so in this one I gave you a lot of hint okay now let's move to our project part where you have to make some projects okay so let me think what will be good would you like to make project in react or JavaScript which you which you are comfortable a react sir okay so have you created a react project or you have to create [Music] what yes so is it created and do you have some project or you will have to create or will you use online some ID I will create here sir this folder okay then you can use we and create here yeah can I delete this one yeah delete you can delete using can I create using GRE yeah yeah use we that will be faster yes okay so basically you have to create a Todo app where there will be one input fied and there will be one add button if user types in the input field and click on ADD then that that will be added in the to-do list basically you can use ulli for making to-do list and basically you have to add two functionality create and delete okay okay and if user clicks on any one of them that will be deleted can you yeah so you have to make a to-do list where there will be one input field just open that open the code I will explain again no problem okay open in the browser Local Host 5,500 okay remove the extra code so basically I want you to create a to-do list in which there will be one input field and one add button when we click on the add button the content which is typed inside the input field that will be added in a UL basically so in a list that will be added and that input field will be cleared and you have to implement a delete functionality also whenever user clicks on the lii or that too list that will be deleted you understand oh yes sir yeah so can you zoom this this V Cod Zoom it more one one two step yeah no right no file is not getting zom yes okay close the terminal yes yeah styling does not matter just create P minimum yes so I have to first create an input field yeah input field and a button so it'll be better if you use a form tag here use a form tag okay sir T types sir [Music] add and delete both I have to delete button will not be there in okay here it will not be there for now just uh implement the add functionality I so for this uh project you have 30 minutes okay so right now 218 up to 3:15 you have time okay you [Music] [Music] see [Music] so all I have to make in the app yes make it here only okay so than [Music] where how to add it please yes now you can make some ul and lii Below whenever user clicks on the add button it will come Below in the UL below the form you can create one UL where inside Ali each value will come as user keeps entering okay [Music] see sh for k I Che you want some hint yes sir yes so create a new variable for the value of input input value set input value something like this and on change you will set that input value don't remove that don't remove that create a new State input [Music] value yeah that will be a string which will go to the value of input so I have to change here [Music] and you can also give value property on input what here value input value e. target. value no no input value yes now you have to update on click you have to update the to do Har yes so I have to add this input values to the to yes yes okay oh sorry camera [Music] [Music] ch [Music] [Music] [Music] name is also necessary to give no name is not required I can't D [Music] me okay ch check the console browser console he notifi [Music] how to set this I how to set the value that was correct do control but it saying it is not def okay yes I have to okay [Music] I have to make it ready [Music] we don't close the console every time let it be open it is not getting as an AR because of yes because of what [Music] online number 12 you are doing wrong some something wrong on line number [Music] 12 okay if I directly Q Val it is not [Music] I get this what does the push method return do you know this means uh it adds to the array add yes it adds the new value to the array but what does it return okay whatever it returns that return value is going in the set to do okay and it Returns the length the length length of newly added like why can't use it can't use push [Music] here [Music] all one hint I can give you is put this input value inside an array right sir yes this is not the final solution but it is it will do some job half half work it will do okay you can check what will [Music] happen what happened did you notice yes I think I have to bring [Music] it yes did now yes now add something else add add some more values to the list okay it is changing it is not adding the new value you know why because we are always adding one value okay so I have this work so I have to take the previous values yes take the previous values you have to take it goog [Music] [Music] go okay [Music] I have to spread inside the array not outside the array and don't use object okay okay means I have to use spread operator inside the this will also not work we are providing two two values to the set to do I have to provide only one okay [Music] yes sir it's working now after clicking on ADD clear the input field like automatically clear using Code okay once user clicks on the add button that should be cleared yes sir it's working okay now for delete functionality we don't have the time okay and oh yes sir now the interview is over you can stop sharing your screen and we'll discuss okay yes so first thing what do you think will be selected for this no sir okay I need to work on my logic I think okay and how many points will you give to yourself out of 10 points four sir okay so basically if you ask me as a fresher I will select you I will take you okay so you'll be selected for this round like as a fresher you will be selected and I will give you seven points 77.5 considering pressure okay so you performed very well you have given all the answers well some questions you were not able to answer that uh like that were some Advance questions all the questions that were fresher level you were able to answer and you explaining like you your answers were to the point not something else okay so yeah yes uh still you need a lot of improvement like you need a lot of practice you didn't have the practice that's why you were struggling to make the to-do project it was not a difficult project that I gave you right uh yes I have to practice more your your concepts are clear I would say uh you need to um do lot of practice so you don't need to watch a lot of videos just just make lot of projects okay and always you can improve your Concepts also you can learn new things and now if I ask you how like what did you learn from this interview uh yes I I got the points which I am I need to work on some of the concepts I need to work and I have to make projects but okay see the coding round I have to work yes you have to practice more okay and do you have any question for me yes I just want to if you can take um my another interview if you want after some days on react or something me I will prepare better for the next time if okay let's see if possible we'll do next round okay uh yes whenever you are is available no just prepare for one month two month we'll do after some some time okay it will take some time to to get good so still lot of students have more than around 400 student have filled the form so it will be difficult to take twice but let's see if possible we'll do okay yes sir sure sir okay any other question thank you this was my first interview so mock interview okay this was your first interview of any kind yes sir then you performed very well actually yes sir um there can be Improvement but considering first interview as a fresher is very good okay yes sir okay any other question uh no sir no sir thank you sir okay okay bye okay yes sir thank you sir bye

Channel: Anurag Singh ProCodrr

Views: 177,446

Keywords: Frontend Interview, HTML Interview Questions, CSS Interview Tips, JavaScript for Beginners, Entry Level Web Developer, Mock Interview, Frontend Developer Skills, Fresher Interview Preparation, HTML5, CSS3, JavaScript Interview, Web Development Interview, procodrr mock interviews, procodrr

Id: tw5SybhCav4

Length: 103min 31sec (6211 seconds)

Published: Tue Feb 13 2024