Fresher's Frontend Interview | HTML, CSS, and JavaScript | ProCodrr Mock Interviews

HTML CSS JavaScript react G and GitHub npm Tailwind react okay hi di how are you I'm fine sir okay uh just tell me a little bit about yourself uh and just introduce yourself your experience in web development uh okay yes sir so my name is Adi Singer I belong to jabalpur madha Pradesh currently living in Delhi and I'm doing training as a full St Java developer okay you learning you're learning Java yes yes sir and I have average knowledge of HTML CSS and JavaScript okay so in this interview we will start with HTML C uh CSS and JavaScript some theoretical questions for 20 minutes we'll do some theoretical questions and then I will ask you some output based questions and then I will give you some small project to make okay so your JavaScript experience is not uh very good is it or so it's like average okay okay so let's start with HTML first so can you tell me what is full form of HTML hypertext markup language okay and why do we use HTML what is the use of HTML uh sir to make the layout of the uh web page to uh structure our website okay yeah that's that's good now can you tell me the full form of HTTP uh Hy hyper text transfer protocol yeah that's correct and why do we use HTTP what is the use case of HTTP so it takes it whatever we search in the Google uh it takes all the information from there and uh like uh it shows us okay yeah it shows what is HTTP you told the full form and what it does and what is HTP sir it transfers all the information to us like yeah yeah something okay so what is difference between HTTP and https uh s main difference is security https is secured uh like it shows the information security okay that's good whatever we uh whatever we are searching here it is secured like no one is going to see what we are doing in the that particular website okay uh so whenever a website loads what is the order of uh the content uh being loaded like which one loads first HTML CSS or JavaScript or in which order does it load uh so first to uh HTML would load okay I think and then CSS and then JavaScript okay that's good now what is uh difference between elements and tags in H HTML sir elements are like um uh like there is a H1 heading tag and between those tags there is something written that is that whole is called uh element and the and if we see that only closing tag opening tag and closing tag that is like different yeah that's correct now what are semantic tags in HT stic TX so those tags those uh don't have closing Texs okay then what are self closing tags no sir self closing text don't have closing text it only have only opening Texs okay and what are some antic tags uh yes sir I don't know okay no problem why do we use doc type in the top of file HTML file uh to S to get the uh version of that HTML yeah it's correct and what is difference between uh like section and div like there is a okay okay that section is a semantic tag and you don't know semantic tags so that question doesn't make sense for you so what are attributes in HTML why do we use attributes what are attributes um attributes are like for views for um styling or like something okay for there is one style attribute which we can use for styling and there are other attributes also so yes sir so there are many attribut yeah can you give some examples of attrib two three attributes of like examples of attributes So currently it's not coming okay so I will give you one example so you will uh you will get the idea for example uh on image tag there is a source attribute okay in the same way you can attribute like tag attribut Al attribute yeah so can you think of other attributes no or s in script tag in a script tag also we use SRC attribute yes okay no problem now let's move to next question why do we use meta tags what is purpose of using meta tags don't know sir okay no [Music] problem uh do you know uh difference between uh do you know SVG and canvas do you know canvas tag in HTML canvas Element no sir no okay no problem okay what is difference between div and span uh s da is like a block element it takes the space in a block format and span is like inline uh level element okay so yeah that's correct but what is difference between block and inline so block element can occupy the space in number of rows and number of columns and span is like only in line it takes space only in a line uh okay that's not very true like you can explain it more clearly how much width does a block element take by default we I don't know sir okay basically a block element takes the width of its parent whatever is the width of parent it will take that much width okay and inline elements take the width of its content whatever content is present inside that let's say hello world is written inside span so its width will be hello world that much only but if you write like hello word inside a d its width will be full even hello word is a small part the div will be full like full parent whatever is it parent it will take full width okay that is uh that is one CSS question now we'll move to next CSS question which is what is full form of CSS cascading style sheet okay so what does it mean by casc ing style sheet is okay like style sheet means this is there is a sheet where we write styles for our web page what does it mean by cascading So like um don't know sir okay do you know a specificity in CSS no sir okay and do you know Cascade rule Cascade Cascade rule in CSS no so the cascading word comes from the Cascade rule in CSS you can learn it later later on okay so okay sir uh do you know selector what selectors so ID selectors class selectors element selectors yeah those are some examples of selectors but if you can give explanation what is a selector those are examples of selector it is difficult so if we want say if you want to if you want any data from that uh like uh if we have a d like so I will explain it as as an example say we have a div tag okay we have uh something written under that and we given the ID and class name name uh so we will call it from there and that okay we we don't call it like we we select we just Target we can do we can say we can we can Target that element and give some Styles okay yes sir so there are different selectors you said like ID selector class selector and uh element selector or tag name selector so uh let's say there is one paragraph tag on which there is a uh uh class called paragraph okay uh let's say there is a class called paragraph and in CSS file what we are doing is we are writing uh dot paragraph color equal to red and then below we are doing P we are selecting that same element using p tag and giving it color of green so which color will be applied on the paragraph uh so um before what color you said red uh red will okay why why red will be applied uh so because uh ID lectors are more preferable okay yeah like that is class selector so can you can you tell me the order of preference which is more highest priority which has less priority and then less can you tell me from low to high which has lowest uh element yeah element as lowest and then and then ID and then class no element class and ID in this order it goes yes sir okay and this is we can say is called a specificity actually there is a number attached to that selector like uh tag selector has one specificity class has 10 and then ID has 100 we can say like this okay you can learn about it in more detail okay uh what is the use of important keyword in CSS why do we use important keywords no like there is something called important in CSS there is a word we use in CSS that word itself is important like i m p o r t a n t like this uh sir uh to do a to do a task forcefully okay yeah to apply some Styles forcefully so have you used this no sir I have only studied this okay so should we use important in our CSS files or not use um so it's a not necessary to use it but uh if we want any uh particular uh like anything if we want particularly then we use okay okay no problem now let's move to next question what are uh like what is different uh like default value of position property position property don't s okay so do you know position absolute and position relative have you used these things yes sir do you know what is difference between the two no sir okay uh sir absolute position like it's um it's not going to change uh if we do something in that particular web page and website and relative is like we can uh make changes uh according no both we can do changes we can move element from left to right top to bottom okay there is some other difference no problem what is flexbox in CSS um so if we want to any uh if we make a nav bar uh we like without CS we write it it is coming like in the it is coming horizontally and then if we uh do the flex it is like in order okay yeah that's good from left to right it will come okay okay so now uh shall we move to JavaScript questions yes sir okay so is Javascript single threaded or multi-threaded single threaded what does it mean by single threaded I don't know sir but I have studied in Java Java is a multi-threading I thought it will be single thread okay so you just guessed it right yes sir okay okay no problem so what are different data types in JavaScript uh there are eight data types can I tell the names uh string ban object object yes uh integer no integer is not a type in JavaScript in no it is also not a type so I don't know the names but I know there are eight data types okay there are two categories primitive and non-primitive so yes sir in primitive there are seven and in non- primitive we can say one or two like like if we see there is only one but some people say two what is the on data type which belongs to non primitive do you know this I think object okay yes that's correct it belongs to non- primitive yeah but what is the difference behind the scenes you you don't know that right why it is in no problem okay what are variables in JavaScript um variables like are in variables we store uh whatever the elements they want to store in one object or in Array okay that stores in a variable yeah that's correct and how in how many ways we can create a variable in JavaScript what are different keywords using which we can create JavaScript uh s didn't got your question okay so how do you create a variable in JavaScript let's say you want to store a number or your name in that variable how you will create you write like uh let uh num equals to and whatever number we want to okay yeah so is there only one method let uh is there only one way no sir we have three we have three let where and const yes that's what I was asking in how many ways we can create a variable three ways using three keywords we can create a variable let constant so what is the difference between let and were let and uh so firstly I will go with where where is like if we have defined any number or in starting we can change it later uh like it is not uh defined and let uh we can and so in short of V can be declar declared uh but and initialized and let declared but not initialized but we can initialize both at the time of Declaration like we can do let a is equal to some number where B is equal to some number though both will work same what is the difference but uh if we are writing like let aals to one uh and and then again we will uh if we will uh write let uh b equals to let let a equals to something to it will show error yeah that's correct so that is that means we cannot redeclare let variables but we can declare redeclare V variables if you do the same thing with v it will not give error this is one difference but this is not the main difference main difference is something else okay do you know scope in JavaScript what is the scope scope yes I know but scope is a uh so the for uh uh so like uh we have a code and we are declaring any um any function uh we are declaring any variable uh in the function like scope has two types I think one is [Music] and currently it's Notting in my mind but I know this one okay Global scope uh Global uh Global one and then uh that other one is uh in global uh that if we are uh out ofun out of function we are declaring any variable it will uh it will work throughout the program yes and if we are declaring any variable and under the function when in the function it will work it will exist in that function only yeah that's correct so that variable will have local scope of that function so that is called local scope yes sir but there is one more scope one is global scope one is local scope there is one more scope which is block scope block scope so I studed one thing lifetime scope like as no there is nothing like lifetime scope no it is not in JavaScript maybe another language it may be it is from like uh there is one lexical scope which is the combination of all Scopes but not for all everything but like it has more complex definition lexal scope okay so there are mainly three Scopes like even more Scopes are there but we will mainly we mainly think like there are three scope Global scope local scope and block scope so V is a local scope variable and let is a block scope variable you have to understand this what is a block scope what is a local scope how a variable is created inside a block scope how like this all things works you need to learn it okay okay so what are functions what are functions in JavaScript so function are like if we want any we want uh uh any to be even to be show after VI if if we are doing any uh kind of uh making changes like uh if we are clicking on something uh some uh button or like something uh it shows anything like a popup uh or Etc we use function for that okay we use function for that but what is function so I don't know the exact definition of function yeah like you don't need to know the exact definition you can explain in your words like if you know if you know it clearly you'll be able to explain it you don't need to remember the uh the definition it's okay you everything you learn you need to think in the terms of how you can Define this you don't need to remember the definition of books or something how let's say if someone ask what is a function you should be able to tell what is a function not what a function do okay not what a function does okay yes sir so you should prepare all the things like what if this is asked how I'm going to answer this it should not it does does not need to be the book definition that's not important okay now whenever we create a function we write something like let's say we want to take some arguments then we will uh we will write some let's say A and B and then we while calling we will pass a and the value of a and b so there are two terms here that come into picture that is one is parameters other is arguments so yes sir what is the difference between the two like what are parameters or what are arguments uh so whatever we pass in the in that uh in whatever we pass in that function or like we are passing the one or one comma 2 or like anything we are passing are called parameters okay and arguments arguments don't know okay no problem now uh can you tell me what is Dom um document object model okay that stands for yeah and why do we need Dom okay before telling why do we need Dom can you tell me what is Dom that is full form of Dom can you just explain in English or in the your words basically you can you can tell what is the use of Dom uh so to get the data from the element or class or ID that's partially correct getting the data through uh get getting the data through ID class or element that's kind of correct but uh you can improve this definition okay okay now let's move to uh you don't know react right no sir okay now let's move to some output based questions I will send you some questions you need to share your screen and I will send you questions in the chat box here in the Google meet you can copy it and paste in BS code and try to guess the output what will be output of this code okay [Music] yesen [Music] can you share your screen yes sir here the entire screen s got the question uh I have not sent it uh first open uh vs code share your screen uh so that we can make sure your files are connected properly running then I will send the question so is it yes I can see your screen can you open vs code and that's okay now connect one Javascript file to your index.html [Music] file you can cancel this you can cancel this and use this folder if you don't have anything important okay you have lot of things so you can create one new file interview. HTML okay folder you you are going to yeah file interview. HTML and create the berer plate code yes now connect one Javascript file in in this okay it didn't come properly you can do it again you can remove it and do it again [Music] should be small letter make it a small letter then it will work it will come script s of script should be in a small [Music] now put a console log here in the HTML file put console log hello sir your voice is breaking okay just write a console log in the script file Javascript file console log hello and now save both files and just test it if it is [Applause] working [Music] okay now I will send you the question you can open the chat Google meet chat okay sorry I got muted I don't know uh okay I have sent you the question you can copy that question in vs code open Google meet so what will be the uh the question is just paste it in JavaScript file paste it in Javascript file so what will be value of result here if we console log result I have forgot to put one extra line just write console log below just uh write a new console log below this line result without strings you need to write don't use single codes no no remove remove quotes remove quotes at all because we are going to console log a variable now save it and tell me output what will be remove hello from line number one remove that hello console log now what will be value of this thing yeah it will print hello from line number three it will print hello and from line number seven what it will print okay for uh from both places okay you can save it and check refresh just yeah just refresh because live reload enabled that is coming refresh it it will go yeah from first line number three it it came hello from line number seven it is coming undefined now I want you to do some changes in function so that it prints hello in both cases can can you do that change or what I want I don't want to print anything inside the function so what you can do is you can remove the console log and do some changes so that in the result hello comes okay hello that string hello comes in the result I want you to make that change okay so from line number seven you are getting undefined okay I want you to get hello from line number seven that's it yes so from line number seven you are getting undefined right I want you to get hello online number seven no uh you cannot change line number six and seven you can change inside function whatever is written from line number two to 4 you can change only those lines so by changing the line inside the function you need to get the output of hello from line number seven okay no problem I will okay you are not getting my question what what did you understand like what did you understand like what uh yeah so what I'm saying is on line number seven we are console logging the value of result okay whatever is present inside the result we are getting its value okay we are printing its value so I want you to store hello inside result okay basically uh let me change my question what we are returning you know return keyword inside a function right so what we are returning from this function uh there is a function what is the name of this function that we have created yeah Fu we can say FU the function name is Fu so do you know return keyword that we use inside a function do you know about it return keyword return no that is that is why you are not able to answer this basically you don't know the return keyword itself we need to learn why do we use return keyword and we can use return keyword only inside a function you cannot use it outside of the function okay so if you write instead of console log hello what I'm saying remove line number three remove whatever is written on line number three and type return type return and space and single quotes and hello single codes like hello in string yes that's yeah now save it and check the output okay so from line number seven we are getting hello now we have written hello on line number three but we are getting it on line number seven so you need to learn the return keyword how it works in function okay this was this is what I wanted you to do okay uh now you know for Loop in JavaScript okay so there is one array let's say uh create an array remove this code remove all the code uh write 1 2 5 1 2 3 4 5 like this number now I want you to add all these numbers using for Loop will you be able to do the sum of all numbers any method like any okay okay no problem now let's go to some CSS question now connect one CSS file uh with your uh yeah HTML okay now yes now I want you to create one box uh like create one box and give it height width of 100 100 pixel and give it some background color and then place it in on the center of of the page okay so just create a box pixel 100 pixel that's that's enough uh now just check if the box is coming the box is coming on the page yeah what is the problem you don't need to yeah yeah you have written the class but you should have written box every time you don't need to open it using live server right click and open Live server you can open the same Tab and it will work you can close all the four tabs like extra three tabs so in all the tabs it will automatically refresh you just open Chrome okay now come to vs code now now the your job is to put this box in the center in the in the center like horizontally and vertically middle of the browser yes but it is not very much Center if you check it is not it is a little bit more towards right okay yeah but we want not only horizontally we want vertically also from top to bottom it should be in between yes it is not exactly in the center and that is not not also right way like it is not exactly in Center we want exact center okay no problem now uh this interview is almost over now what like you can stop sharing your screen interview is done I have concluded so what did you first just tell like what if I ask you to just tell if you will be selected if you will be selected according to this interview or not yes and let's say if I ask you to give you yourself point point out of 10 points how many points you will give for this interview no you you will get even less point three or four okay because uh lot of Concepts you don't know uh lot of things you need to learn still it is not like you don't have done practice you don't know the concepts you you don't know what the a written keyword do okay so you need to learn a lot of things yeah okay you have watched my videos how do you watch my videos like how how do you watch just tell me okay that's that's okay but I'm asking let's say you are watching my videos so how do you watch how do you watch means like are you getting the question or not do you watch it like a movie or do you watch it like a lecture that is a question lecture means okay you make you make it uh you make notes you write code while watching do you write okay okay so uh like what are all the lectures that you have watched so far only CSS or JavaScript also okay how many videos have you watched okay so you have watched only JavaScript right okay so okay yeah yeah those are all the basic same Concepts that will be tested okay yeah so still like you you have watched all my interview questions still you are not able to answer so what is the problem here okay let's say if you're are not hesitating if you are talking to your friend will you be able to answer all the questions or more questions uh no that is not the problem you need to realize that you don't know the concepts okay you have to learn still okay okay so but interview what you have to do is you have to explain those things whatever you have learned you have to explain if you are not able to explain you will not be selected okay so how that will improve do you have any idea yeah so how it will improve is any concept that you learn first understand try to understand what it is how it works Works what what is it all about okay and then what you have to do is you have to think in this way that what if I need to explain it to someone else how will I explain okay let's say if someone is some of your friend let's say who is also learning but you are little ahead from them so you can explain them if some friend is there you can explain otherwise just think in your mind or write it down in paper that how I will explain by by saying into words how will I put these Concepts into words so just write it down how you will explain so you have to practice it how you will explain so understanding is one thing that is first thing that is important and explaining is also very important if you want to crack interviews so yeah so what did you learn from this interview yes so you should focus on the fundamental concepts of CSS and JavaScript HTML is uh good like for HTML part you explained well but still you didn't know semantic tags you didn't know attributes you knew but you not able to explain so you can uh improve those things in HTML also but it's for HTML part it's good like it's not bad but for CSS and JavaScript you need to improve you need to learn lot of fundamental concepts okay and you have from me you have learned only JavaScript and only two three videos in two three videos what you will know like only data types I have taught rest is like I've uh told history of JavaScript right so you need to watch more of my videos you can watch CSS playlist and practice it code it uh along with watching lectures whatever code I write on my screen you need to write on your vs code okay yeah that's it if you have any question you can ask okay so whenever you prepare for interview uh at the interview at the end of interview interviewer will ask if you have any question you can ask okay so for this question also you need to be prepared okay like which question I will ask just keep ready one or two question if you don't ask that is not considered very good thing okay so just prepare uh prepare that question also that at the end some uh they will ask if you have any question yes and your uh communication skills are very good you are very comfortable in speaking in English there is no problem in that and also whenever you don't know the answer you are telling that you don't know immediately that is also good thing you are not just taking time and time okay you're immediately telling that you don't know that is very good thing so your communication skill is good uh and just be like it is it your first interview or okay so considering first interview it is very good like in the way you are talking and everything it is very good and only by giving more interviews you'll get more confidence and you will be explain with confidence okay so just try to give more interviews if you get it okay and that's it okay thank you okay bye okay bye

Channel: Anurag Singh ProCodrr

Views: 379,090

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: niJkMH-wyK0

Length: 57min 0sec (3420 seconds)

Published: Sun Feb 04 2024