Top 30 Popular Front End Developer Interview Questions

An id is a unique identifier for a single HTML element. A class is a reusable identifier that can be applied to multiple elements.

You’d want to use an id when you need to address a single element either through CSS or JavaScript. And you’ll want to use a class when you need to address a group of DOM elements.

In CSS:

• #id selects a specific element with that id.
• .class selects all elements with that class.

The CSS box model describes the rectangular boxes generated for elements in the DOM. The box model is composed of the following layers:

1. Content: The innermost part, where text and images appear.
2. Padding: The space between the content and the border.
3. Border: The outer edge of the padding, surrounding the element.
4. Margin: The space outside the border, separating the element from others.

By controlling each layer individually, you can define the look of each element in the user interface.

In CSS, the difference between inline, inline-block, and block elements is on the way they’re rendered in the web page:

• Inline: Inline elements don’t have a width or height. Instead, they don’t start on a new line and take up only the width that’s required (based on their content). Examples: <span>, <a>.
• Inline-block: Just like inline elements, here the DOM elements do not start on a new line, however, they do allow you to set a height and width on them. Example: <img>.
• Block: Elements start on a new line, taking up the full width available by default. Their width and height can be set by you. Examples: <div>, <p>.

Purely from the HTML side:

• Use Semantic HTML: Use tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to provide meaningful structure.
• Proper Heading Hierarchy: Use headings (<h1> to <h6>) correctly, making sure <h1> is used once per page for the main title, followed by <h2>, <h3>, etc.
• Meta Tags: Include relevant <meta> tags, such as description, keywords, and viewport, to provide metadata about the website.
• Alt Attributes on images: Use alt attributes for images to describe the content, improving accessibility and search engine understanding.

On top of that:

• Internal Linking: Make sure to use internal links to connect content within your web site, helping search engines crawl and understand the site structure.
• Mobile-Friendly Design: Code your site and CSS with a mobile-first mindset. Ensuring the site is responsive and mobile-friendly to improve user experience and ranking on search engines.
• Fast Loading Times: Try to optimize images, use efficient code, and leverage caching to improve page load speeds. The faster the page loads, the bigger the advantage it’ll have against other similar results on the SERP.

The Document Object Model (DOM) is an API for web documents. It represents the structure of an HTML web page as a tree of nodes, where each node corresponds to a part of the document (i.e. an element, an attribute, or text).

To add an event listener on an element, you have to first “get” that element through one of the many methods of the document object (i.e. getElementById, etc) and then use the addEventListener method of the obtained object.

The method will receive the event name (i.e. ‘click’, ‘keyup’, ‘mouseup’, etc), the event handler function and, optionally, a boolean indicating whether the event should be captured during the capturing phase.

In JavaScript, “undefined” is the default value new variables take, and it means the variable has been defined but it hasn’t been assigned any value just yet.

And “null” is actually a value that signals “no value” or “no object”, it is specifically assigned to the variable by the developer.

Cookies are small pieces of data stored in web browsers. They are mainly used for keeping information between HTTP requests, such as user authentication, session management, and tracking user behavior

On the other hand, sessionStorage is designed for temporary storage and is accessible only within the same session (i.e.., while the browser window or tab is open). Data stored in sessionStorage is lost when the browser window is closed.

Finally, localStorage is similar to sessionStorage but persists even when the browser window or tab is closed and reopened. It provides long-term storage for web applications. They are very similar to cookies, however, the size limitations on localStorage are quite big compared to cookies, making it a much better alternative when storing large datasets.

The process of rendering a web page in the browser involves several steps:

1. Parsing the HTML.
2. Parsing the CSS and applying styles.
3. Calculating the position of each element in the layout of the page.
4. Painting the actual pixels in the screen, while at the same time sorting them into layers.
5. Composing all layers together, to render the website on screen. This step is taking into account z-index values, opacity values and more.
6. Running JavaScript code.
7. Loading the asynchronous resources.

Media queries are a feature in CSS that allow Front End developers to apply different styles to a document based on various characteristics of the device or viewport. For example, you can set different styles based on the device’s width, height, orientation, or type.

Through media queries we can achieve responsive design allowing styles to adapt to different screen sizes and device capabilities.

