Critical HTML Questions

1) What is the difference between HTML Tags and HTML Elements?

Ans: HTML Tags: The HTML tag indicates that the document is a HTML element.
Or in easy words the HTML tag contains an HTML element inside it and shows it
on the web page accordingly. Different HTML Tags hold different kinds of HTML
contents inside it. It starts with a < symbol and and ends with a > symbol. For
example <img> is a tag to contain an image in the Webpage. <h1> is a tag to
contain header content in the web page.

HTML Elements: The HTML elements are the content of a HTML document. The
elements are bound by different HTML tags to specify the content type of the
element.
<h1>This is a header <h1/> here This is a header is a header content or a
headline of a HTML document. It is enclosed by the h1 tag, this tag indicates
that the element is a headline.

2) What is semantic coding system in HTML?

Ans: In my words, a semantic coding system in HTML is simply a meaningful

coding system in html. Which means we can understand the codes and
content inside an html tag just by reading the tag name. For example <b> is
the tag to make a content bolded. Which sometimes can be hard to identify.
Instead of <b> tag we can simply use <strong> tag, to emphasize the content
bound by this tag. For another example we can declare a section by using
<section> tag, which can be sometimes misleading for larger codes to identify
the main section, header section and footer section. So we can use <header>
tag to wrap up the header content, <main> tag to wrap the cream content of
the web page. And <footer> tag to wrap and identify the footer section of a
web page. Which can be more convenient for understanding the purpose of
the markup.

3) What is an image map?

Ans: An image map is used for linking many different web pages using a
single image. It is represented by <map> tag. One define shapes in images
that you want to include as part of an image mapping

4) What is the purpose of alt attribute of a img tag?

Ans. The purpose of using alternative texts is to define what the image is
about. During an image mapping, it can be confusing and difficult to
understand what hotspots correspond to a particular link. These alternative
texts come in action here and put a description at each link which makes it
easy for users to understand the hotspot links easily.

5) How does the browser prioritize the style applied on a HTML element?

Ans. There are different types and methods to apply style on HTML elements.
We can apply style by using the inline style attribute, by the connected JS files
and which is more popular is to attach a separate style sheet to the HTML
document. But the browser always prioritizes the style which is applied by
using the style attribute on the HTML. That means if we apply style both in a
separate CSS file and using the inline method with style attribute as well. Then
the style which is applied with style attribute will be prioritized.

6) What are the differences between html4 and html5?

Ans:

● Consistency in Handling Malformed Documents

● Better Web Application Features
● Improved Element Semantics

HTML 5 invites us to give add a lot of semantic value to your code. There are
natives solution to embed multimedia content.
The rest is important, but it's more technical sugar that will save us from doing
the same stuff with a client programming language.

7)What are semantic tags in html? Give me some examples.

Ans: Semantic tags are some meaningful tags that indicates the
content type of that tag.
<nav> <main> <footer> <header> <audio> <video> <strong> <small> etc

8) What is the purpose of Article, div, section, nav, aside?

Ans. The <article> tag specifies independent, self-contained content. An

article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.

The <div> tag wraps up large chunks of code to apply similar styles to
some codes.

<section> tag is used for specifying different sections of a web page.

 <nav> tag is mainly used for containing the nav elements of the
webpage.

<aside> tag is used to describe the main object of the web page in a
shorter way like a highlighter. It basically identifies the content that is
related to the primary content of the web page but does not constitute
the main intent of the primary page

10) Why will you use Meta tag?

Ans: The <meta> tag defines metadata about an HTML document. Metadata is
data (information) about data.

<meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document,
and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page),

search engines (keywords), and other web services.

11) What is the difference between inline, inline-block, and block?

Ans: Inline elements just take only the space needed for the content.

Inline-Block element is the hybrid of inlilne and block. Like inline tags it takes
up just the space needed for the content. But we can also use block element
properties on it, like margin, padding etc.
Block elements takes the content space as well as the space of the whole row.

12. Difference between strong, b, bold, em, i?

Ans: <strong> tag is a semantic tag. It emphasises the value of the content
like <b> tag.

<b> tag increases the font weight and make it bolded. But it is a traditional
html tag not a semantic tag.

The <em> element is for words that have a stressed emphasis compared to
surrounding text, which is often limited to a word or words of a sentence and
affects the meaning of the sentence itself. Typically this element is displayed
in italic type

<i> tag does the same as <em> tag, but this is just old school html tag ,not
semantic

