HTML CSS JavaScript Interview Questions

1. What is the use of JavaScript in frontend development?

Ans. To add dynamic functionality.
To validate the user input before submitting the form.
To display current date and time.
To display dialogue boxes.
HTML DOM manipulation.
CSS manipulation.
Respond to user events(actions).

2. What is the scope of JavaScript?

Ans. Scope determines accessibility of variables.
we have two types of scopes:
1. Local scope, 2. Global scope
Local scope: To work with local variables we have “let” keyword
A variable which is declared inside of a block of code.
Global scope: To work with global variables we have “var” keyword
A variable which is declared outside of a block of code.

3. What is ternary operator in JavaScript?

Ans. We have 3 types of operators in JavaScript, we divided the operators based on the
number of operands we use in one operation.
[Link] operator: Only one operand is used in operation.
[Link] operator: Two operands in one operation.
3. Ternary operator: Two or more operands in one operation.
Ex: To print greatest of two numbers
a=5, b=6;
c= (a>b) ? a : b;

4. What are the different ways to add javascript to HTML page?

Ans. We have two ways to add javascript to html page.
1) Internal js: We write it in script tag.
<script> javascript code</script>
2) External js: We write script code in an external file and save it with .js extension. We
add that file to html page with the following tag
<script src= “[Link]”></script>
5. What is the use of const keyword in javascript?
Ans. Const keyword is used to declare a constant in javascript, once it is declared the value
cannot be changed during the execution of the program.

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

6. What is hoisting in javascript?
Ans. Default behaviour of moving all the declarations to top of the scope before executing
the code, a variable can be declared after it has been used in a program.
Ex: pi=5;
[Link](pi);
var pi;
7. What is the difference between =, ==, ===?
Ans. = is used to assign the values.
== is used to compare the values only.
=== is used to compare both the values and data types.

8. What is arithmetic assignment operator in javascript?

Ans. The combination of assignment operator along with arithmetic operator.
Ex: a=a+5 // a+=5

9. What are control statements in javascript?

Ans. The statements which controls execution flow of the program.
We have two types of control statements:
1) Condition: based on a condition we can execute different blocks of code.
Ex: if, if-else, if-else ladder, nested if, switch.
2) Iterative: to execute a block of code repeatedly till the condition is satisfied.
Ex: for, while, do-while.

10. What is the difference between for, while, do-while?

Ans. For: it is an entry controlled loop, it is used when the number of iterations are known.
While: it is an entry controlled loop, it is used when the number of iterations are
unknown.
Do-while: it is an exit controlled loop, it is used when the number of iterations are
unknown.
it executes the code block at least once before checking condition.

11. What is the difference between for-in and for-of?

Ans. For in is used to iterate the properties of an object.
For-of is used to iterate the values of an iterable object.

12. What is a function in javascript?

Ans. Function is a block of code designed for a certain task and function can be created
with function keyword,to execute a function we need to call it.
Ex: function hello() {
[Link](“hello world”);
}
hello();
HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA
13. What is an arrow function in javascript?
Ans. Arrow function is a simplified version of traditional function in ES6.
Ex: let hello=() => {[Link](“Hello world”)}
hello();

14. What is the difference between forEach, Map, Filter?

Ans. forEach: used to call a function for every element of an array and it will change the
original array, it does not create a new array.
Map: used to call a function for every element of an array but it will not change the
original array, it will create a new array.
Filter: used to apply one predicate (condition) for every element of an array, the
elements which satisfies with predicate only pushed to new array.

15. What is the difference between null and undefined?

Ans. Undefined means a variable is declared but not assigned a value.
Null means a value which has no value/ empty value.

16. What is Nan?

Ans. Nan stands for not a number when we are trying to convert a string or character into
integer values.

17. What is the difference between slice and splice?

Ans. Slice is used to create a sub. String from existing array by mentioning starting and
ending index.
Splice is used to add or delete elements at any position in the array by mentioning 3
to 4 parameters.

