Top 30+ Front End Interview Questions and Answers 2021 [Updated]

By | February 18, 2021
Front End Interview Questions

However, the role of Front-End developers is always underrated, but they also play a crucial role in web-development. It’s the job of the front-end developer to build such a User Interface that eases the surfing of a visitor. Earlier Front-End Development was just about HTML, CSS, and JavaScript, but now we have a myriad of Front-End Libraries, Frameworks, and other UI tools which have complexed the learning curve of the Front-End. Check below Front End Interview Questions.

There are many small and big MNC companies which hire front-end developers to build UI interfaces for their web-projects. Companies look for those developers who can create such UI which is convenient, responsive and interactive on various devices because now the web is not limited to the desktop.


Best Front End Interview Questions

As Front-End itself covers a wide range of tools, which could make its interview hard, so here we have provided some frequently asked front-end interview questions. The only purpose of these front end interview questions is to give you an idea about what kind of questions you can expect during your interview.

Question: What DOCTYPE stand for, and what does it do?

Answer: DOCTYPE stands for Document Type, and it is associated with DTD (Document Type Definition). The task of DOCTYPE to tell the user browser what version of HTML specification the document is representing.

For example the doctype declaration for HTML 5 is <!DOCTYPE HTML>. Check HTML vs HTML5 here

Question: What is the difference between null and undefined?

Answer: undefined represents no value at all, whereas null is a value itself. When we define a variable and do not assign it a value, then the variable would be undefined. On the other hand, if we want a variable with no value, then we can simply assign a null value to it.


var x;
var y= null;
Here x is undefined and y is null.

Question: What is Lazy Loading?

Answer: It is a technique of loading content on the user browser according to the user need, so the resources of the user as well as the server could be optimized. For instance, if you search something on google then in return google show only a few results on the first page, rather than filling the user request by all the search results in bulk google show only a few contents and give an option to the user to fetch more if needed.

Question 4: What is Coercion in JS?

Answer: Coercion or Type Coercion in JS is a method of converting the data type of a variable. Using the coercion process, we can convert a string to a number, or an object to boolean and so on.

For example:

var x= 23;
var y = String(x);

Types of Coercion:

In JS, there are two types of Coercion:

  • Implicit Coercion
  • Explicit Coercion

Implicit Coercion

In Implicit Coercion JS itself changes the data type of variable.

For example:

var x= 23;
var y= x+'47'   // y will be "2347"

here JS itself change the value of x 23 into string ‘23’ and concatenate it with ‘47’

Explicit Coercion:

In explicit Coercion, the developer deliberately changes the data type of a variable using different in-built functions such as String(), Number() and Boolean().


var x = "12"
var y = Number( x );   // 12

Question: What is the use of meta tags in HTML documents?

Answer: Generally, meta tags are placed inside the <head> tag, and they are used to provide the metadata about the HTML document. The main task of a meta tag to specify the document specification such as document page description, page character set, page keywords, page author name, page language, page viewport setting, etc.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="HTML,CSS,JavaScript interview questions techgeekbuzz">
<title>Home Page</title>

Question: What is Variable Scope in JS?

Answer: The variable scope determines the region of the variable; in sort, the scope of the variable determines the variable accessibility in a particular program or function.

In JavaScript, there are two types of Variable Scopes:

  • Local Scope
  • Global Scope

Local Scope:

In Local Scope, the visibility or accessibility of a variable is limited to a specific function.


