Top Front End Developer Interview Questions and Answers

HTML (HyperText Markup Language) is the most widely used markup language to represent web content with its semantic elements like headings, paragraphs, images, and links. It is a type of language that describes content and the layout of the content. If you have written content that a browser can render and a user (or search engine) can understand, you have written HTML.
 

This uses semantic HTML (<article>, <h1>, <p>, <a>) to improve structure, accessibility, and SEO.

Semantic HTML elements are HTML5 tags that convey meaning about the structure and content of a webpage, both to the browser and to developers. Unlike non-semantic elements (e.g., <div>, <span>), semantic tags (e.g., <header>, <article>, <footer>, <section>) clearly describe their purpose, enhancing accessibility, SEO, and maintainability.

HTML elements are categorized into three primary display types, block, inline, and inline-block, depending on the way they render within the document flow.
Block Elements
Takes the proportional width of the container they're in and always starts on a new line.

Inline Elements
Does not start on a new line and occupies as much width as its contents require.

Inline-Block Elements
Renders like inline elements but accepts block-level properties (width, height).

The CSS box model is an essential concept in web design that describes how HTML elements are displayed visually as rectangular boxes. Each box consists of four layers: content, padding, border, and margin. The interesting part of this is that each layer defines how space and layout are calculated in full, including the sizing, placement, and spacing for each element on your page.

In this example, this div will take a shape with:
Content width: 200px
Padding: 20px inside the content
Border: 5px around the padding
Margin: 10px margin around the border

When styling HTML/CSS, you can use both IDs and classes as selectors to apply styles or target elements, but these two selectors also have differences in uniqueness, scope of use, and specificity:

An ID is a unique identifier for a single HTML element. It is a strict requirement to use only once per page.

A class is a reusable group identifier. It can be used for multiple elements to share a style.

Both visibility: hidden and display: none are used in CSS for hiding HTML elements, but they impact document layout and rendering differently.

visibility: hidden will hide the element visually, but it will still occupy space and layout.  

display: none will also hide the element, but it will take it out of the rendering flow completely, so it won't occupy space.

JavaScript is a high-level language that is interpreted and used primarily for client-side (front-end) web development. JavaScript allows us to interact with the Document Object Model (DOM), manipulate it, and add dynamic behavior, interactivity, and generate real-time content in web applications.

JavaScript is used in front-end development because it makes web pages feel alive. It handles button clicks, form validation, AJAX-based live content updates, and smooth animations, all without refreshing the page.

This JavaScript function attaches an alert to the button click and adds interactivity to static HTML.
 

The DOM (Document Object Model) is the programmatic, tree-structured view of an HTML or XML document. A document represented with a DOM presents the content, structure, and style of a web page through a hierarchy of nodes (objects).

The DOM provides a way for programming languages like JavaScript to dynamically retrieve, modify, and update web documents. Each HTML element is converted to a node in the DOM; for example, attributes and text are also nodes, which allows non-static interaction, modification, and event handling from the browser.

Consider this HTML:

JavaScript can access and change it using the DOM:

This updates the <p> content without reloading the page.
 

In JavaScript, == (loose equality) and === (strict equality) are both comparison operators, but they have different type sensitivity.

When comparing anything, == (Loose Equality) checks for equality between two values, but if they differ in types, it will perform type conversion.

=== (Strict Equality) checks for both value and data type, without any conversion.
Because the === operator removes the risks of automatic type coercion, it is recommended to use === for type-safe comparisons.

'5' == 5   // true  → type coercion: string '5' is converted to number 5

'5' === 5  // false → different types: string vs number
 

In JavaScript, an event listener is added to an HTML element using the addEventListener() method. This allows you to execute a callback function when a specific event (like click, mouseover, or input) occurs on that element, without overwriting existing events.

In this example, the element with ID myBtn is targeted. A click event listener is added. When clicked, it triggers a callback function that shows an alert.
 