13) What are properties and attributes in HTML?

Ans: Attributes are just characteristics of a Html element. Like style attribute
lets us to set styles for a element. Title attribute let us to set a tooltip.
Properties: All which either has a boolean value or that is uacalculated such
as selectedIndex. Attributes: Attribute' that can be added to a HTML element
which is neither boolean nor containing a UA generated value.

14) What is a Viewport?

Ans: A browser’s viewport is the area of web page in which the content is
visible to the user. The viewport does not have the same size, it varies with the
variation in screen size of the devices on which the website is visible. For a
laptop, the viewport has a larger size as compared to a smartphone or tablet.

15) Is the <datalist> tag and <select> tag same?

Ans. Select input element presents options for the users from which they need
to select one of them. On the other hand, Datalist presents a list of suggested
values to the associated input form (text) field and users are free to select
one of those suggested values or type in their own value

CSS Questions

1) What Flex layout? Difference Flex and grid layout?

Ans: Flex layout is one directional ,that means the developer can work with
either rows or columns. Align contents just in one direction.
On the other hand, the grid layout is two directional. That means we can work
with both rows and columns. Grid gives us more convenience and
independence when we are working with a complex layout.

2) Explain CSS position property? What are some differences between

absolute position and relative position?
Ans: The position property specifies the type of positioning method used for
an element. The values for the css position properties are relative, absolute,
sticky, fixed and static.

The absolute position refers and depends on the position of its closest parent
element. If no parent has a relative position set then it aligns according to the
root. Relative position is the position of the component itself, and it holds its
child elements.

3. What is a box model? And what are the different elements of a box model?

Ans: Every element on our web page fits into a box. This is known as the CSS
Box Model.

Understanding the CSS Box Model helps us to understand and lay elements
out on our page. It will also help you understand how the elements will react
to one another.

The different elements of a box model are margin, padding, border, content.

৪. What is a Hover effect? What is the purpose of the active class ?

Ans: Hover effect is how the element will react when we enter the cursor on it.
We can apply any style in a hover effect. Like if we set a different color other
than the primary color, then the element will change it’s content color
according to the hover effect color when we enter the cursor over it.

Active class is a pseudo class in css. The purpose of active class is to apply a
different style to the element when someone clicks the element.
৫. What are the different types of Selectors in CSS?

Ans. In CSS, if we want to apply style into different elements of the HTML by
external css of javascript. Then we must use different kinds of selectors to
target and specify that element.

Some common selectors are class, id, tag name

There are some more pseudo selectors which are first child, last child, nth
child etc.

Some more selectors are used in some case like attribute and type selectors
etc.

6. What is CSS Specificity?

Ans. CSS specificity is the priority of a style when different styles are applied in
different or selectors.

For example if we first set any style by the tag name, then the style will be
added to all the elements under the same tag. Then if we use class then the
elements with the same class will get that style. If we then use id to specify an
element and apply style, then the id style will be prioritized. Then the most
prioritized selector is inline style. If we add style by the style attribute then
these styles will be added. This is CSS selectors specificity.

7. What is a CSS Preprocessor? What are some benefits of Sass?

Ans. CSS preprocessors are scripting languages that extend the default
capabilities of CSS. They enable us to use logic in our CSS code, such as
variables, nesting, inheritance, mixins, functions, and mathematical
operations.

8. What is a Pseudo element? What is pseudo-class?

Ans. The english meaning is not genuine or original. Which is different from the
original.

The same thing goes for the css pseudo things. We can add something
different than the original element by using css pseudo elements. A common
method is ::before and ::after. By using this method we can use css to create a
different or fake element before and after the selected content.

Same thing goes for pseudo class. We can add some different styles to an
element other than the original. Some popular case is active, hover and
visited.

9. How will you use media queries to make a website responsive?

Ans. Media queries are vital thing of css. By this method we can add different
styles according to the user's screen size which can make the website
responsive and comforting to use.

To use media queries we have to identify the breakpoint first and then the
styles to apply by using normal css selectors when the user is using a device
which is of that screen size.

The common structure of media queries is,

