Frontend Development Interview Questions

Question	Answer
What is the difference between HTML and HTML5?	HTML5 is the latest version of HTML, introducing new elements, attributes, and behaviors, like semantic tags (e.g., ,
What is the purpose of the CSS box model?	The CSS box model defines the layout of elements, consisting of the content, padding, border, and margin. It affects how the element's size and positioning are calculated.
What is the difference between classes and IDs in CSS?	In CSS, an ID is unique and used to style a single element, while a class can be used to style multiple elements. IDs are more specific than classes.
What is Flexbox in CSS?	Flexbox is a layout model in CSS that allows for flexible and responsive layouts by distributing space within a container and aligning items both horizontally and vertically.
What is the DOM (Document Object Model)?	The DOM is a programming interface for web documents, representing the page as a tree structure where each node is an object corresponding to a part of the page.
What are media queries in CSS?	Media queries in CSS allow you to apply styles based on specific conditions such as screen size, resolution, and device orientation, enabling responsive design.
What is the difference between inline and block elements in HTML?	Inline elements take up only the space they need and do not break the flow of the document, while block elements take up the full width of their container and start on a new line.
What is the purpose of the 'this' keyword in JavaScript?	The 'this' keyword refers to the current context of execution, pointing to the object in which the function is called, depending on how the function is invoked.
What is a promise in JavaScript?	A promise is an object representing the eventual completion or failure of an asynchronous operation. It can be in one of three states: pending, resolved, or rejected.
What are JavaScript closures?	A closure is a function that retains access to its lexical scope (variables from its surrounding environment), even after that environment has finished executing.
What is the difference between localStorage and sessionStorage?	localStorage stores data with no expiration time, while sessionStorage stores data for the duration of a page session and is cleared when the page is closed.
What is event delegation in JavaScript?	Event delegation is the practice of assigning a single event listener to a parent element, which listens for events on child elements using event bubbling.
What is the difference between == and === in JavaScript?	The == operator compares values for equality after converting them to a common type, while === compares both values and their types for strict equality.
What is React?	React is a JavaScript library for building user interfaces. It uses a component-based architecture and a virtual DOM to efficiently update and render elements.
What is the difference between React and Angular?	React is a JavaScript library for building UIs, focusing on the view layer, while Angular is a full-fledged framework that provides tools for developing client-side applications with more built-in functionality.
What is a virtual DOM in React?	The virtual DOM is a lightweight representation of the actual DOM. React uses it to optimize updates by first making changes to the virtual DOM and then applying them to the real DOM in the most efficient way.
What are Webpack and Babel?	Webpack is a module bundler that bundles JavaScript, CSS, and other assets for efficient delivery. Babel is a JavaScript compiler that converts modern JavaScript code into backward-compatible versions.
What is the purpose of the 'async' and 'await' keywords in JavaScript?	'async' is used to define an asynchronous function, and 'await' is used to wait for a promise to resolve before continuing execution of the function.
What is the shadow DOM in Web Components?	The shadow DOM is a feature that allows encapsulation of a component's internal structure and style, keeping it isolated from the rest of the document.
What is the purpose of the 'alt' attribute in an image tag?	The 'alt' attribute provides alternative text for an image if it cannot be displayed, helping with accessibility and SEO.
What is the difference between a div and a span in HTML?	A div is a block-level element used to group content, while a span is an inline element used to style or group a portion of text within a block.
What is the purpose of the 'z-index' property in CSS?	The 'z-index' property controls the stacking order of elements on the page, determining which elements appear in front or behind others.
What are pseudo-classes in CSS?	Pseudo-classes are used to define the special state of an element, such as :hover, :focus, or :nth-child, without requiring additional classes or IDs.
What is the difference between 'display: none' and 'visibility: hidden'?	'display: none' removes the element from the document flow entirely, while 'visibility: hidden' keeps the element in the document flow but makes it invisible.
What is the difference between an array and an object in JavaScript?	An array is an ordered collection of elements, while an object is a collection of key-value pairs, typically used for more complex data structures.
What are JavaScript's data types?	JavaScript has 7 primitive data types: undefined, null, boolean, number, string, symbol, and bigint. It also has one non-primitive type: object.
What is the purpose of 'preventDefault()' method in JavaScript?	The 'preventDefault()' method prevents the default action of an event from occurring, such as preventing a form submission or a link from opening a new page.
What is an IIFE in JavaScript?	An IIFE (Immediately Invoked Function Expression) is a function that runs as soon as it is defined, typically used to create a local scope.
What is a callback function in JavaScript?	A callback function is a function passed as an argument to another function and executed after the completion of a task, often used in asynchronous programming.
What is the difference between 'localStorage' and 'cookies' in web storage?	'localStorage' provides a larger storage capacity and persists data without expiration, while cookies are smaller in size and can have an expiration date.
What are 'data attributes' in HTML?	Data attributes are custom attributes added to HTML elements, starting with 'data-', allowing developers to store extra information in the DOM for use in JavaScript.
What is the 'DOMContentLoaded' event in JavaScript?	The 'DOMContentLoaded' event fires when the HTML has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
What is the difference between 'setTimeout()' and 'setInterval()' in JavaScript?	'setTimeout()' executes a function once after a specified delay, while 'setInterval()' repeatedly executes a function at specified intervals until cleared.
What is the role of 'this' in JavaScript?	'this' refers to the context of the current execution, typically representing the object on which the method was called or the global context depending on the execution scope.
What is the 'keyframes' rule in CSS?	The 'keyframes' rule defines the intermediate steps in an animation, allowing for more complex animations by specifying a series of frames that change during the animation.
What is a web API in the context of frontend development?	A web API allows communication between a web page and a server, enabling functionalities like retrieving data from a server (e.g., fetch, XMLHttpRequest), or interacting with device features.
What is the difference between a synchronous and an asynchronous function?	A synchronous function blocks the program's execution until it completes, while an asynchronous function allows the program to continue executing other tasks while waiting for the function to complete.
What is the purpose of 'async' and 'await' in JavaScript?	'async' is used to define asynchronous functions, and 'await' is used to pause the execution of an asynchronous function until the promise is resolved or rejected.
What is the purpose of the 'box-sizing' property in CSS?	The 'box-sizing' property defines how the width and height of an element are calculated, including or excluding padding and borders. The 'border-box' value includes padding and border in the element's total width and height.
What is the difference between 'position: absolute' and 'position: relative'?	'absolute' positions an element relative to the nearest positioned ancestor, while 'relative' positions the element relative to its normal position in the document flow.
What is the purpose of the 'float' property in CSS?	The 'float' property is used to push an element to the left or right of its container, allowing text or other elements to wrap around it.
What is a 'media query' in CSS?	A media query allows you to apply different styles to different devices or screen sizes, helping to create responsive designs that adapt to varying viewports.
What is the difference between 'inline' and 'block' elements in CSS?	Block elements take up the full width available, pushing other elements to the next line, while inline elements take up only as much width as necessary and do not create a line break.
What are CSS transitions?	CSS transitions allow you to change property values smoothly over a specified duration, making the changes more dynamic and visually appealing.
What are 'CSS variables'?	CSS variables are custom properties that store values, allowing you to reuse them throughout your CSS code, making it easier to maintain and update.
What is the difference between 'flex' and 'grid' layout in CSS?	'flex' is a one-dimensional layout system for arranging elements in rows or columns, while 'grid' is a two-dimensional layout system that can manage both rows and columns simultaneously.
What is a 'media query' breakpoint?	A breakpoint is a specific screen width at which a layout will change or adjust to fit the size of the device screen, usually used to apply different styles for mobile, tablet, or desktop.
What is the 'Event Delegation' technique in JavaScript?	Event delegation involves attaching a single event listener to a parent element, which handles events for its child elements, improving performance and simplifying event management.
What is the 'localStorage' in JavaScript?	'localStorage' allows you to store data in the browser persistently without expiration. It is accessible only on the same domain, and the data remains even after closing the browser.
What is the 'sessionStorage' in JavaScript?	'sessionStorage' stores data for the duration of a page session, and the data is cleared when the page session ends (e.g., when the browser tab is closed).
What is the purpose of the 'fetch' API in JavaScript?	The 'fetch' API provides a modern way to make asynchronous HTTP requests to retrieve or send data to a server, replacing the older 'XMLHttpRequest' method.
What is the 'window.onload' event in JavaScript?	The 'window.onload' event is fired when the entire page (including images, scripts, and other resources) has fully loaded, allowing you to execute code after everything is available.
What is the 'DOMContentLoaded' event in JavaScript?	The 'DOMContentLoaded' event is fired when the HTML document has been completely loaded and parsed, but before external resources like images and stylesheets are fully loaded.
What is the purpose of 'console.log()' in JavaScript?	'console.log()' is used to output messages to the browser console for debugging purposes, helping developers check the values of variables or the flow of code execution.
What is the difference between 'undefined' and 'null' in JavaScript?	'undefined' means a variable has been declared but not assigned a value, while 'null' represents an explicit absence of any value or object.
What is 'hoisting' in JavaScript?	Hoisting refers to JavaScript's behavior of moving variable and function declarations to the top of their respective scopes during the compilation phase.
What is 'promise chaining' in JavaScript?	Promise chaining is the practice of chaining multiple '.then()' methods to a promise, allowing for sequential asynchronous tasks to be executed one after another.
What are 'arrow functions' in JavaScript?	Arrow functions are a shorthand way of writing functions in JavaScript, using the '=>', which allows for a more concise syntax and preserves the 'this' keyword context from the surrounding scope.
What is the purpose of the 'async' and 'await' keywords in JavaScript?	'async' marks a function as asynchronous, and 'await' pauses the execution of the function until the promise is resolved, making asynchronous code easier to write and read.
What is the 'call()' method in JavaScript?	The 'call()' method allows you to invoke a function with a specified 'this' value and arguments passed individually.
What is the 'apply()' method in JavaScript?	The 'apply()' method is similar to 'call()', but it accepts an array or array-like object as the second argument for passing arguments to the function.
What is 'bind()' in JavaScript?	The 'bind()' method creates a new function that, when called, has its 'this' value set to the specified value, and allows you to preset parameters for future execution.
What is 'Debouncing' in JavaScript?	Debouncing is a technique used to limit the rate at which a function is called, often used to handle events like scrolling or keypress events to avoid unnecessary function calls.
What is 'Throttling' in JavaScript?	Throttling is a technique used to ensure that a function is executed at most once in a specified time interval, useful for controlling the frequency of events like resize or scroll.
What is the 'setInterval()' method in JavaScript?	The 'setInterval()' method is used to repeatedly execute a function at a specified interval in milliseconds, until it is stopped using 'clearInterval()'.
What is 'setTimeout()' in JavaScript?	The 'setTimeout()' method is used to execute a function after a specified delay (in milliseconds), once the time has passed.
What is 'window.localStorage' in JavaScript?	'window.localStorage' is an object that allows you to store key-value pairs in the browser with no expiration time, making it persistent across page reloads and sessions.
What is 'window.sessionStorage' in JavaScript?	'window.sessionStorage' stores data for the duration of a session, and the data is cleared when the browser tab or window is closed.
What is React?	React is a JavaScript library used for building user interfaces, particularly single-page applications, by creating reusable UI components.
What is JSX in React?	JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code inside JavaScript, making it easier to define UI components in React.
What is the virtual DOM?	The virtual DOM is a lightweight copy of the actual DOM in memory. React uses it to optimize rendering by comparing the virtual DOM with the actual DOM and making only the necessary updates.
What are React components?	React components are reusable, self-contained building blocks of a React application that manage their own state and render UI based on that state.
What is the difference between state and props in React?	State is used to manage data within a component, while props (short for properties) are used to pass data from parent components to child components.
What is the purpose of the useState hook in React?	The useState hook is used to manage state in functional components, allowing you to declare a state variable and a function to update it.
What is the useEffect hook in React?	The useEffect hook is used to perform side effects in functional components, such as fetching data or subscribing to events, and can be triggered after render or when specific dependencies change.
What is a controlled component in React?	A controlled component is a form element whose value is controlled by React state. Its value is set by a state variable and changes are handled by event handlers.
What is an uncontrolled component in React?	An uncontrolled component is a form element whose value is not controlled by React state. Instead, it is managed by the DOM itself.
What are React hooks?	React hooks are functions that allow you to use state, lifecycle methods, and other React features in functional components without needing to use class components.
What is the difference between class components and functional components in React?	Class components are ES6 classes that have access to state and lifecycle methods, while functional components are simpler and use hooks to manage state and side effects.
What is React Router?	React Router is a library that allows you to add navigation and routing to your React application, enabling the creation of single-page applications with multiple views.
What are keys in React?	Keys are special attributes in React that help identify elements in a list and improve performance by enabling efficient updates when the list changes.
What is the context API in React?	The context API is used for managing and passing down state through the component tree without having to pass props manually at every level.
What are higher-order components (HOCs) in React?	A higher-order component is a function that takes a component and returns a new component with enhanced functionality. HOCs are used for code reuse and logic abstraction.
What is the purpose of React's shouldComponentUpdate method?	shouldComponentUpdate is a lifecycle method that determines whether a component should re-render in response to state or prop changes, allowing you to optimize performance.
What is Redux in React?	Redux is a state management library often used with React to manage global state in a predictable way, using a single store and actions to modify the state.
What is the purpose of React's render method?	The render method is used in class components to return JSX that describes the UI of the component. It gets called when state or props change, triggering a re-render.
What are React Fragments?	React Fragments are a way to group multiple elements without adding extra nodes to the DOM, making your code cleaner and more efficient.
What is the purpose of React's componentDidMount lifecycle method?	componentDidMount is a lifecycle method that is called once after the component has been rendered to the screen, often used for fetching data or initializing third-party libraries.