18. What is the difference between substring, substr And Slice?

Ans. All 3 operations used to create the substring from an existing array.
Substring: We can mention starting and ending index to create subarray. Negative values are
allowed for back tracing.
Substr: We can mention starting index and length of the element.
Slice: We can mention starting and ending index to create subarray. Negative values are not
allowed for back tracing.

19. How to convert a lowercase string into upper case?

Ans. We can convert string into upper case by using toUpperCase();
Ex: str= “hello”
Str= str .toUpperCase();
[Link](str)

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

20. Difference between index of and last index of?
Ans. Index of returns first occurrence of an element.
Last index of returns last occurrence of an element.
Ex:
str= “hello welcome to javascript, she is hello”
[Link](“hello”) // [Link](“hello”)

21. What is DOM?

Ans. DOM is Nothing but Document Object Model, which is an interface to manipulate,read,
update the HTML elements on a document. Here, We have different methods to read HTML
elements from script like
[Link](“”)
[Link](“”)

22. What is the use of query selector?

Ans. Query selector can contain many conditions to read a particular HTML element.
Ex: [Link]([Link] #myId);

23. What is event handling in javascript?

Ans. A user can perform different actions on a document, we need to respond to the user
actions. The way we are responding to the actions is nothing but event handling.
Here we have different events in javascript like
1) On click
2) On change
3) On mouse hover

24. What is callback in javascript?

Ans. In JavaScript, we can pass a function as an argument to another function. A function
that is passed as an argument is called as callback.
Ex:
<script>
function display(user,callme){
[Link](`hey ${user} welcome to javascript`);
callme()
}
Function greet((){
[Link](“I’m called”) //callback function
}
Display(“Bhaskar”,greet); //
</script>

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

 25. Higher order function in javascript?
Ans. A function which is accepting another function as a parameter is called as higher order
function.

26. What is a promise in javascript?

Ans. A promise is an object which is used to check asynchronous functions whether it is
fulfilled or not. A promise has 3 different states.
1) Pending
2) Fulfil
3) Reject
To handle successful promise we have then() method.
To handle rejection promise we have catch() method.
And also we have finally block, we can execute irrespective of the result of the promise.

27. Explain Closures in js?

Ans. JavaScript closure is a feature that allows inner functions to access the outer scope of
a function by returning internal function
function foo() {
let b = 1;
function inner() {
return b;
}
return inner;}
let get_func_inner = foo();
[Link](get_func_inner());

28. Explain Async and Await?