They’re both relative units of measurement, however, they’re relative to different things:

1. “em” units are relative to the font size of their parent element. So if the parent element has a font size of 20px, then setting a “2em” font size, would equal to 40px.
2. “rem” units are “root em”, which means they’re relative to the web page’s root element (the “<html>” element).

To create a flexbox layout, you have to take care of 2 main steps:

1. Set up the container element by applying the “display:flexbox” CSS property to it.
2. Set up the flexbox properties for each element inside the container (something like “flex:1” would suffice).

CSS specificity is used to determine which set of styles to apply on any given element when there are overlapping styles (like several rules setting the font-size of the same element).

The way it works is by applying the following order of precedence:

1. First, any inline style will override any other style.
2. Second, any ID-based style will override anything but inline styles.
3. Third, class-based selectors will override anything but inline and ID-based styles.
4. Finally, type selectors can be overridden by any other type of selectors.

To create a grid layout, you have to first specify the “display:grid” property on the containing element, and then define the structure of the grid, by using the “grid-template-rows” and “grid-template-columns” properties.

Now simply place the elements inside the grid container and specify the “grid-column” or “grid-row” properties.

When a function is defined within another function, it retains access to the variables and parameters of the outer function, even after the outer function has finished executing. That link, between the inner function and its scope inside the outer function is known as “closure”

You can use them to create private variables that can only be accessed by the inner function, you can even use them to create complex objects with access to a rich context that is only available globally to them.

Event delegation is a technique where you define an event handler for a particular event as part of the parent element that contains the elements that will actually trigger the event.

When the event is triggered, it’ll bubble up in the DOM hierarchy until it reaches the parent’s event handler.

Promises are JavaScript objects that represent the eventual completion of an asynchronous call. Through promises you’re able to handle the successful or failed execution of the asynchronous call.

There are different techniques to improve loading times, depending on the asset type, for example:

• CSS & JavaScript files should be minimized and compressed.
• Images can be compressed when you’re saving them or through the use of specialized software, like JPEGOptim or ImageOptim. Just make sure you don’t lose any quality during the process.

Service workers are scripts that run in the background of a web application, separate from the web page’s main thread, and provide features like offline caching, push notifications, and background synchronization.

The same-origin policy is a security feature in browsers designed to prevent a web site from accessing data (like importing a script, or sending a request to an API) from another site.

This policy helps protect users from malicious scripts that try to steal sensitive data from other websites, such as cookies, local storage, or content

A way to overcome this limitation is through CORS (Cross-Origin Resource Sharing). As long as the server specifies which domain it can receive requests from, and the client app sends the right headers, they will be able to interact with each other, even if they’re not in the same domain.

Just like variables in frontend programming languages, CSS variables can be set by developers and reused across the entire CSS stylesheets. They’re great for centralizing global values that are used throughout the web site’s code.

