Fresher - Front end developer interview 2024 | web developer interview | Reactjs developer interview

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 I am from Pune I have done my bch in uh information technology in 2021 and uh from the walchand 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 four 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 javascrip react in the front end and uh some of the back end like mongod DB and not yes 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 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 mean 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 end tag and the contain with contain 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 uh starting time okay yeah it is not a starting time it is opening time yeah yes opening yeah what is difference between D and span 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 withd of the content like that can you give me some examples of n elements 2 3 four five examples in line uh for example uh span tag uh then image tag okay and another I 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 mean they can be inside a text or anything okay so can we give height and width on inline elements uh height and wi no we cannot okay but on image tag we can give height and width what sir on image tag image is an inline element right yes sir and we can give height and width on Element image right uh yes yes how is it possible so image itself has its own attributes like width and yeah even if we give using CSS it works like it is in line but how height and withd 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-replaced 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 I frame so those elements inline Elements which came through or are loaded through an URL those are called replaced inline elements and on replace element inline elements we can give height width okay thanks I didn't know this yes okay now do you know difference between canvases and SVG in element uh in HTML so I just know that they are used in graphics yes okay difference 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 stylesheet what does it mean by uh cascading cascading uh means me 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 can cascading is like the priority which is given to the Styles okay on 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 oh it is it is the order like in which order the Cs 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 uh 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 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 with position relative and position absolute relative position uh is relative to its the uh normal uh static static position and absolute is um position according to the ancestor element there 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 that we use in CSS uh for U 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 will work 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 over written 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 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 weight it's calculated with the including its uh padding and and marging border so with with contain box uh uh with border box uh in the whole WD the means the whole we is calculated uh including the I think yeah you you're going in the right direction but it is not 100% correct sorry sir you you forgot mean I in Border box we don't include the total um in the total width of the content we include the pading and margin we don't calculate it separately me okay basically 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 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 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 in undefined null and object is um 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 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 late and 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 a like a Glo Global scope if we use it outside okay and L 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 glob 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 uh 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 that slice used to we have to give two arguments in that the start and the end and uh 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 AR like for string it is little different okay I think splice method splice method is not present on stram okay slce is there to take element 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 disli 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 Cho so you know about map method yes sir map uh why do we use map method in Array uh when we want to transform and array uh we use map method yeah 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 uh for it's a solution to the problem that we have with the call back call back help problem so we for that we use promises because it's like object it uh returns 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 interviews so I'm looking for a job so that's why okay so so 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 Dom 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 Big application it becomes very difficult to manage that and maintain that code with react react has a modular approach means uh you can create uh components and it becomes very easy to manage uh 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 the react there is a react is very efficient in updating the Dom it it doesn't uh 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 but Javas but in JavaScript also we update only the part which we need if you don't update everything on the page let's say if you make a counter app you will update the inner 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 it like whenever we make react we don't even write a single line of code to manipulate on 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 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 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

Channel: Mnc Interview

Views: 247,633

Keywords: latest Front end developer interview, React js developer interview 2024, mnc Interview, fresher interview questions, fresher interview, Front end developer interview, Accenture interview, Accenture off campus drive interview 2024, new front end developer interview, fresher React js developer interview, html interview, css interview, javascript interview questions, react js developer interview questions, selected 😍, web development interview, 2024 interview fresher

Id: InDnE-fGg0g

Length: 25min 35sec (1535 seconds)

Published: Fri Feb 23 2024