19 Essential Front-End Interview Questions

Hello, fellow developers, I have compiled a list of essential Front-End interview questions that I felt every Front-end developer should know.

Do drop your thoughts in the comments section below. Also, feel free to comment in case you find any content to be incorrect.

1. What are the advantages of using REST web services?

Listed below are a few advantages of using REST web services:

• Rest is a simple, lightweight, and fast protocol
• The learning curve is small as it uses the HTTP protocol
• Since the resources are decoupled the content can be accessed in numerous formats (HTML, Text, JSON, PDF, etc)

2. Explain Load Balancing

Load balancing is a method in which requests are allocated and handled by numerous machines rather than a single device. This ensures that the load does not rely on a single point and is allocated efficiently.

The most commonly used load balancing technique is called Round Robin. In this method, the requests are distributed across a group of servers. The algorithm allocates requests to the servers, once completed, it goes back to the top and the process is repeated.

3. Why are doctypes used in HTML?

HTML Doctypes are not elements or tags but rather a document type declaration. This document is used to tell the web browser the HTML version used or about any other markup language that is used on the current page.

These doctypes must be added before the tags. The following code is used to declare it.

< !DOCTYPE html >

4. Describe sessionStorage, localStorage, and cookie.

Session Storage - As the name suggests, this data is stored until the session or tab is closed, however, it is not cleared during reloads. This data remains on the client-side and cannot be transferred to the server.

Local Storage - This data is stored on the client's computer. This data has no expiration, however, it is limited only to string data. Local data can be accessed using JavaScript and HTML but cannot be transferred to the server end. Although local storage data does not have an expiration date it can be cleared by the user.

Cookies - Cookies sent back to the server-side and hence the size must be less than 4KB. The data is sent back when a subsequent XHR request is made. Although they are meant for server-side reading they can be accessed on the client-side as well.

5. Explain progressive rendering

Progressive Rendering is a technique that sequentially renders the most critical content of the server first and then renders the other parts. This allows the users to start using the page faster.

This method of rendering was quite prevalent during the days when internet speeds were slower. However, they are still being used extensively.

6. What are BFC (Block Formatting Context) and how do they work?

Block formatting context is a type of formatting context in CSS that allows you to lay child elements based on the initial block layout rules.

The outermost element that uses the block layout establishes the initial block layout rules. Every element laid inside the initial block will follow the same rules. The initial block rules are outlined by the CSS Box model. Elements in a BFC would have the same margins, borders, padding and would interact with other blocks in the same context.

7. List the advantages & disadvantages of using CSS preprocessors?

CSS preprocessor is a program/ utility that allows you to generate CSS from the preprocessor's syntax. This helps significantly increase code reusability.

Advantages of using CSS Preprocessors:

• CSS Preprocessors facilitate adding variables and functions increasing code reusability which makes development easier.
• CSS Preprocessors make it easier to manage code as they allow the grouping of parent and child elements into modular blocks.
• Multiple stylesheets can be joined into one using CSS preprocessors. Once this is done, only the main files need to be imported to the website; this significantly reduces the number of server calls for the CSS files.

Disadvantages of Using CSS Preprocessors:

• Compilation times can be longer. This is mainly because every SASS has to be converted into CSS and then compiled.
• Since it joins multiple CSS files, the main file can become very large. This increases the time taken for a request to complete.
• A bigger learning curve as the user would need a proper understanding of the preprocessor before they can utilize it.

8. What are pseudo-classes? provide a few real-world use cases.

In CSS, a pseudo-class is used to specify a special state for an element. Based on this state different styles can be applied.

A few use cases of pseudo-classes are:

• Change the color of an element when the user hovers over it
• Style a button when it is clicked
• Change the color of links to distinguish visited and unvisited links

9. List a few common use cases for anonymous functions.

Anonymous functions are functions without a name identifier and hence they are usually not accessible.

Some common use cases are:

• They are used as arguments in other functions
• They are used to create and invoke Immediately Invokable Function Expressions (IIFE)

10. Differentiate between synchronous and asynchronous functions.

Synchronous tasks are performed in a sequence, one after the other. The next task is executed only when the previous task is complete. Although this method is not time efficient, it works well when a sequence of tasks are dependent on each other.

Asynchronous tasks are performed simultaneously. These tasks do not wait for the previous task to complete. This allows more tasks to be completed in a short amount of time. However, this method would not work with dependent tasks.

11. What are higher-order functions?

Higher-order functions are functions that operate on other functions. These functions either take other functions as arguments or return them and hence they are called higher-order functions.

12. What are data- attributes?

Data attributes are used to store extra information/ data in the DOM. These data attributes can then be easily accessible using Javascript and hence a lot of libraries use it.

The code snippet below is used to initiate the same.

<div id="myDiv" data-user="flexiple" data-list-size="7" data-maxage="170"></div>

13. What is Semantic HTML?

Semantic or Semantically correct HTML is used to structure content appropriately so that they are displayed correctly.

The structure of the content is really important as this is what makes the pages readable. Additionally, properly structured content helps search engines understand your page better and this pushes it to rank higher.

14. What are optional closing tags?

While writing HTML it is a common practice to add an end tag, some tags in HTML do not require end tags. When the browser hits the next occurrence of the tag it automatically ends the previous tags.

Although not significant this could help you save a few bytes.

15. What is the difference between absolute, relative, fixed, and static positions?

Absolute - An absolute element is positioned relative to the nearest parent element. In case a parent element is not present it is positioned based on the page itself and moves along with the page scroll.

Relative - When an object is positioned relative to an element without adding any position attributes nothing happens. However, if a positional attribute is placed Eg: 20px to the right, the element will move 20px to the right of the original element.

Fixed - A fixed position implies that the element remains fixed to the viewport, which means it stays in the same place even if the page is scrolled.

Static - Elements are positioned static by default, these elements are not affected by positional attributes (Top, bottom, left, right). If an element is positioned static it follows the normal flow of the page.

16. Are document.onload and window.onload fired at the same time?

Document.onload is fired when the DOM is ready. This could be either before or after the images, scripts, and other contents are loaded.

However, the Window.onload is fired only when the DOM is fully loaded and ready with all the content including images, scripts, css, etc.

17. What are the various ways to get elements from the DOM?

These are the common methods used to get an element from the DOM:

• getElementById
• getElementsByClassName
• getElementsByTagName
• querySelector
• querySelectorAll

18. What is reflow? and how could you avoid it?

When the layout, window size, etc of an element is changed, the position of all the elements after it changes accordingly. This in turn affects the flow of the page and is called reflow.

A few methods you can use to avoid reflow are:

• Avoid setting multiple inline styles
• Avoid tables in your layout
• Add animations to elements that are fixed or absolute

19. Write the code to add a class to an element using the query selector.

This is a very common frontend interview question and the code is as follows.

function addClass(selector, className){
   var elm = document.querySelector(selector);
   if (elm){
      elm.classList.add(className);
   }
}