They’re also heavily used by CSS frameworks to set constants such as the value of colors (i.e. “black” being “#222” instead of “000”.-

Remove the CSS rules from the CSS files and inline them into the main “<head>” element of your website.

By doing it like this, you remove the loading time of that code, as it loads immediately once the main file loads. The rest, the non-critical rules, can be loaded once the main resource loads (the main CSS file).

The event loop is a core concept in JavaScript, and it allows for the execution of asynchronous code.

The way it works, is as follows:

1. Call Stack: JavaScript executes your code on a single thread using a call stack, where function calls are added and executed one by one. When a function ends, it's removed from the stack.
2. Async calls: For asynchronous operations, JavaScript uses Web APIs provided by the browser. These operations are offloaded from the call stack and handled separately.
3. Tasks Queue: Once an asynchronous call is done, its callback is placed in the task queue.
4. Event Loop: The event loop constantly checks the call stack and the task queue. If the call stack is empty, it takes the first task from the queue and pushes it onto the call stack for execution. This cycle repeats indefinitely.

There are 4 main ways in which JavaScript allows developers to handle asynchronous calls. In the end, the result is always the same, but the final structure of the code and the way to reason about it is considerably different.

• Callbacks. They allow you to set up a function to be called directly once the asynchronous operation is done.
• Promises. Promises represent the eventual completion of an asynchronous operation, and they provide a simpler and more intuitive syntax to specify callbacks to be called on success and failure of the operation.
• Async/Await. The final evolution of the promises syntax. It’s mainly syntactic sugar, but it makes asynchronous code look synchronous, which in turn makes it a lot easier to read and reason about.
• Event listeners. Event listeners are callbacks that get triggered when specific events are fired (usually due to user interactions).

Without a full framework or library like React or Vue.js, properly handling state management is not a trivial task.

Some options available through the language itself are:

• Global Variables: You can use global variables, or perhaps a global object to centralize state. The problem with this approach is that it can become quite unmanageable for large applications. It’s also a lot harder to maintain local state inside single components.
• Module Pattern: You can use this pattern to encapsulate state and provide a clear API to manage it. You would have to instantiate local instances of these modules for individual components.
• Pub/Sub Pattern: This option is more sophisticated, and it decouples state changes using event-driven architecture. It’s a more complex solution, but it provides a bigger flexibility.
• State Management Libraries: You can always use something like Redux or similar libraries without frameworks.

The way the virtual DOM works is the following:

1. The entire user interface is copied into an in-memory structure called “virtual DOM”, which is a lightweight version of the actual DOM.
2. When state changes and the UI needs to be updated, a new virtual DOM is created with the updated state.
3. Then a diff is made between the new virtual DOM and the previous version.
4. The system will then calculate the least amount of changes required to achieve the new state, and it’ll apply those changes. Only the nodes that need to be updated are touched, which minimizes direct manipulation of the real DOM.

As for advantages:

• Performance optimization: By only updating specific nodes within the real DOM, this technique reduces the number of updates, reflows and repaints on the UI. Directly affecting the performance of the app.
• Cross-platform. The virtual DOM provides a layer of abstraction between the application and the actual API that renders the UI. This means the app can be ported into other platforms as long as there is a virtual DOM implementation for that platform.
• Consistency. This technique keeps the UI in sync with the internal state, reducing bugs and inconsistencies.

Server-side rendering (SSR) is a technique in which a web server generates the HTML content of a web page and sends it to the client (usually a web browser) as a fully rendered document. This is the opposite of what naturally happens with client-side rendering (CSR), where the browser downloads a minimal HTML page and then uses JavaScript to render the content dynamically.

There are several ideal use cases for SSR:

• Content-rich websites. For example, news sites, blogs, etc.
• SEO-heavy applications. When the success of the web app relies on SEO, this approach can greatly improve the performance of the site (and because of that, the SEO performance).
• Progressive web applications. When the application needs to render fast to provide a fast and performance user experience, the application can initially be rendered on the server, and then hydrated on the client for subsequent integrations.

The main set of metrics to monitor for web apps are:

1. First Contentful Paint (FCP): Time until the first piece of content is rendered.
2. Largest Contentful Paint (LCP): Time until the largest content element is rendered.
3. Time to Interactive (TTI): Time until the page is fully interactive.
4. Total Blocking Time (TBT): Total time during which the main thread is blocked.
5. Cumulative Layout Shift (CLS): Measures visual stability.

Content Security Policy (CSP) is a security standard that helps to avoid cross-site scripting (XSS) attacks and other code injection attacks by defining and enforcing a whitelist of approved sources, such as scripts, stylesheets, images, and other resources.

The main benefits are:

• Better Security: CSP helps protect websites and web apps against various types of attacks, including XSS and data injection.
• More Control: Developers can define fine-grained policies to control the sources from which content can be loaded.
• Improved Compliance: Helps meet security compliance requirements, such as those outlined in OWASP Top 10.

Tree shaking is a technique used in JavaScript module bundlers, like Webpack or Vite, to remove unused code from the final bundled output.

Main benefits include:

1. Reduced Bundle Size: Removing unused code reduces the size of the JavaScript bundle sent to the client, improving load times and reducing bandwidth usage.
2. Improved Performance: Smaller bundle sizes can lead to faster parsing and execution times, resulting in improved performance and responsiveness of the web application.
3. Better Resource Utilization: Developers can write modular code without worrying about unused dependencies bloating the final bundle size.