CSS media queries are conditional CSS rules that apply styles based on one or more characteristics of the device being used for display. Some of the characteristics that can trigger a media query include screen width, height, resolution, orientation, and type (for instance, whether a device is using a viewport or the screen).

CSS media queries are an essential part of responsive web design, allowing developers to manage how a layout is presented to different devices (like mobiles, tablets, and desktops) while keeping the HTML structure intact.

In the example code below, the rule's font-size will only apply when the width of the viewport is 768 pixels or less, likely for a mobile or tablet device.

When multiple CSS rules apply to the same HTML element, CSS uses specificity to decide which rule takes precedence.
Specificity is a weighted system that browsers use to rank rules. The rule with the highest specificity will override others (unless !important is used, which has even higher priority).
Specificity is calculated based on four components:

Final applied style: color: red; from the inline style because it has the highest specificity: 1000.

We can override this by adding !important to the selector when necessary.

CSS has two relative length units, em and rem, and both are used for sizing fonts, spacing, and layout. The difference is how they calculate size from. em calculates from the parent element's font-size (element-relative unit). rem calculates from the font-size of the root element (root-em unit).

If the .container's parent has a font-size of 10px, its font-size becomes 20px (2 × 10px).
.title always becomes 32px (2 × root 16px).
 

To create a Flexbox layout in CSS, you apply the display: flex or display: inline-flex property to a containing element, which makes its direct children flex items. Flexbox makes it easy to align, space, and distribute items within a container along a main axis and a cross-axis.

This creates a row horizontally with items spaced evenly and vertically centered.

To create a CSS Grid layout, you apply display: grid to a container element, which makes its direct children grid items. You define the grid with properties like grid-template-columns and grid-template-rows, giving you precise control over how items lay out both in rows and columns along a two-dimensional grid.

This creates a responsive grid with 3 equal-width columns and space between items.

A closure is a JavaScript function that maintains access to its specific scope (variables and functions), even after the outer function has completed execution. Closures allow for data encapsulation, private variables, and state persistence across calls.

Closures occur when an inner function is returned from or passed from an outer function, or when the inner function can access variables from the outer function.

Examples of how closures might be used are,

• Creating a private state
• Creating factory functions
• Writing callbacks and event handlers
• Controlling asynchronous behavior

The inner function remembers the count variable, even after createCounter() is done running. This is called a closure. It keeps the variable count alive between calls.
 

In JavaScript, a promise is a built-in object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promises provide a clean and chainable syntax to handle asynchronous logic and make it easier to avoid deeply nested callbacks (i.e., "callback hell").

A Promise exists in one of three states:
Pending - initial state, operation not completed. 
Fulfilled - operation completed successfully. 
Rejected - operation failed with an error.

We use .then() to handle fulfillment, .catch() to handle errors, and .finally() for cleanup.

This Promise will simulate a delayed response using setTimeout and will resolve after 1 second.

In HTML, the <script> tag is used to embed or reference JavaScript files. Its behavior changes based on the presence of the async or defer attribute, which controls when and how the script is executed with HTML parsing:

<script> Blocks HTML parsing until the script is downloaded and executed immediately.

<script async> Downloads in parallel and executes immediately after download, possibly before HTML parsing completes.

<script defer> Downloads in parallel but executes after HTML parsing is complete, preserving the order of deferred scripts.

We can use <script> when scripts must block rendering (not recommended). Use async for independent scripts (e.g., analytics). Prefer defer for DOM-dependent scripts to maintain execution order.
 

Event delegation refers to a JavaScript idea whereby a single event listener is added to a parent node to manage events occurring on its child nodes by utilising event bubbling. Instead of attaching listeners to each child, the parent will listen for events bubbling up the DOM tree. This improves performance and scalability, particularly when dealing with dynamic or huge content.

Event delegation is useful because it allows for the efficient management of events on large or dynamic DOMs and minimizes memory usage by reducing the number of listeners and their associated memory footprint.

In the following case, a single listener on the element enables handling of clicks on all of the children, even if the <li> children are added dynamically.

