Top 150 Frontend Development Interview Questions and Answers

DOM stands for Document Object Model, which is a programming interface for web documents.

• DOM is a representation of the structure of a web page, allowing scripts to dynamically access and update the content, structure, and style of the document.

• It provides a way for scripts to interact with the web page by accessing and manipulating elements like text, images, forms, etc.

• DOM is platform and language-independent, allowing developers to use it with any programming language that...read more

Keys in React list help identify and track individual items, improving performance and enabling efficient updates.

• Keys help React identify which items have changed, been added, or been removed in a list.

• They help improve performance by allowing React to reuse existing DOM elements instead of creating new ones.

• Keys also help maintain component state and prevent unnecessary re-rendering of components.

• Keys should be unique within the list and stable across re-renders to ensure p...read more

There are five types of position in CSS: static, relative, absolute, fixed, and sticky.

• Static: default positioning, elements flow in normal document flow

• Relative: positioned relative to its normal position

• Absolute: positioned relative to its closest positioned ancestor

• Fixed: positioned relative to the viewport

• Sticky: acts like a combination of relative and fixed positioning

Data can be sent from one page to another using methods like GET, POST, SESSION, COOKIES, and AJAX.

• Use GET method to send data through URL parameters

• Use POST method to send data through form submissions

• Use SESSION to store data temporarily across multiple pages

• Use COOKIES to store data on the client side

• Use AJAX to send data asynchronously without reloading the page

Use XPath or CSS selectors to locate elements and extract data from the table dynamically.

• Identify unique attributes of the table such as class, id, or structure

• Use XPath or CSS selectors to locate the table and its elements

• Iterate through rows and columns to extract data dynamically

• Handle pagination or lazy loading if applicable

Box-model in CSS refers to the concept of how elements are rendered on a webpage, including content, padding, border, and margin.

• The box-model consists of content, padding, border, and margin around an element.

• Content area is where the actual content of the element is displayed.

• Padding is the space between the content and the border of the element.

• Border is the line that surrounds the padding and content of the element.

• Margin is the space outside the border of the element, se...read more

Virtual DOM updates the actual DOM by comparing the virtual DOM with the actual DOM and only updating the necessary changes.

• Virtual DOM is a lightweight copy of the actual DOM.

• When changes are made, the virtual DOM is updated instead of the actual DOM.

• The virtual DOM is then compared with the actual DOM to identify the differences.

• Only the necessary changes are then applied to the actual DOM, minimizing re-renders and improving performance.

Selectors in CSS are patterns used to select the elements you want to style on a web page.

• Selectors can target elements based on their tag name, class, ID, attributes, and more.