Ans. Async keyword used along with function to create asynchronous function which
returns a promise as a response.
Await keyword is used to wait for the promise and await keyword must be used inside
of a async function.
Ex: function() {
return new promise((res,rej)=>{
setTimeout(()=>{
res(“Im done with execution”)});
}
Async function myfun(){
[Link](“This is first”);
let mad= await display();
[Link](mad)
[Link](“this is third”);
}
myfun();

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

29. What is an array destructuring in javascript?
Ans. Array destructuring is a process of breakdown the complex structure into simple
parts,that means extract the array values into different variables.
Ex: let arr= [“ironman”, “captain America”, “thor”, “thanos”, “[Link]”];
Var [bs, Bhaskar, …all];
[Link](Bhaskar); //output=> captain america
[Link](all); //output=> thor, thanos, [Link]

30. Explain Math library in javascript?

Ans. Math library:

[Link]➔ To give maximun element in given elements

[Link]➔To give min element in given elements
[Link]➔Least approx. value. i.e: 16.45=16
[Link]➔maximum approx. value. i.e:16.45=17
[Link]➔to round figure value, 0.5 below previous value,0.5 above next value.
[Link]➔squareroot of a num
[Link]➔power value. i.e: pow(5,3)=125
[Link]➔random value
31. What is the use of fetch method in javascript?

Ans. Fetch method is used to consume the data from REST api,
It returns the data in json format or XML format of data.
Fetch method has only one parameter that is Url of the REST api.

32. Explain HTML program structure?

Ans: <html>
<head>
//support content like style,script,meta content
</head>
<body>
//main content of the body
</body>
</html>

33. What is the difference between HTML 4 and HTML 5

Ans: Introduced new semantic elements such as <header>, <footer>, <nav>, <article>,
<section>, and more, providing a clearer and more meaningful way to structure content and
also Audio, Video tags for multimedia, and also new input types (date, email, url, etc.), form
validation attributes, and the <datalist> element for better form handling.

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

 34. What are some common lists that are used when designing a page?
Ans: There are many common lists which are used to design a page. You can choose any or a
combination of the following list types:
Ordered list - The ordered list displays elements in numbered format. It is represented by <ol>
tag.
Unordered list - The unordered list displays elements in bulleted format. It is represented by
<ul> tag.
Definition list - The definition list displays elements in definition form like in dictionary. The
<dl>, <dt> and <dd> tags are used to define description list

35. Can you create a multi-colored text on a web page using HTML?
Ans: Yes. To create a multicolor text on a web page you can use <font color ="color">
</font> for the specific texts you want to color.

36. What is a marquee?

Ans: Marquee is used to put the scrolling text on a web page. It scrolls the image or text up,
down, left or right automatically. You should put the text which you want to scroll within the
<marquee>......</marquee> tag

37. What is the use of an iframe tag?

Ans: An iframe is used to display a web page within a web page by creating different frames
it is introduced in HTML 5

38. What are the attributes of table tag?

Ans: Border, cellpadding, cellspacing, rowspan, colspan

39. What is !DOCTYPE?

Ans: A doctype or document-type declaration is an instruction that tells the web browser
about the markup language in which the current page is written

40. What are the different text formatting text?

<b></b> or <strong></strong> - bold text
<i></i> or <em></em> - italic text
<mark></mark> - highlight text
<u></u> - underline
<del></del> - deleted text

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

 41. How can you integrate CSS on a web page?
There are three methods to integrate CSS on web pages.
Inline method - It is used to insert style sheets in HTML document
Internal method - It is used to add a unique style to a single document
External method - It is used when you want to make changes on multiple pages.

42. What is a CSS selector?

It is a string that identifies the elements to which a particular declaration apply. It is also
referred as a link between the HTML document and the style sheet. It is equivalent of
HTML elements. There are several different types of selectors in CSS: -
CSS Tag Name Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector

43. What is the CSS Box model and what are its elements?
The CSS box model is used to define the design and layout of elements of CSS.
The elements are:
Margin - It removes the area around the border. It is transparent.
Border - It represents the area around the padding
Padding - It removes the area around the content. It is transparent.
Content - It represents the content like text, images, etc.

44. What is the purpose of the z-index and how is it used?

The z-index helps to specify the stack order(priority) of positioned elements that may overlap
one another. The z-index default value is zero and can take on either a positive or negative
number. An element with a higher z-index is always stacked above than a lower index.

45. Explain Pseudo classes in CSS

pseudo-classes are used to select and style elements based on their state Pseudo-classes allow
you to apply styles to elements in specific conditions or contexts without the need for additional
classes, some pseudo classes are
hover, active, nth-child, link , etc.,

46. Difference between margin and position

Margins control the space outside an element, determining how much space there should be
between the element and its neighboring elements.

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA

Positions determine the placement of an element within its containing element. It can be static
(default), relative, absolute, fixed, or sticky.
here margin effects other elements while position don’t

47. How to create animations in CSS?

Ans: we can apply animation by creating special block of code with @keyframes

48. what is use of media queries in CSS?

we can create separate styles for different screen sizes(viewport) and responsive designing
49. How to rotate an element in CSS?
we can rotate element by using transform: rotate () property

50. How to center a div tag in CSS?

To center a div, you can use the flexbox model. Set the container to display: flex and
use align-items: center to vertically center its children. use justify-content: center; to
horizontally center

HTML CSS JS INTERVIEW QUESTIONS #BHASKARACHARYA