The Same-Origin Policy (SOP) is a browser security feature that allows web pages to only send requests to the same origin (protocol, domain, and port) that served the page, protecting against cross-origin attacks such as data theft and session hijacking.

CORS (Cross-Origin Resource Sharing) allows a website to safely allow cross-origin requests. CORS is a server-side protocol that uses the Access-Control-Allow-Origin HTTP header to tell the browser from which origins it can access the resources served from that location.

CORS Implementation Example

Client (JavaScript)

Server (CORS Header)

Access-Control-Allow-Origin: https://yourdomain.com

This allows https://yourdomain.com
to access resources from https://api.test.com.
 

The JavaScript event loop is a concurrency model that allows asynchronous execution within a single-threaded environment. The event loop does non-blocking execution in a single-threaded model by managing various tasks in two main queues: the call stack (for synchronous code) and the task queue (for callbacks and events). The JavaScript event loop continues polling the call stack to check if it is empty. When it is empty, the event loop will dequeue the next task from the task queue and push it onto the call stack for execution.
 

Indeed, tree shaking is an important optimization method in JavaScript that is used to remove dead code or unused module exports as part of the build process, which ultimately minimizes the final bundle size. Tree shaking ultimately enhances performance within JavaScript-coded applications because a smaller bundle size results in faster load time, better runtime efficiency, and ultimately a better experience for a user. Tree shaking relies on ES module syntax, where using static imports and exports allows bundlers like Webpack, Rollup, or ESBuild to identify and eliminate code that was never used.

Server-Side Rendering (SSR) renders pages on the server and sends HTML to the client. Client-Side Rendering (CSR) renders content in the browser using JavaScript.

Use SSR for better SEO, faster first load (used in blogs, e-commerce). Use CSR (relies on JS) for more dynamic interfaces like dashboards, apps.
 

Closures occur in JavaScript when a function keeps access to variables from its outer (lexical) scope, even after that outer function has finished running.
They can cause memory leaks if unused variables are unintentionally kept in memory because the closure still references them.

We can maintain state in large-scale SPAs via Context API, Redux, or MobX. The Context API, which has been included with React, allows shared state to be passed from component to component. Context API is commonly used for smaller or medium-sized applications that may not require a more complex setup.
Redux is a predictable state container for JavaScript apps. Redux keeps app state in one place and lets you update it through actions and reducers, which makes it easier to follow how data changes. Many devs go with Redux when apps get too messy to manage with basic state tools, especially in teams working on shared features.
MobX is a reactive state management library that automatically tracks dependencies using observable data and computed values. MobX gives more flexible and less boilerplate-driven development, suitable for dynamic and data-heavy applications.
 

The virtual DOM is a lightweight JavaScript object that defines the structure of the real DOM in memory. With virtual DOM, React can do quick comparisons between UI states. While in reconciliation, React compares the previous virtual DOM with the new virtual DOM first. Then updates the essential elements of the actual DOM to enhance rendering efficiency.
 

Content Security Policy (CSP) tells the browser which sources are safe to load for content. It blocks harmful scripts and prevents cross-site scripting or XSS by denying anything that isn't trusted.
<!-- This CSP only allows scripts from the same origin -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<!-- This is allowed because it's loaded from the same site -->
<script src="/safe.js"></script>
<!-- This is blocked because inline scripts aren't trusted -->
<script>
 alert("Blocked by CSP");
</script>
 

Common front-end performance issues are large JavaScript bundles, unoptimized images, and blocking rendering. These issues will bring down the browser and impact the user experience. Here's how we can fix them.

Valuable ways to enhance web applications to make them more accessible include: Using semantic HTML, testing for keyboard navigation, including ARIA roles where they are needed, and testing the UI with screen readers.

To scale your front-end applications, always keep your codebase clean, break the user interface into shared components, choose a state-guided design, and engineering focuses on performance and maintainability. Other practices include: code splitting, lazy loading, organizing your project by features instead of files, and separating logic from UI can help everyone work better on the project together.