• Examples include: element selector (p), class selector (.example), ID selector (#example), attribute selector ([type='text']), etc.

Buttons are used for actions within the form, while links are used for navigation.

• Buttons can trigger JavaScript functions or perform form validation before submission

• Buttons can have different styles and behaviors compared to links

• Buttons are more accessible for users with disabilities

Ref is used in React to access and manipulate the DOM directly.

• Ref provides a way to access and modify DOM elements or React components.

• It is commonly used for focusing input fields, triggering animations, or integrating with third-party libraries.

• Ref can be created using the useRef() hook or by using the ref attribute in class components.

• Example: const inputRef = useRef();

• Example: const buttonRef = React.createRef(); Click

Yes, you can store cart items in local storage.

• Local storage is a web API that allows data to be stored in the browser.

• You can store cart items as an array of strings in local storage.

• To store cart items, you can use the 'setItem' method of the localStorage object.

• Example: localStorage.setItem('cartItems', JSON.stringify(['item1', 'item2', 'item3']));

Use JavaScript to dynamically add an active class to all li elements.

• Select all li elements using document.querySelectorAll()

• Loop through the selected elements and add the active class using element.classList.add()

• Make sure to remove the active class from any previously active li elements if needed

A virtual representation of the real dom is a digital model of a physical space or object.

• A virtual representation can be created using 3D modeling software.

• It can be used for simulations, virtual tours, or architectural visualization.

• Examples include virtual reality games, virtual museums, and virtual home tours.

State uplifting in React is the process of moving the state of a child component to its parent component.

• State uplifting helps in managing the state of multiple components by lifting it up to a common ancestor component.

• It involves passing down state and functions as props from parent to child components.

• State uplifting improves the reusability and maintainability of components in React.

• Example: If multiple child components need access to the same state, it can be lifted up t...read more

Position in CSS determines the placement of an element on a webpage.

• Position can be set to static, relative, absolute, fixed, or sticky.

• Static is the default position where elements are displayed in the normal flow of the document.

• Relative positions an element relative to its normal position.

• Absolute positions an element relative to its nearest positioned ancestor.

• Fixed positions an element relative to the viewport.

• Sticky positions an element based on the user's scroll positi...read more

Virtual DOM is a lightweight copy of the actual DOM used for efficient updates in web development.

• Virtual DOM is a concept used in web development to improve performance by minimizing actual DOM manipulations.

• Actual DOM refers to the real structure of the HTML elements on a webpage.

• Virtual DOM is a representation of the actual DOM in memory that gets updated when changes are made, and then efficiently updates the actual DOM.

• React.js is a popular library that utilizes Virtual ...read more

CSS is used for styling and formatting web pages, making them visually appealing and user-friendly.

• Styling HTML elements

• Formatting text, images, and layout

• Creating responsive design for different screen sizes

• Adding animations and transitions

• Customizing colors, fonts, and spacing

Use React's state to dynamically update the title on each page

• Create a state variable to hold the dynamic title

• Update the state variable with the desired title for each page

• Use useEffect hook to update the document title with the state variable

The box model is a fundamental concept in CSS that defines the layout of elements on a webpage.

• The box model consists of content, padding, border, and margin.

• Content: the actual content of the element, such as text or images.

• Padding: space between the content and the border.

• Border: a line that goes around the padding and content.

• Margin: space outside the border, separating the element from other elements.

Ajax call in jQuery is used to make asynchronous HTTP requests to the server without reloading the entire page.

• Use $.ajax() method in jQuery to make an Ajax call

• Specify the URL to send the request to

• Specify the type of request (GET, POST, etc.)

• Handle the response using success and error callbacks

CSS stands for Cascading Style Sheets, used to style the appearance of web pages.

• CSS is used to control the layout and design of web pages.

• It allows for styling elements such as fonts, colors, spacing, and more.

• CSS can be applied inline, internally within HTML, or externally in a separate file.

• Selectors are used to target specific elements for styling.

• Example: h1 { color: blue; } sets the color of all h1 headings to blue.

React has three main lifecycle methods: Mounting, Updating, and Unmounting.

• Mounting: These methods are called when an instance of a component is being created and inserted into the DOM.

• Updating: These methods are called when a component is being re-rendered as a result of changes to either its props or state.

• Unmounting: This method is called when a component is being removed from the DOM.

External CSS is a separate file containing styles that can be linked to an HTML document.

• External CSS helps in separating the style of a website from its content.

• It allows for easier maintenance and organization of styles.

• External CSS files are linked to HTML documents using the tag.

Ajax allows for asynchronous communication between the client and server in JavaScript.

• Ajax stands for Asynchronous JavaScript and XML.

• It allows for making requests to the server without reloading the entire page.

• Asynchronous functions in JavaScript allow for non-blocking code execution.

• Examples of asynchronous functions include setTimeout, setInterval, and fetch API.

Selectors in CSS are patterns used to select the elements you want to style on a webpage.

• Selectors can target elements based on their tag name, class, ID, attributes, and more

• Examples include: 'h1' for selecting all h1 elements, '.classname' for selecting elements with a specific class, '#idname' for selecting elements with a specific ID

useState is a hook in React that allows functional components to have state.

• useState is a built-in hook in React for adding state to functional components

• It returns an array with two elements - the current state value and a function to update that value

• Example: const [count, setCount] = useState(0);

The position property in CSS specifies the positioning method of an element.

• The position property can have values like static, relative, absolute, fixed, and sticky.

• The default value is static, which means the element follows the normal flow of the document.

• Relative positioning allows an element to be positioned relative to its normal position.

• Absolute positioning allows an element to be positioned relative to its nearest positioned ancestor.

• Fixed positioning positions an ele...read more

Localstorage stores data with no expiration date, while session storage stores data for one session only.

• Localstorage data persists even after the browser is closed, while session storage data is cleared when the session ends.

• Localstorage has a larger storage capacity compared to session storage.

• Localstorage data is accessible across different tabs and windows of the same browser, while session storage data is limited to the current tab or window.

• Example: Localstorage can be ...read more

Front end development involves creating the user interface and experience of a website or application.

• Involves using HTML, CSS, and JavaScript to create the visual and interactive elements of a website or application

• Requires knowledge of design principles and user experience

• Involves testing and debugging to ensure functionality and usability

• Examples include creating responsive layouts, implementing animations and transitions, and integrating with back-end systems

useReducer is a React Hook that is used for managing complex state logic in functional components.

• useReducer is an alternative to useState for managing state in React components.

• It accepts a reducer function and an initial state, and returns the current state and a dispatch function.

• The reducer function takes the current state and an action, and returns the new state based on the action type.

• It is useful for managing state that involves multiple sub-values or when the next st...read more

display inline is used for inline elements while display block is used for block-level elements.

• display inline elements are placed next to each other horizontally

• display block elements take up the entire width of their container

• display inline-block elements are placed next to each other horizontally and can have a width and height set

Virtual DOM

• Virtual DOM is a lightweight, in-memory representation of the actual DOM

• It is used in React to improve performance by minimizing direct manipulation of the actual DOM

• Changes are first made to the virtual DOM, then compared to the actual DOM for efficient updates

Virtual DOM is a lightweight copy of the real DOM used for efficient updates in web development.

• Virtual DOM is a concept in React where a lightweight copy of the real DOM is created and updated instead of directly manipulating the real DOM.

• Changes are first made to the virtual DOM, then compared with the real DOM to identify the minimal number of updates needed for efficient rendering.

• This process helps improve performance by reducing the number of actual DOM manipulations re...read more

Props are used to pass values from parent component to child component in React.

• Parent component can pass values to child component using props.

• Props are passed as attributes to the child component in JSX.

• Child component can access the passed values using props object.

• Props are read-only and cannot be modified by the child component.

There are three ways to apply CSS: inline, internal, and external.

• Inline CSS is applied directly to an HTML element using the 'style' attribute.

• Internal CSS is defined within the 'style' tags in the head section of an HTML document.

• External CSS is stored in a separate file and linked to the HTML document using the 'link' tag.

Virtual Dom is a lightweight copy of the Real Dom, used for efficient updates in web development.

• Virtual Dom is a lightweight copy of the Real Dom, used for efficient updates in web development.

• Real Dom represents the actual structure of the web page, while Virtual Dom is a simplified version stored in memory.

• Changes made to the Virtual Dom are compared with the Real Dom to determine the minimum number of updates needed.

• React.js uses Virtual Dom to improve performance by mini...read more

State in React is a JavaScript object that stores data and determines how a component renders and behaves.

• State is mutable and can be updated using the setState() method

• State should not be modified directly, use setState() instead

• State is local and specific to a component

JSX is a syntax extension for JavaScript used with React. State in React is an object that stores component data.

• JSX allows writing HTML in JavaScript and is compiled to regular JavaScript.

• State in React is an object that stores component data and determines how the component renders and behaves.

• State can be updated using the setState() method.

Selectors in CSS are patterns used to select and style HTML elements.

• Selectors are used to target specific elements in an HTML document

• There are different types of selectors like element selectors, class selectors, ID selectors, etc.

• Selectors can be combined to create complex selectors

• Examples: 'h1' selects all h1 elements, '.class' selects elements with a specific class, '#id' selects elements with a specific ID

Partial view is a reusable piece of a view, while view is the complete page.

• Partial view can be used in multiple views, while view is unique

• Partial view is a smaller component of a view

• View is the complete HTML page, while partial view is a part of it

Context is used to share data between components without passing props manually.

• Create a context using createContext()

• Wrap the components that need access to the context in a component

• Access the context value using useContext() hook

• Update the context value using the provided setter function

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

• Sass allows for variables, nesting, and mixins, making CSS code more maintainable and DRY.

• It provides features like inheritance, functions, and loops, which help in writing cleaner and more organized stylesheets.

• Sass also supports modular and reusable code, improving development efficiency and scalability.

• By using Sass, developers can easily manage large and complex sty...read more

The catalog UI runs before the client script.

• Catalog UI policies are evaluated before client scripts.

• Catalog UI policies can control field visibility, mandatory fields, etc.

• Client scripts run after the catalog UI policies are evaluated.

HOC (Higher Order Components) in React are functions that take a component and return a new component with additional functionality.

• HOCs are a common pattern in React for code reuse, logic abstraction, and separation of concerns.

• They are used to enhance components with additional props, state, or lifecycle methods.

• Example: Creating a HOC that adds a loading spinner while data is being fetched from an API.

Position properties in CSS control the positioning of elements on a webpage.

• The 'position' property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

• The 'top', 'right', 'bottom', and 'left' properties can be used to adjust the position of an element relative to its containing element.

• Examples: position: relative; top: 10px; left: 20px;

I enjoy focusing on front end development as it allows me to specialize and excel in creating user-friendly interfaces.

• I have a passion for creating visually appealing and interactive user interfaces.

• I excel in front end technologies such as HTML, CSS, and JavaScript.

• I enjoy the creativity and design aspect of front end development.

• I believe specializing in front end development will allow me to hone my skills and become an expert in this area.

Class-based components are ES6 classes that extend React.Component, while function-based components are functions that return JSX.

• Class-based components are more feature-rich and have access to lifecycle methods.

• Function-based components are simpler and easier to read and test.

• Class-based components can have state and use lifecycle methods like componentDidMount and componentDidUpdate.

• Function-based components can use React hooks to manage state and lifecycle.

• Class-based comp...read more

CSS components include selectors, properties, values, and units.

• Selectors are used to target specific HTML elements.

• Properties define the visual appearance and behavior of elements.

• Values determine the specific settings for properties.

• Units specify the measurement used for values, such as pixels or percentages.

CSS stands for Cascading Style Sheets. It is used to style the layout and appearance of web pages.

• CSS is used to control the design and layout of web pages.

• It allows for styling elements such as fonts, colors, spacing, and positioning.

• CSS can be applied inline, internally within HTML, or externally in a separate stylesheet.

• Selectors are used to target specific elements for styling.

• CSS can also be used for creating animations and transitions.

• Example:

useState hook is used to update the state values in React components.

• useState hook is a built-in React hook that allows functional components to have state.

• It returns an array with two elements - the current state value and a function to update that value.

• Example: const [count, setCount] = useState(0);

• To update the state value, you call the setter function returned by useState, passing in the new value.

• Example: setCount(count + 1);

Hooks in React are functions that let you use state and other React features in functional components.

• Hooks were introduced in React 16.8 to allow functional components to have state and lifecycle methods.

• useState() is a hook that allows you to add state to functional components.

• useEffect() is a hook that lets you perform side effects in functional components.

• Custom hooks are reusable functions that can contain stateful logic and be shared across components.

Life Cycle Methods in React

• React components have several life cycle methods that are called at different stages of a component's life

• These methods allow developers to perform actions like initializing state, fetching data, and updating the UI

• Some commonly used life cycle methods are componentDidMount, componentDidUpdate, and componentWillUnmount

API integration in React involves fetching data from an external API and displaying it in the application.

• Use fetch or axios to make API calls in React

• Store API response data in state using useState hook

• Render the data in the component's JSX

Class based vs function based React components with differences explained.

• Class based components are ES6 classes that extend React.Component and have lifecycle methods.

• Function based components are simple functions that return JSX.

• Class based components have state and lifecycle methods, while function based components use hooks for state and lifecycle management.

• Class based components have a render method, while function based components directly return JSX.

• Class based compon...read more

Creating a counter in React to increment and decrement a value.

• Create a state variable to store the count value

• Use setState to update the count value

• Render the count value in the component

• Add buttons to increment and decrement the count value

A pure component in React is a component that does not re-render unless its props have changed.

• Pure components extend React.PureComponent class

• Pure components implement shouldComponentUpdate method to compare props and state for changes

• Pure components are useful for optimizing performance by preventing unnecessary re-renders