@media only screen and (max/min-width: 600px) {

Selector {

styles…

10. How will you make font size responsive?

Ans. Fonts are bit difficult to make responsive for different breakpoints.
Because we have to use different font sizes when developing a website. By
selecting all the typography and manually making it responsive is quite
difficult even for small apps. So I generally use this method to apply the style
in the root.

@media only screen and (max/min-width: 600px) {

html {

font-size: 60%

11: What are CSS frameworks? And what is the purpose?

Ans. CSS frameworks are just pre-built css codes and sometimes with JS also.
The purpose is to make the developer’s life easier. Because we don’t have to
write custom css codes for all the styling and waste much time making the
pages responsive. Some CSS frameworks are Bootstrap, Tailwind CSS,
Material UI, Chakra UI, Ant Design etc.

13. How can stop the contents which is flowing out of the container?

Ans. If the content is important like articles. Then we can set the container’s
overflow property to scroll in the x or y direction. Or if the flowing content
image is not important then we can simply set the overflow property to
hidden.

14. How to center an element horizontally center, left, right?

Ans. They’re are multiple ways to do the task. The oldest way to set the
container with the property margin-left ‘auto’ to right center the container,
margin: 0 auto; to center it according to the available width of the parent
container. And margin-right: ‘auto’ to left align the container.

But my favorite and in my opinion convenient and prettier way to do it, by just
setting the parent container display property to ‘flex’ and adding
justify-content: start to left align, justify-content: center to center align and
justify-content: right to align right.

15. What are the methods to add style on a HTML? Identify them.
Ans. If we go to the most convenient method, then we can just use the <link>
tag to attach an external css file, which I use in most cases.

Then another one is by just writing the styles in the root html file by using the
<style> tag in the head section of the HTML file.

Then which I tend not to use is just adding the style attribute to the element
itself and write some styles for the element. Which is really hard to maintain
and modify.

Sometimes we also use Javascript to add some styles with our script file.

16. What is the BEM methodology?

Ans. The Block, Element, Modifier methodology is a popular naming

convention for classes in html and css. Idealized, developed and inspired by
Yandex, the goal is to help developers better understand the relationship
between the html and css in a given project.

17. What is the difference between display none and visibility hidden property?

Ans. The display none property vanishes the element and its entire occupied
space, and another child or sibling element eats up the space which is
allocated to that element.
But if we want to just make an element invisible but under the hood the
element is still there and occupying its own space, then we can use the
visibility hidden property.

18. What is universal selector in CSS? And what is the purpose?

Ans. The universal selector is the * { …styles } selector in CSS. It is also known
as the asterisk selector.

The purpose of the universal selector is to apply some styles to all HTML
elements. Every kind and every type.

19. If you have three childs in a container and you have to allocate 250px
width how will you do it with the grid system?

Ans. First we have to select the parent container by a selector, then we have
to use display: grid; property on it. Then use simply have to write this property.

grid-template-columns: repeat (3, 250px)

20. What does RWD mean and elaborate it?

Ans. RWD stands for Responsive Web Design. Responsive Web Design means
the layout of the web page and content style will change according to the
users screen size.
We have to write different codes for different screen breakpoints and the web
page will respond accordingly and style a different style which is specified
only for that range of screen size.

JavaScript Questions

1. What is Javascript event loop?

Ans. As we know javascript is a single threaded language. Which means JS

can only complete one task at a time. This is where asynchronous behaviour
enters. When Javascript executes a task, it sends it to the call stack. and if it
takes some time to do the task, then Javascript simply sends this task to the
queue. And after finishing the rest of the task, the uncomplete task enters the
call stack again and completes the task.

2. How does JavaScript code is executed in Browser?

Ans.Javascript is an interpreted language. The browser has a built-in

interpreter. And machine does not understand our code, first it needs to be
compiled. So first the code goes through a compiler and makes it a machine
readable code. Then the browser interpreter goes through each line and
executes the code.

3. What are the differences between “==” and “===” ?

Ans. The == sign just checks the value, and the === strictly checks the value
and it’s type. For example ‘2’== 2 is true but ‘2’===2 is false because one is a
string and the other one is a number.

4. What is a callback function?

Ans. We simply know a function does need parameters sometimes, which we

provide as arguments when calling that function. We can send functions as
arguments to perform some kind of task to complete that function. The
argument function is executed automatically by the outer function. The
argument function is known as call back function or sometimes denoted as
CB Functions.

5. When will you return something from a function?

Ans. If we define a function to perform a task and we need that value for
another purpose. Then we need to return that value from that function,
otherwise we would not be able to use that value for later purpose.

6. How will you return more than one value from a function?

Ans. Javascript does not allow us to return more than value from a function
directly. But using a simple mechanism we can return multiple value from a
function but we have to destructure it outside to function in order to use it. We
can store the values in an object or an array and simply return it from the
function.

7. Tell me about bind, call and apply.

Ans. Bind, call and apply are some important methods for objects in order to
use a function in different objects other than the parent object.
We can say if a function is defined in an object A then if we want to use that
function in object B or C or so on, we can simply use call, bind and apply to
borrow that function. We can bind that function to different objects, so other
objects can access it. Call and apply lets us to provide the parameters, by call
method we can pass the arguments by using comma, by apply method we
can send the arguments into a different array.

8. What is a Closure in JavaScript? How does it work?

Ans. Closure is an interesting part of Javascript. It creates an encapsulation or

a closed environment in a function maybe that’s why it’s called a closure.
When we return a function from another function the inner function has
access to it’s outer functions variables, and sets it into a memory. This
behaviour is called closure.

9. What does the “this” keyword indicate in JavaScript?

Ans. This keyword indicates the block or object it’s called from. It’s value is
different in different locations. If we call it from a function it will indicate
towards its parent function. If we call it from the global scope, it will indicate
toward the window object.

10. What is Event bubbling in js? Or How does event delegate work in JS?

Ans. <div class=’a’>

<div class=’b’>
</div>
</div>

Here if we set a event handler, for example a click event both a and b div, then
if we click on b. The event on a will automatically gets triggered. Because b
itself is in the territory of a. That means the child will trigger the event handler
on its parent’s automatically if not controlled explicitly.

11. Explain hoisting in JavaScript.

Ans. When a js file is executed, JS always send the function and variable
declaration to the top of the code. This behaviour is known as hoisting.

12. What is a recursive function function

Ans. Recursion means Repetitive. When a function is called from its self then
this method is called recursion, this is kind of a loop under certain conditions.
Otherwise it’ll turn into a infinity loop.

13. Difference between undefined and null

Ans. Undefined is implicit and Null is explicit.

Undefined is which is not defined yet, but null is a object which is explicitly
defined.

14. What are the different data types in JavaScript?

Ans. Strings, Numbers, Boolean, Object, Symbols, Undefined and Null.

15. What is DOM?

Ans. The abbreviation of DOM is Document Object Manipulation.

All the HTML elements are the nodes of the DOM. The whole HTML itself is the
document, so that element’s content, style, information etc can be changed
or alternated by the Javascript code in the browser with different kinds of
conditions, interactions and purposes.

16. How will you know the type of a JavaScript variable?

Ans. The type of Javascript of the variable can be revealed by using the
typeof operator.

let a = 5;

let b = ‘5’;

For example if we console.log(typeof a) it will show number in the console. If

we console.log(typeof b) it will show string on the console.

17. Define block scope variable. And identify.

Ans. Block scope variables are those variables which support block scoping,
block scoping is which variables in only be available in the assigned blocks.

Let and Const are block scoped variables. Var is not a block scope. Var often
creates Global leakage.

18. What does JSON means and its purpose?

Ans. JSON means Javascript Object Notation. JSON is primarily a format for
transferring data from one source to a receiver.

19. What is local storage, session storage? And what is the difference?

Ans. Browsers give us access to some web storage to store some data. Local
storage and session storage are two of the web storages.

Local storage and session storage’s purpose is similar. Some differences are
present. Local storage is more persistent than session storage, session
storage is less persistent. Which means session storage erases the data when
the browsing tab or the browser itself is closed. Local storage stores data
even after closing the browsing tab or the browser. Local storage erases data
when the browser's history and cache is cleared by the user or anything.

20. What is IIFE?

Ans. IIFE stands for Immediately Invoked Function Expressions. It’s a specially
declared anonymous function which executes immediately after the function
is defined.

We can declare a IIFE like putting the function in a parenthesis and

immediately call it.

(function () {

…function codes

})();
21. Difference between statement and expressions.

Ans. In my words, all expressions are statements but not all statements are
expressions. Whichever statement gives us some value is an expression, and
the statements which do not provide us any value are just statements.

For functions,

Function a () {

This is a function statement.

Const a = function (){}

This is a function expression because we can have a value from this.

23. Key difference between Primitive and Non Primitive Data types?

Ans. Primitive data type is immutable, and Non-primitive data are mutable.

Mutable means when we try to alter an already declared variable or property,

it alters the real reference. Immutable means they do not alter their reference
value or clear the previous reference value. They just simply creates another
data referring to the new value. Primitive data types are strings, numbers etc.

Non-primitive data is objects.

24. What kind of language is Javascript?

Ans. Javascript is an interpreted scripting language. It is called a scripting
language because it doesn’t perform any work by itself, it just lets us script or
write some codes to perform a task and uses the browser’s engine to execute
the task.

25. Difference between forEach and map method?

Ans. Map and forEach both are array methods. Both of them loops through an
array and perform the cb function task.

But forEach only applies the cb function for every element of the array and
does not return anything. On the other hand, map loops through the whole
array perform a task for each element and return a resulting array for each
element respectively.

ES6

1. Tell me about ES6?

Ans. ES6 is also known as Ecma Script 6. It’s the modern Javascript with
easier syntax and convenient to use. Some of news features are let and
const keyword, Multi line string literals, Arrow functions, Default
Parameters, spread and rest operator, Destructuring and classes etc.

2. Why will you use default parameters?

Ans. When we declare functions sometimes we also need to declare the

parameters to receive the values that are needed to execute the function.
Without assigning the arguments function will throw an error when called,
because the parameters will be undefined, so solving that problem we can
set a default argument as the parameter value in case when the function is
called without passing an argument to avoid error.

3. What are the differences between var, let, and const?

Ans. var is the typical old school Javascript keyword for declaring variables.
Var has some limitations, the major limitation in my opinion is the risk of
global leakage because this keyword does not support block scoping.

Let and const are the latest and modern part of Javascript ES6 addition.
These keywords support block scoping and work in a predictable way.

4. How does the Spread operator work?

Ans. The spread operator is one of the features of ES6. Spread operator is a
convenient way to copy elements from an array to another array. We can
create a copy of an array by taking all the elements at once and add some
more elements into an array.

5. Difference between class and object

Ans. If we say in my example, class is a factory, objects are some products.

We can create just a single product by declaring objects. Or we can create a
factory to assemble the parts and create countless similar products with
different identities.
Similar to this example, class is a factory or a template and objects are
products or instances. We cannot create an object using another object, but
using class we can create many objects with different values and entries.

6. What is a Prototype chain?

Ans. First of all prototypes are the mechanism to share and add methods to
one object and another. There’s a saying that JS is all about objects. It is
known that every javascript object is the prototype of Object. When we add a
method to any object, that method is a prototype of the object it is defined
into. But when it goes to null, then prototype refers to the Object property. This
is Javascript prototype chaining.

7. Explain Call by value vs call by reference

Ans. There are two types of data in javascript. They are primitive and
non-primitive. Primitive data are immutable and non-primitive data can be
mutated, object, function and arrays are non-primitive data. Primitive data
holds just the value which is allocated directly into memory, that's why they
cannot be mutated, and they create a new reference when changed. But
non-primitive data doesn’t directly allocated into the memory, they just pass
their reference which stays unaltered. So, if we use a non-primitive data in five
places, changing the data just in one place they get changed in every place.

8. What is scope in JavaScript?

Ans. Scopes in javascript are just blocks from which we can access variables
and other logics. There are block scopes, local scopes, global scopes etc.
Variables from the outer scope cannot get access to variables in the inner
scope, but variables from the inner scope can get access to the variables of
the outer scope.

9. What is a Higher-order Function?

Ans. Functions can accept as their arguments. But interestingly, we can also
pass functions as the argument of a function. The functions which accept
other functions as their arguments are called higher order functions.

10. What is API? Difference between Get vs post?

Ans. The abbreviation of API is Application Programming Interface. API is used

to fetch data from the database by server to the front end and display data.

The difference between get and post is when we want to fetch a data from
the database, we use the get method. But when we want to send the data to
the database, we use the post method.

11. Difference between local storage and Session storage

Ans. Local and session storage both are web storage browser API’s to store
small amounts of data securely. The difference between local and session
storage is mainly the time period the browser can hold the data. Session
storage is less persistent as the user will lose data as he closes the browsing
tab or browser itself. On the other hand, local storage data is stored in the
browser as long as the user doesn’t clear his history and cache from the
browser.
 12. What are cookies? And why will you use it?

Ans. Cookies is a kind of web storage the browser lets us use.

It is basically a text file which lets us store a small portion of data securely. The
cookie is a useful method to remember a user. For example logging him in
without a hassle and remembering his settings to set the web pages for his
convenience.

13. What is object-oriented programming?

Ans. Object Oriented Programming is a paradigm to reduce codes and make

application structure and codes simpler. Object Oriented Programming is also
known as OOP. The four pillar of OOP are

Encapsulation: It means simply keeping the related variables and functions

into a single object.

Abstraction: It means to reduce the possibility of unnecessary impacts and

changes.

Inheritance: Instead of writing different methods for different objects we can

make a single method which will be inherited by different objects and use it
accordingly.

Polymorphism: It is a way to call the same method of different objects.

14. Difference between Array vs LinkedList.

Ans.

15. How will you debug a JavaScript application

Ans. First of all I need to reoccur the bug and try to understand why,when and
which line of code is occurring it. Then I need to go to the source code and try
to understand what’s happening under the hood. Then I have to put some
breakpoints depending on the bug’s code position. If the problematic line of
code is in a function and it’s receiving data from another source, I have to find
out if I’m getting an undefined where I am expecting to receive the data. To
do this I can just proceed with a step at a time or just watch the variables
from the dev tool or IDE. And then move forward with the next steps.

16. What is template literal in ES6 and what is its purpose?

Ans. Template literal is a new feature of ES6, which lets us to write multi-line
strings and make it dynamic easily.

17. What is destructuring?

Ans. Destructuring is a convenient way to extract element from different

position and different index. For example, we can simply extract the name
property from a object by object destructuring. If we have an array we can
destructure it’s element using array destructuring.

18) What do you mean by IIFE?

IIFE is a function in JavaScript that executes as soon as it is defined. It is also

called as self executing anonymous function.

19. What is a for of loop?

Ans. For of loop is just like for loop. But for of loop just loops through the
elements or collection of arrays and strings.

20. What is the purpose of for in loop?

Ans. The purpose of for in loop is to loop through all the properties of an
object.

21. What are the states of promises in ES6>

Ans. The initial state of a promise in ES6 is pending.

When the promise is fulfilled successfully the state is fulfilled.

If a promise fails upon completion that state is rejected.

22. Name the newly introduced string method in ES6?

Ans. string.startsWith(),

string.endsWith(),

string.repeat(),

string.includes()

23. What is the REST Parameter?

Ans. Rest parameter is a method to easily handle an indefinite amount of

arguments passed in a function. If we don’t know about how many
arguments a function is going to accept then we can just use this operator to
collect all the args and even loop through it.

24. Is the arrow function a statement or an expression?

Ans. Arrow function gives us a reusable value. So, arrow function is an

expression.
25. How can you create a template for creating similar objects?

Ans. Using the class keyword, we can create a template for creating similar
objects. This is one of the main pillars of Object Oriented Programming,
‘Inheritance’ .

React Questions

1. What is reactjs? Tell us about advantages and disadvantages of using react

js.

Ans. React is a JavaScript library invented by Facebook.

Advantages: One of the advantages of React Js is, it's easy to use. Let us
create dynamic websites faster and in an easy way. We can create reusable
components which helps us in the long run. Huge libraries and third party
resources are available for react. And the main advantage is React doesn’t
rerender the entire document, it just renders the changed state associated
components.

Disadvantages: React is changing rapidly every week. The libraries tends to

change their work procedures, the pace is too much and never ending. And
with the pace, the documentation is not improving and being clear which
sometimes be a barrier. And some developers say that JSX is also
problematic with React.

2. What is JSX? How does it work

Ans. The abbreviation of JSX is JavaScript Syntax Extension.
React uses JSX to write HTML elements. JSX lets us write codes which looks like
HTML, which starts with an opening tag but it is turned into javascript code
and creates a html element using React’s ‘createElement’ function.

3. What is Virtual dom? What are the differences between virtual and real
dom?

Ans. Virtual Dom is an important part of React. It’s a copy of the real DOM and
synced with the real DOM. Virtual DOM is a programming method to compare
and determine changes to the real DOM which is saved in the memory.
The difference between the virtual dom and real dom are real dom actually
determine what to show in the screen, but virtual dom cannot be shown on
the screen, the purpose of VDOM is to compare it with the real dom and
identify changes to real dom, this algorithm is known as DIFF algorithm.

4. Differences between props and state?

Ans. Props are immutable, but state is immutable by an associated function.

Props can be sent to other components, states just hold the dynamic
information of the components.
Props cannot affect the components, states can change the dynamic
portions of the components.

5. What is the purpose of useState? When and why will you use it?

Ans. useState is a hook of React. It is used to contain dynamic information of

the component. If an information of an element of a component tends to
change and update the DOM, we can store that information into useState
associated variables, it will re render the component if the information of the
variable is changed or altered.

6. What is prop drilling?

Ans. Props drilling is the process of sending the props of a component to the
child components when rendering those components.

7. Difference between useEffect and useState?

Ans. useEffect and useState both are react hooks. useEffect determines under
what conditions the component will be re rendered, or on which information
or state it will be dependent.

useState is also a hook. It is used to store dynamic variables which tends to

change, and is associated to the component.

8. What other hooks have you used other than useState and useEffect

Ans. useRef hook to associate a variable to an element.

useHistory to render another component. useParams to receive dynamic

parameters. useLocation to get the present location state of the component.

9. Tell us about React Component lifecycle

Ans. As we know a React made web app is a collection of components that

returns JSX elements and is shown on the web page.

All React components have their own life cycle. First state of the life cycle is
Initialization, this state is the initial condition of the component which is
constructed by the passed props and default state. Second state is the
Mounting, this stage consists when the component returns its JSX elements
and rendered on the page. Third stage is updating, that means if a
component associated state is changed and the component’s that part is re
rendered. The final stage is Unmounting, as the component gets removed
from the page.

10. What is the purpose of a custom hook? How will you create a custom
hook? Give us an example.

Ans. If we want to avoid rewriting the same functions, we can create custom
hooks then. For example, if we plan to write firebase codes in a hook, then we
can create a custom hook named useFirebase to write the codes in it, and
call it in other components.

11. What is the most challenging task you have accomplished using react?

Ans. In the beginning of working with React, I was not clear about using
useEffect with dependencies. That was one of the challenging tasks to
understand it works and re render the page depending on other states
conditionally. I always work while enjoying my work, that’s why I am not sure if
it was my most challenging task as I always take challenges with an open
mindset to solve it.

12. What is Redux and uses?

Ans. Redux is a state management tool for managing states in React web
applications. It is used to store all the states in a store, updating the state by
writing some dispatch functions and call the states wherever necessary.

13. Do you know about React native?

Ans. Yes, React Native is a tool to create cross platform apps using React.

14. What is a Higher order component? Give us an example.

Ans. Higher Order Component is a component in React which takes a
component as props and returns a new component. It is used for reusing the
logics in the component and rendering a new component.

15. How would you optimize a react js application

Ans. Optimizing a React application is quite convenient because of the useful

error and warning messages it gives throughout the development process.
Though it makes the application development files larger, the component
works as it should work. React also has the process of creating an optimized
and minified production build, which is more optimized.

16. What is the purpose of useRef in React app?

Ans. Refs are used to create direct access to an element.

17. Difference between class components and functional components?

Ans. Class components are quite complicated. Class components use this
keyword to get access to the props and states. It uses the component
lifecycle methods.

Functional component structures are much simpler. It gets access to the

props and states directly. It doesn’t directly use the component life cycle
method, instead it uses hooks to get the updating job done.

18. What are React hooks?

Ans. Hooks are a new addition to React. It is used in functional components. It

is used to access the other features without writing classes. Like for updating
and initializing states we use useState hook, to access an element, we use ref
hook etc.

19. Name the different phases of React component lifecycle.

Ans. Initialization, Mounted, Updated and Unmounted.

20. The purpose of Context API.

Ans. Context API is a tool introduced in React not so many days ago. It is used
to store all the states in a file, update and access those from anywhere in the
React application and avoid the manual and hassle of props drilling.

21. What is React.createElement()?

Ans. It is a built-in function of React to create JSX elements into HTML

elements.

22. How to call a handler function with parameters?

Ans. We cannot attach the functions directly with parameters in the curly
braces, it will automatically call the function as soon as the element gets
rendered. We have to wrap it up in another function and pass the parameters
inside to avoid automatic call of the handler function.

24. What are fragments and why is it used?

Ans. Fragments are used to wrap two or more direct children inside it and
allow rendering it. Though we can just use div to wrap all the children inside it.
But some developers prefer using fragments instead of a div.

Node, Mongo Questions

1. What is Nodejs? Difference between Nodejs and javaScript

Ans. Node js is a JavaScript runtime. It lets us to use JavaScript as a web

server programming language with its asynchronous behaviors.
There are quite a lot of differences between JS and Node.js.
JavaScript is a scripting language which is used in the front end of a website,
only browsers can run Javascript codes. On the other hand, node.js is a
runtime for Javascript, it lets us to use Javascript outside the browser as a
server side language. Javascript can manipulate and create HTMLs, but
node.js cannot.

2. Why did you use Node and Mongo with your React project?
Ans. Because React is a JS library for front-end development, and Node.js is a
Javascript runtime for server side development. As both cannot be installed
and maintained through NPM, it is quite a handy duel for the development as
a JS Combo. And Node.js offers reliable tools for this purpose. And for
MongoDB, it gives us lightweight and easy operations to run with Node.js and
Express.js.

3. What are the differences between sql and nosql database

Ans. SQL databases are relational and nosql databases are non-relational.
SQL database stores data in a structured way. And Nosql databases stores
data in an unstructured and lightweight way. Sql databases are table-based,
Nosql databases are document and key-value based.

4. What have you done with mongodb?

Ans. I have used MongoDB for two of my projects. I’ve used Mongodb for the
users interaction and operations like adding an order, adding a user to my
database, removing his order. I’ve also used databases for admin side
operations, like updating an order status, deleting a clients order or reviews,
accepting a clients reviews, adding new services to the collection etc.
Basically I’ve implemented CRUD operations by MongoDB.
5. Have you worked on website hosting?
Ans. I’ve worked with some of the web hosting technologies, like github, netlify
for the server side hosting, heroku for the backend hosting and firebase for
client side hosting. I’ve hosted my personal practice projects on these sites.

Combined Questions

What is semantic coding system in HTML?

https://drive.google.com/file/d/1pjgx4mBDWjek1zJs8KQLu3mCMzCVD-R7/view
?usp=sharing

Ans: In my words, a semantic coding system in HTML is simply a meaningful

coding system in html. Which means we can understand the codes and
content inside an html tag just by reading the tag name. For example <b> is
the tag to make a content bolded. Which sometimes can be hard to identify.
Instead of <b> tag we can simply use <strong> tag, to emphasize the content
bound by this tag. For another example we can declare a section by using
<section> tag, which can be sometimes misleading for larger codes to identify
the main section, header section and footer section. So we can use <header>
tag to wrap up the header content, <main> tag to wrap the cream content of
the web page. And <footer> tag to wrap and identify the footer section of a
web page. Which can be more convenient for understanding the purpose of
the markup.

What is a Hover effect? What is the purpose of the active class ?

https://drive.google.com/file/d/1pjOSL6a-HYhPRZ-Lj512P_INIoJ53QFo/view?us
p=sharing
Ans: Hover effect is how the element will react when we enter the cursor on it.
We can apply any style in a hover effect. Like if we set a different color other
than the primary color, then the element will change it’s content color
according to the hover effect color when we enter the cursor over it.
Active class is a pseudo class in css. The purpose of active class is to apply a
different style to the element when someone clicks the element.

What is a callback function?

https://drive.google.com/file/d/1p_KLoC9G5TzO3R2IOTI2ISfAut5jqxUQ/view?us
p=sharing

Ans. We simply know a function does need parameters sometimes, which we

provide as arguments when calling that function. We can send functions as
arguments to perform some kind of task to complete that function. The
argument function is executed automatically by the outer function. The
argument function is known as call back function or sometimes denoted as
CB Functions.

What is a recursive function function

https://drive.google.com/file/d/1pY5R0Oa-EUcTtgeFppKgfJyV1hQLNYAt/view?
usp=sharing

Ans. Recursion means Repetitive. When a function is called from its self then
this method is called recursion, this is kind of a loop under certain conditions.
Otherwise it’ll turn into a infinity loop.

3. What is Virtual dom? What are the differences between virtual and real
dom?
https://drive.google.com/file/d/1pWrfZfQIzyBiUsmQsSdXf2JKAE1ih_al/view?usp
=sharing

Ans. Virtual Dom is an important part of React. It’s a copy of the real DOM and
synced with the real DOM. Virtual DOM is a programming method to compare
and determine changes to the real DOM which is saved in the memory.
The difference between the virtual dom and real dom are real dom actually
determine what to show in the screen, but virtual dom cannot be shown on
the screen, the purpose of VDOM is to compare it with the real dom and
identify changes to real dom, this algorithm is known as DIFF algorithm.

Differences between props and state?

https://drive.google.com/file/d/1pT-DamN_c11xVslOSbLFOSz1hFsYf6Dh/view?u
sp=sharing

Ans. Props are immutable, but state is immutable by an associated function.

Props can be sent to other components, states just hold the dynamic
information of the components.
Props cannot affect the components, states can change the dynamic
portions of the components.