function sam() {
  var car = "SUV";  // car is limited to sam because it is a local variable
function jolly()
// jolly cannot access the car variable because it is local to sam() function

Global Scope:

If we define a variable outside the function, then any function can access it, which set the variable scope global.


var car = "uber";  // it is a global variable
function sam() {
var book = car;
function jolly()
var book = car;

Question: What is Node.js?

Answer: It is an open-source JavaScript server runtime environment, which is capable of running JavaScript code on the server itself. Usually, JavaScript code is supposed to execute on the user browser, but Node.js changed this concept, now JS code can also be executed on the server.

Question: What is npm?

Answer: npm stands for the node package manager, and as its name suggest it is a package manager tool for node.js.

NPM offers two things, Online Repository for Open Source Node.js Projects and Command-Line utility for installing and managing different versions of packages.

Question: How the server hanger the page which content is present in multiple languages?

Answer: When the user sends an HTTP request to the server, the user browser also sends a piece of extra information about the language preference as Accept-Language header. The server then reads the HTTP request along with the Accept-Language header and sends back the document version along with the appropriate language and declares the language attribute Lang in the HTML tag.


<html lang="en">...</html>.

Question: Why did we use data- attribute in HTML and why it is not encouraged to use them now?

Answer: Data-* attributes of HTML is generally used to store the custom data which is private to the page or web application. This custom data is used to customize the JavaScript of the user according to the user action on the web page.

Now Data-*attributes are not encouraged to use because the user can easily modify the attribute just by using the browser inspect console.


  <li data-car-type="GTC">Ferari</li>
  <li data-car-type="X5 ">BMW</li>
  <li data-car-type="Benz E-Class">Mercedes</li>

Question: What is IIFE?

Answer: IIFE stands for Immediately-Invoked Function Expression. It is a technique of executing functions as soon as they are created. IIFE is often used when we want to populate any global variable or object.

(function () { alert(a)})();

Question: What are the callback functions in JS?

Answer: In JS, functions treated as Objects, and one function can be passed as an argument to another function.

The function which is passed as a parameter in another function is known as a callback function.


function hello(call_back)

Question: What is React.js?

Answer: It is a JavaScript library which is used to build User Interface for the single-page web applications. It is developed by Facebook to handle the view layer of web and mobile applications.

Question: Why it is encouraged to use external JS and CSS over in-line?

Answer: The in-line JS and CSS increase the HTML document size and slow down the process of code execution. No browser saves the complete HTML file as cached storage, but the user browser can cache the external JS and CSS file.

Question: What this keyword does in JS?

Answer: this is used to refer to the object it belongs to, the concept of this is similar to the dynamic binding in other high-level programming languages.

var student = {
  firstName: "Sam",
  lastName : "will",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;

Question: What is SQL injection?

Answer: In SQL injection, the user enters some malicious code in the input forms to hack the SQL database of the webpage. It is the most common and powerful hacking technique, and a poorly designed website can be easily attacked and destroyed using SQL injection.

Question: Name all the elements of the CSS Box Model.

Answer: CSS consists of 4 elements in its BOX model:

  • Content
  • Padding
  • Border
  • Margin

Content is used to show the text and main content of the web page.

Padding is the area which is cover by the content.

The border is the outer layer of padding.

The area outside the border is the margin.

CSS Box Model

Question: What is Sass?

Answer: Sass stands for Syntactically Awesome Stylesheet. It is a CSS Preprocessor which can optimize the CSS code by introducing features like variables, nested rules, mixins, in-line imports, etc. Sass syntax is pretty much similar to CSS, but the browser can not execute Sass files directly, so before we want to run Sass files, we need to convert it into CSS.

Question: What is the difference between a cookie, session storage and local storage?


Cookie Local Storage Session Storage
Expiry No Expire time, but can be destroyed manually No expire time. It expired automatically at the end of the session.
Persistent across browser sessions Depends on whether expiration is set Yes No
Sent back to the server Cookies are automatically sent back via Cookie header No No
Storage Capacity 4kb 5MB 5MB
Accessibility Any window Any window Same tab

Question: What is Progressive Rendering?

Answer: Progressive rendering is a method which is generally used to increase the rendering content process of a webpage. Now the rendering process used in modern web-development to optimize the mobile data usages of the user, Lazy Loading of images, prioritizing visible content, and Async HTML fragments are some examples of Progressive rendering.

Question: What is the use of srcset attribute in an image tag?

Answer: srcset is used when we want to render different resolutions of the same image on different devices. This increases the user experience, the browser will show high resolution of image on the high-end devices and low resolution on low-end devices.

<img srcset="picture_low.jpg 480w,
             picture_high.jpg 800w"
     sizes="(max-width: 600px) 480px,
     alt="Elva dressed as a fairy">

Question: What is HTML templating language?

Answer: HTML templating language is a placeholder which allows the user to take data and insert it into the HTML document. There are many templating languages, and these languages often work along with a back-end language or framework. For example, Jinja is a popular templating language which works along with python frameworks such as Django and Flask, Ruby and rails also use a templating language called Slim.

Question: Describe CSS float.

Answer: Float is used as the positioning property; it defines how an element should float on the viewport according to the different device size.

Question: What is the difference between span and div tag?

Answer: Span tag is mostly used for inline elements whereas a div tag is used for a block. Both the tags have no specific meaning but can be used to specify a block and inline content of the HTML document.

 <div id="1">
    <p>It’s a paragraph from <span class="webpage">TechgeekBuzz</span></p>

Question: What is the difference between MySQL and MongoDB?

Answer: MySQL: It is a Relational Database Management System (RDBMS) which uses SQL(Structured Query Language) as a standard language to manage its database. Like other RDBMS MySQL use table-like structure to store data.

MongoDB: It is a NoSQL database which uses the JSON-like structure to store data elements. To access and modify data in MongoDB, the developer needs to use MongoDB query language (MQL).

Question: What is Anonymous function in JS?

Answer: In normal user-defined functions, we generally define the function name when we define the function itself, but in Anonymous function, we do not define the function name. Here we use a variable and assignment operator to store the function as an object, then using that variable, we will be able to invoke the function itself.

var add = function(a,b){ console.log(a+b)}
add(4,5);              //9

Question: What is AJAX?

Answer: Asynchronous JavaScript and XML is a technique which is used to set communication between the user browser and the webserver. It is not a programming language and used to load and send data between the client browser and server even after the page is completely loaded. AJAX comes useful when we want to update the data on the user page without refreshing the page itself.

Question: What is stringify?

Answer: Stringify is a JSON method which is used to convert a JavaScript object into a string. JSON is a standard structure which is used to send and receive data between client and web server, and when we want to send data to the web server, the object needs to be a string.


var data = { ID:1, First_name: "sam", Second_name: "will" };
var send_data = JSON.stringify(data);

Question: What is the difference between class and id attributes?

Answer: Both id and class attributes are used to select a specific block or in-line content. However, each id present in the HTML document should have a unique name, whereas classes can have similar names.

<div id="logo">
<p class="intro">Everything which you need to know</p>
<p class="intro"> A world of Tech Geek</p>

In CSS class name is proceeded by a dot (.) symbol and id name by hash (#) symbol.

#logo {
    background-color: #ccc;
    padding: 20px;
.intro {
    color: red;
    font-weight: bold;

Question: What is CSS image sprites and why it is used?

Answer: CSS images sprites help in rendering multiple images in a single line image, in sort the CSS sprites combine multiple photos into a single large image. If a web page consists of various images, then it would increase its loading time because for each image the browser has to send a separate HTTP request, but with sprites, we have a single image to request.

Question: Give some suggestions on how could we fix the browser-specific styling issue?


  • We can create a specific stylesheet for different browsers using the server-side rendering.
  • Another approach is using a Library like Bootstrap, which already have code to handle the browser-specific styling issue.
  • We can also use Reset or Normalize CSS.
  • There are many 3rd party plugins which provide libraries for browser styling issue.

Question: What does W3C do?

Answer: World Wide Web Consortium(W3C) is an organization which sets and develops web standards, which makes sure cross-platform compatibility of the web. W3C is also responsible for the maintenance and development of HTML and CSS.

Question: What is the key difference between visibility: hidden and display: none?


visibility:hidden: It can hide the HTML elements and content by white space. Even after hiding the part, the white area or effect of the hidden element can be seen on the screen.

p {
  visibility: hidden;

display:none: It can also hide the elements, but it does not occupy any space in the document.

p {
  display: none;

Question: What are the disadvantages of using CSS Preprocessor like Sass?


  • We need an extra tool for Preprocessor.
  • Preprocessor file can not be executed directly on the browser.
  • Re-compilation of the Preprocessor is slow.
  • For Preprocessor, you need to learn extra tools, which increases the learning curve of CSS.

Question: Explain event delegation.

Answer: In even delegation, we add an event listener to a parent element rather than adding them to a child element.

Question: What is the difference between native and host object?

Answer: Native Object: Native objects are predefined in JavaScript by ECMAScript specifications. String, Math, RegExp, Object, Function, etc. are examples of native objects.

Host Objects: The runtime environment, such as browser and Node.js, provide these kinds of objects. Window, XMLHTTPRequest, etc. are the example of Host objects.

Question: What is the difference between .call and .apply?

Answer: However both the methods are used to invoke a function, but .call accept comma-separated values as parameters whereas .apply accept arrays as a parameter.

function mul(a, b) {
  return a * b;
console.log(, 4, 5)); // 20
console.log(mul.apply(null, [4, 5])); // 20

Here null represents the value of this within the function.

Question: Give some disadvantages of using AJAX.


  • It became hard to bookmark dynamic web pages.
  • If the user disabled the JavaScript in the browser, then the AJAX would not work.
  • It has seen that AJAX is not compatible with low-end mobile devices, because of the continuous execution of JavaScript on the browser.

Question: Explain hoisting.

Answer: In JavaScript to declare or initialize a variable, we use the keyword var, but in JS, we can use any variable before it gets declared.


x = 10  // using x
console.log(x);   //using x
var x;   //declaring x

Hoisting is the default behaviour of JS, which moves up the declaration of any variable at the top of its module or function scope, but the assignment of the variable will remain at the same position.


Hoisting Performed on y

var x = 20; // Initialize x
console.log(y); // undefine
var y; // this will go at the top of the module
y = 30; // Initialize y

Hoisting not Performed on y

var x = 20; // Initialize x 
console.log(y); // error because y is not declared in the program 
y = 30; // Initialize y 

Question: What is Polymorphism?

Answer: Polymorphism means multiple forms, and it is one of the most important properties of object-oriented programming. Polymorphism deals with the action of same operators on different objects, for example, the + operator performs addition operation on two number objects whereas the same + operator performs concatenation operation on two string.


10+20; //30
"a"+"b"; //"ab"

Question: What KISS principle state?

Answer: KISS is the abbreviation for “Keep It Simple, Stupid”, and its state that keeps your design simple rather than making it complicated. This principle was stated by the US Navy in 1960, and since then it is used in many industries, especially in web designing.

Question: Name the major HTTP requests.


HTTP Requests Description
GET GET request is sent when we want to retrieve data from the server. It is the most commonly used HTTP request.
POST The POST request is used to send data from the user to the server. POST requests can be made by submitting web forms.

The POST request is commonly used to create data in the database.

For example, when we create a new account on any webpage, we generally use the POST request.

PUT It is similar to POST, but it is used to update the existing data on the server.

For example, when we want to update our complete account on a web page, we use the PUT request

PATCH It is similar to PUT and used when we want to update a specific field of our data.

For example, when we just want to update our name or any other specific information of our account, we can use the PATCH request.

DELETE It is used to remove the data from the server.

For example, when we want to delete our account, we use the DELETE HTTP request.

OPTIONS It allows us to get the information about the requests accepted by the server.

Question: Give some suggestions on how can we optimize our front-end page.


  • We can reduce the consumption of resources by the pages by improving the server response.
  • Use External CSS and JavaScript rather than internal or in-line.
  • We could try Open Source libraries to handle the Browser-specific styling issue.
  • Use the framework to make our front-end more responsive to various devices.
  • Use progressive loading such as Lazy Loading to optimize the rendering of Heavy elements such as images and videos.
  • Use browser storage to store user-specific private data.
  • Link style sheet in the header and script at the top of the Body tag of HTML.

Question: What is the difference between attribute and property?

Answer: Attributes are the part of HTML document whereas Properties are the part of DOM (Document Object Model).

For example:

<input type="text" value="Tech">

here type and value are the attributes of HTML, but when the browser read this statement and parses this code it will create a DOM with various properties such as accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

var data = document.querySelector(input);  // here we created a document object of input tag
console.log(input.getAttribute('value')); // tech  // getting the attribute value
console.log(input.value); // tech   // getting the property of the input object

Question: What is the difference between == and ===?

Answer: == stand for abstract equality operator, and it checks if two values are equal or not apart from their data types. It automatically converts the type of both the operands and compares them.


1=='1';    //true
1==1;   // true

=== Stands for Identity Equality operator, and it checks the values of both the operands and their data type. The result of the operation will be true if both the operands are equal and have the same data type, else it returns false.


1===1   //true
1==='1'   // false

Question: Write a function in JS which accepts an array of integers and returns an array with duplicate numbers in the same order.

for example, if we pass an array [1,2,3] the function should return [1,2,3,1,2,3]


function dup(arr) {
  return arr.concat(arr);
dup([1, 2, 3]);

Question: What is a ternary expression and why it is called ternary?

Answer: Ternary Expression is a shorthand for the if-else statement; it is called ternary because it accepts only three operands, conditional_value, truth_block and false_block.


condition_value ? truth_block : false_block


var loan = true;
var pay = loan ? 4000 : null;

Alternative If else statement

var loan = true;
var pay;
if loan
    pay =4000;
{   pay =null;

Question: Give some reasons why should we use jQuery?


  • It provides cross-browser support.
  • It has a low learning curve and can be easily expanded.
  • It comes with AJAX compatibility.
  • It has a vast amount of inbuilt methods and properties.
  • It also provides various methods for modifying CSS, which come useful when we create animation.
  • Like JavaScript, it comes with Event detection and handling.
  • It has a myriad of 3rd party plugin for all requirements.
  • It can easily manipulate and traverse DOM.

Question: What is the key difference between jQuery and JavaScript?

Answer: JS is a programming language whereas jQuery is a library which is written in JS itself.

Question: What is Grid system in CSS?

Answer: CSS divide the page in grids and use those grids to manage the HTML content. Using the Grids CSS can stack and show different elements in different parts of girds.

Question: Why do we use “use strict”; statement?

Answer: The ‘use strict’ statement set some restrictions in the script. Generally, it is used to enable the strict mode of the script so there could be no loose coupling such as undeclared variables.


"use strict";
a= 23; // it will through an error because a is not declared.

Use strict make the code clean and reduce the problem and exceptions that could be raised by hoisting.

Question: Give some disadvantages of ‘use strict’;.


  • If we use ‘use strict’ then we would lose some features of JavaScript.
  • We would not be able to access .caller and .arguments methods.
  • Concatenation of scripts written in different strict modes might cause issues.


In the interview, you might face programming questions related to JavaScript. For example, the interviewer might ask you to write a specific script or function, based on a problem. We also suggest you go through all the basic syntax and structure of front-end language before you appear in the interview because it would take only one fundamental programming question to break down your confidence.

If you like this article or have any suggestions, please let us know by filling the comment box.

You might be also interested in:

Leave a Reply

Your email address will not be published. Required fields are marked *