// 19 Essential Frontend Interview Questions
Frontend development is an essential aspect of web development that focuses on the user interface (UI) and user experience (UX) of a website. As the demand for interactive and engaging web applications increases, the importance of frontend development has also increased. If you're preparing for a frontend interview, it's important to be familiar with some common frontend interview questions.
In this blog post, we will cover some of the most commonly asked frontend interview questions and provide you with tips on how to answer them effectively.
Looking for Freelance Front End Developers? Build your product with Flexiple's top-quality talent.
Hire a Front End DeveloperHire Now
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)
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 <html> tags. The following code is used to declare it.
< !DOCTYPE html >
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.
Note: Important Front-End developer interview questionsAnonymous 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)
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.
Note: Important Front-End developer interview questionsData 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>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.
Note: Important Front-End developer interview questionsWhile 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.
Note: Commonly asked Front-End developer interview questionsAbsolute - 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.
Note: Commonly asked Front-End developer interview questionsDocument.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.
These are the common methods used to get an element from the DOM:
- getElementById
- getElementsByClassName
- getElementsByTagName
- querySelector
- querySelectorAll
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);
}
}
Note: Commonly asked Front-End developer interview questionsLoad 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.
Note: Important Front-End developer interview questionsProgressive 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.
Note: Commonly asked Front-End developer interview questionsBlock 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.
Note: Important Front-End developer interview questionsCSS 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.
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
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.
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
