frontend interview questions for freshers - Selected 🎊🤩💯

Summary

In 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

00:00

😀 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.

05:04

🔍 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.

10:06

🎨 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.

15:10

📚 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.

20:11

🌐 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.

25:12

📚 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.

Keywords

💡HTML

HTML, or Hypertext Markup Language, is the standard language for creating web pages. It describes the structure of a web page using tags. In the script, the interviewee discusses HTML's role in defining content and structure, highlighting its fundamental importance in web development.

💡Semantic Tags

Semantic tags in HTML provide meaning to both the browser and the developer about the content enclosed within them. Examples include <article>, <footer>, and <header>. They improve code readability and SEO. In the script, semantic tags are discussed in relation to their roles in describing content and aiding search engine optimization.

💡CSS

CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in HTML. It controls the layout and appearance of web pages. The script addresses CSS in terms of its cascading nature and its role in defining visual aspects like width and border radius.

💡Flexbox

Flexbox is a CSS layout model that provides an efficient way to lay out, align, and distribute space among items in a container. It makes responsive design easier. In the script, Flexbox is mentioned in the context of defining layouts and how it impacts child elements within a flex container.

💡JavaScript

JavaScript is a programming language used to create dynamic and interactive effects within web browsers. It enhances user experience by enabling features like form validation, content updates, and animations. The script explores JavaScript's necessity for interactivity and different aspects like data types, variables, and promises.

💡React

React is a JavaScript library for building user interfaces, especially single-page applications. It allows developers to create reusable UI components. The script explains React's modular approach, its efficiency with the virtual DOM, and how it simplifies state management compared to vanilla JavaScript.

💡State

In React, state refers to a built-in object used to hold data or information about the component's current situation. State changes trigger UI updates. The script discusses how React's state management differs from using plain variables in JavaScript and its importance in maintaining dynamic aspects of components.

💡Promises

Promises in JavaScript represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They help manage asynchronous code more efficiently. In the script, promises are mentioned as a solution to callback hell, providing a clearer and more manageable way to handle asynchronous operations.

💡DOM

The DOM, or Document Object Model, is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The script describes the DOM as a tree-like structure manipulated by JavaScript to dynamically update HTML content.

💡Virtual DOM

The virtual DOM is a lightweight copy of the actual DOM used by React to improve performance. It updates the real DOM only where changes have occurred. The script touches on how React uses the virtual DOM to efficiently manage UI updates, minimizing direct manipulation of the actual 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