frontend interview questions for freshers - Selected 🎊🤩💯
Summary
TLDRIn this interview transcript, Sha D from Pune discusses his background in Information Technology and his recent focus on web development. He covers his knowledge of HTML, CSS, JavaScript, React, and MongoDB. The conversation delves into technical details, such as semantic tags, the difference between tags and elements, and the use of flexbox in CSS. Sha also touches on JavaScript data types, DOM manipulation, and the benefits of using React for building interactive websites.
Takeaways
- 😀 Sha D introduces himself as a recent graduate from WAN College of Engineering, Pune, with a degree in Information Technology.
- 💻 Sha has been learning web development for the past four to five months, focusing on the M Stack.
- 🖥️ He has knowledge of HTML, CSS, JavaScript, React for the frontend, and MongoDB, Node.js for the backend.
- 📜 HTML is described as a markup language for structuring web pages, with semantic tags like article, footer, and header aiding in SEO.
- 🔗 Tags and elements in HTML are distinguished, with tags being the start and end markers and elements including the content within those tags.
- ⚙️ Attributes in HTML provide additional information about elements, and inline elements like span and image have different behaviors compared to block elements.
- 🎨 CSS is defined with the concept of cascading, where styles are applied in a specific order, with specificity determining the priority of styles.
- 📐 The CSS Box Model includes content, padding, border, and margin, with the box-sizing property affecting how these are calculated.
- 💡 JavaScript is used for making web pages interactive, with various data types and methods like slice, splice, and map for array manipulation.
- 🏗️ React is highlighted for its modular approach, reducing DOM manipulation and making code easier to manage and maintain through components and states.
Q & A
What technologies has Sha D. learned in web development?
-Sha D. has learned HTML, CSS, JavaScript, React for the front end, and MongoDB and Node.js for the back end.
What are semantic tags in HTML?
-Semantic tags describe their meaning to the browser and developer. Examples include <article>, <footer>, <header>, and <table>.
What is the difference between a tag and an element in HTML?
-A tag is the opening or closing marker in HTML, while an element includes the tag and its content.
What are attributes in HTML?
-Attributes provide additional information about an element and are included in the opening tag.
What is the difference between block-level and inline elements in HTML?
-Block-level elements take up the full width of their parent container and always start on a new line, while inline elements take up only as much width as their content and can be within a line of text.
Can height and width be applied to inline elements in HTML?
-Typically, height and width cannot be applied to inline elements, but replaced inline elements like <img> can have height and width set.
What is the CSS Box Model?
-The CSS Box Model includes content, padding, border, and margin for each HTML element.
What is the default value of the box-sizing property in CSS?
-The default value of the box-sizing property is 'content-box'.
What is the purpose of the map() method in JavaScript arrays?
-The map() method is used to transform an array by applying a function to each of its elements, returning a new array with the transformed elements.
What is the concept of state in React?
-State in React is a dynamic aspect of a component that keeps track of and changes with events, allowing the UI to update accordingly.
Outlines
😀 Introduction and Background
The interview begins with the candidate, Sha D, introducing themselves. They mention their hometown, Pune, and their educational background, having completed a Bachelor of Computer Engineering in Information Technology from the WAN College of Engineering Sangli in 2021. Sha is currently seeking employment and has been learning web development for the past four to five months, focusing on the MERN stack (MongoDB, Express.js, React, Node.js). The interview will primarily focus on front-end technologies such as HTML, CSS, JavaScript, and React.
🔍 Technical Discussion on HTML and CSS
The conversation delves into technical details about HTML and CSS. Sha explains HTML as a language for describing web page content and structure, and discusses semantic tags, which provide meaning to both developers and browsers, aiding in search engine optimization. The difference between tags and elements, as well as attributes, is clarified. Sha also discusses block and inline elements, highlighting the distinction between elements like div and span, and the ability to apply height and width to inline elements like images. The discussion touches on replaced and non-replaced inline elements, and the limitations of applying dimensions to inline elements.
🎨 Exploring CSS and Flexbox
The interview continues with a focus on CSS, where Sha defines CSS as Cascading Style Sheets and explains the concept of cascading, which involves the application of styles in a hierarchical order. Specificity in CSS is also discussed, highlighting how styles are prioritized based on selector specificity. Flexbox is introduced as a layout system in CSS, and Sha clarifies that when display: flex is applied to a container, its children automatically become block-level, allowing for height and width properties to be used. The Box Model in CSS is briefly mentioned, emphasizing the default box-sizing property value of content-box.
📚 JavaScript Fundamentals
Sha is asked about JavaScript, explaining its role in making web pages interactive and dynamic. The discussion covers data types in JavaScript, distinguishing between primitive and non-primitive types. The difference between let and var in variable declaration is explored, with an emphasis on scope and redeclaration. Sha also touches on the concepts of parameters and arguments in function definitions, and the map method in arrays. The conversation hints at the difference between slice and splice methods, though Sha admits to not being fully knowledgeable about splice.
🌐 Understanding Promises and DOM
The interview moves on to discuss promises in JavaScript, which Sha identifies as a solution to callback problems. Promises are described as objects that handle asynchronous operations. The concept of the Document Object Model (DOM) is introduced, explaining how it serves as a tree structure for HTML elements that JavaScript uses to manipulate elements on a web page. Sha admits to not being familiar with event bubbling and capturing, but the conversation shifts to React, where Sha explains the need for React over plain JavaScript, highlighting the efficiency in updating the DOM and the modular approach of components.
📚 Declarative vs Imperative Programming
Sha discusses the concept of state in JavaScript and React, explaining the difference between using normal variables and React state. The conversation explores the declarative approach in React, where the UI is automatically updated based on state changes, as opposed to the imperative approach in JavaScript, where developers need to manually update the DOM. Sha acknowledges the efficiency of React in reducing DOM manipulation and the ease of managing code with its declarative nature. The interview concludes with Sha reflecting on their performance, noting that this was their first interview and expressing gratitude for the opportunity.
Mindmap
Keywords
💡HTML
💡Semantic Tags
💡CSS
💡Flexbox
💡JavaScript
💡React
💡State
💡Promises
💡DOM
💡Virtual DOM
Highlights
Introduction of the candidate, Sha D from Pune, with a B.Tech in Information Technology completed in 2021.
Sha has been learning web development for the past four to five months, focusing on the MERN stack.
Sha's expertise includes HTML, CSS, JavaScript, React for front-end, and MongoDB and Node.js for the back-end.
Explanation of HTML as a Hypertext Markup Language used for describing the content and structure of web pages.
Discussion on semantic tags in HTML and their role in providing meaning to browsers and developers, aiding in search engine optimization.
Difference between tags and elements in HTML, with tags being the start and end points and elements including the content.
Attributes in HTML provide additional information about elements, included in the opening tag.
Block-level elements (div) versus inline elements (span), including examples and characteristics.
Explanation of cascading in CSS, referring to the order and priority in which styles are applied.
Specificity in CSS determines the priority of styles applied to elements, affecting the final rendered style.
Difference between position relative and position absolute in CSS, with relative positioning based on the element's normal static position and absolute positioning relative to its ancestor element.
Flexbox layout system in CSS used for defining the layout of web pages and how display: flex affects child elements.
Explanation of the CSS box model, including content, padding, border, and margin, and the difference between content-box and border-box.
JavaScript makes web pages interactive and dynamic, with different data types and methods for creating variables (var, let, const).
Importance of React in building modular and maintainable applications, reducing DOM manipulation through a declarative approach.
Transcripts
hi sha how are
you yes sir I am 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 sha D
and I am from Pune I have done my bch in
uh information technology in
2021 and uh from the WAN 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 JavaScript react in the
front end and uh some of the back end
like mongod DB and not J okay so this
interview is for front end so we'll
mainly focus on HTML CSS JavaScript and
react okay yes
sir 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 santic
T 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 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 in the start uh starting
time okay yeah it is not a starting time
it is opening time yeah yes open 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 width of the
content
that yes can you give me some examples
ofine elements 2 3 4 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
mean they can be inside a text or
anything okay so can we give height and
width on inline elements
uh height and with 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 oh yes yes how is it possible
so image itself has its own attributes
like width and
he yeah even if we give using
CSS it works like it is in line but how
height and with
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 or
are loaded through an URL those are
called replaced inline elements and on
replace element in line 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 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 shets 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 in CSS it
means that how the styles are applied to
the
elements 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 C 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 a
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
stattic
okay yeah that's correct now what is
difference between 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 mean 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
a 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 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 model is uh 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 WID it's
calculated with the including its uh
padding and marging border so with with
content box uh uh with border box uh in
the whole
WID the means the whole WID is
calculated uh including
the I
think yeah you you're going in the right
direction but it is not 100% correct
sorry sir
I 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
where 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 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
V is not a glob scope
variable what is a function scope
variable oh okay sir
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 a
stram okay slce is there
to um
take 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
disce 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 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 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
inter so I'm looking for a job so that's
why okay so so far 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 bubling 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 um
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 mean
first it updates the virtual Dom and
then only the updated part is updated in
the actual
Dom yeah but
JavaScript 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 and 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 sir I have
read
yes can you tell me what is difference
with 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 comp 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 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 up
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 narative
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 JavaScript uh in
reala yes sir uh state is like mean it's
like a dynamic aspect of a component of
or a variable that we we want to keep
track of and change with the 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 a variable yeah say
uh in react we cannot directly uh 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 okay any other
question thank
you this was my first interview so Mo
interview okay this was your first
interview of any
kind yes sir and then you perform very
well
actually yes sir
and 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 sh okay
تصفح المزيد من مقاطع الفيديو ذات الصلة
The HTML Tags They NEVER Taught You
React Native Mock Interview | Interview Questions for Senior React Native Developers
FASTEST Way to Learn Web Development and ACTUALLY Get a Job
Sintassi del Primo Programma - React Tutorial Italiano 04
Components, Instances, and Elements | Lecture 121 | React.JS 🔥
Complete MERN Stack Developer Roadmap For Beginners (2023)
5.0 / 5 (0 votes)