50+ UI Frontend Developer Interview Questions and Answers

Pseudo classes and pseudo elements are CSS selectors that target specific states or parts of an element.

• Pseudo classes target specific states of an element, such as :hover, :active, and :focus.

• Pseudo elements target specific parts of an element, such as ::before and ::after.

• Pseudo classes and pseudo elements are denoted by a colon (:) or double colon (::) preceding the selector.

• They can be used to add special effects, such as changing the color of a link when it is hovered ov...read more

display: inline, block and inline-block are CSS properties that define how an element is displayed on a webpage.

• display: inline - element is displayed inline with the text and other inline elements. It does not start on a new line.

• display: block - element is displayed as a block-level element, starting on a new line and taking up the full width available.

• display: inline-block - element is displayed inline with the text and other inline elements, but can have a width and heigh...read more

position: absolute takes element out of normal flow, position: relative keeps element in normal flow but allows for positioning

• position: absolute removes element from normal flow and positions it relative to the nearest positioned ancestor

• position: relative keeps element in normal flow but allows for positioning relative to its normal position

• position: absolute elements are positioned relative to the nearest positioned ancestor, if none then relative to the initial containing...read more

Elements are the smallest building blocks of React UI, while components are made up of one or more elements.

• Elements are immutable and cannot be changed once created

• Components are reusable and can be composed of other components

• Elements are represented by tags, while components are represented by functions or classes

• Examples of elements include

  , , and , while examples of components include

  ,

JS has various string methods to manipulate and extract information from strings.

• toUpperCase() - converts string to uppercase

• toLowerCase() - converts string to lowercase

• charAt() - returns character at specified index

• indexOf() - returns index of specified substring

• slice() - extracts a section of a string

• replace() - replaces specified substring with another string

• split() - splits a string into an array of substrings

• trim() - removes whitespace from both ends of a string

Dynamic import is a feature in React that allows loading components or modules on demand.

• Used to improve performance by loading components only when needed

• Implemented using the 'import()' function

• Returns a Promise that resolves to the module

• Can be used with React.lazy() to lazy load components

Function currying is a technique of transforming a function that takes multiple arguments into a sequence of functions that each take a single argument.

• Currying allows partial application of a function.

• It helps in creating reusable functions.

• Curried functions can be composed easily.

• It can be achieved using bind() or closures.

• Example: const add = x => y => x + y; add(2)(3) returns 5.

New input types in HTML5 include date, time, email, number, range, search, tel, url, color, and datetime-local.

• Date input type allows users to select a date from a calendar

• Time input type allows users to select a time

• Email input type validates email addresses

• Number input type restricts input to numeric values

• Range input type allows users to select a value within a range

• Search input type displays a search field

• Tel input type validates phone numbers

• URL input type validates URLs...read more

To find the area of a triangle given coordinates, use the formula: (1/2) * base * height

• Identify the coordinates of the three vertices of the triangle

• Calculate the length of each side of the triangle using the distance formula

• Use Heron's formula or the formula (1/2) * base * height to calculate the area

Bubbling and capturing are two phases of event propagation in JavaScript.

• Bubbling is the default phase where the event starts from the innermost element and propagates outwards to the outermost element.

• Capturing is the opposite phase where the event starts from the outermost element and propagates inwards to the innermost element.

• Both phases can be used to handle events on parent and child elements.

• Event.stopPropagation() can be used to stop the event from propagating further...read more

useCallback and useMemo are both hooks used to optimize performance in React by memoizing values and functions.

• useCallback is used to memoize functions and prevent unnecessary re-renders when passed as props to child components.

• useMemo is used to memoize values and prevent unnecessary re-computations when used in the component's render method.

• Both hooks take a dependency array as a second argument to determine when to recompute the memoized value or function.

• useCallback is ty...read more

Developed a search engine UI using React framework in 30min

• Used React's useState and useEffect hooks to manage state and fetch data

• Implemented a search bar component with onChange event handler

• Displayed search results in a list using map function

• Added pagination for better user experience

z-index is a CSS property that controls the stacking order of elements on a webpage.

• z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky)

• Higher z-index values stack on top of lower ones

• Negative z-index values can be used to place elements behind other elements

• z-index can be used to create layered effects on a webpage

HTML5 is the latest version of HTML with new features like video/audio support, canvas for graphics, local storage, and semantic elements.

• Video and audio support

• Canvas for graphics

• Local storage

• Semantic elements

CSS is used to style HTML elements, while HTML is used to structure content on a webpage.

• HTML provides the structure and content of a webpage, while CSS provides the visual styling.

• HTML uses tags to define elements, while CSS uses selectors to target those elements.

• CSS can be used to change the color, font, size, and layout of HTML elements.

• HTML is used to create the skeleton of a webpage, while CSS is used to make it look visually appealing.

Canvas and SVGs are two different ways to create graphics on the web.

• Canvas is a bitmap-based drawing technology that allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

• SVG is a vector-based drawing technology that allows for scalable, resolution-independent graphics.

• Canvas is best suited for complex, interactive graphics, while SVG is best suited for static, high-resolution graphics.

• Canvas is supported by all modern browsers, while SVG has some limitatio...read more

ForwardRefs allow React components to pass refs to their children.

• Used to access child component's DOM node or instance

• Used with functional components

• Helps in avoiding prop drilling

• Can be used with React.memo for performance optimization

Optimize page load time by reducing bundle size and using lazy loading.

• Use code splitting to split the bundle into smaller chunks

• Use lazy loading to load components only when needed

• Minimize the use of heavy libraries and optimize images

• Use server-side rendering to reduce initial load time

• Use caching to reduce subsequent load times

Debouncing and Throttling are techniques used to limit the number of times a function is called.

• Debouncing delays the execution of a function until a certain amount of time has passed without it being called again.

• Throttling limits the number of times a function can be called within a certain time frame.

• Debouncing is useful for events that may be triggered frequently, such as resizing a window or typing in a search bar.

• Throttling is useful for events that should not be trigge...read more

React is a JavaScript library for building user interfaces.

• Declarative approach to building UI

• Component-based architecture

• Virtual DOM for efficient updates

• JSX syntax for writing HTML in JavaScript

• One-way data binding

• Support for server-side rendering

• Large and active community

• Integration with other libraries and frameworks

JS is a scripting language used for web development. Functions are reusable blocks of code. Global scope refers to variables accessible from anywhere in the code.

• JS is a client-side scripting language used for web development

• Functions are reusable blocks of code that can be called multiple times

• Global scope refers to variables that are accessible from anywhere in the code

• Global variables can be accessed from within a function, but local variables cannot be accessed outside th...read more

React.js has components like JSX, Virtual DOM, Props, State, and Lifecycle methods.

• JSX - syntax extension for JavaScript

• Virtual DOM - lightweight copy of the actual DOM

• Props - read-only data passed from parent to child components

• State - mutable data managed within a component

• Lifecycle methods - methods that are called at specific points in a component's life

CSS box model is a design concept that describes how elements are rendered on a web page.

• It consists of content, padding, border, and margin.

• Content is the actual element content.

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

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

• Margin is the space between the border and the next element.

• The box model can be adjusted using CSS properties such as padding, border, and margin.

• Understanding the box model is important...read more

Promises are objects that represent the eventual completion or failure of an asynchronous operation.

• Promises have 3 states: pending, fulfilled, or rejected

• Pending is the initial state when a promise is created

• Fulfilled means the operation completed successfully

• Rejected means the operation failed

• Promises can be chained using .then() and .catch() methods

Same Origin Policy is a security feature in web browsers that restricts web pages from making requests to a different domain.

• It prevents malicious scripts from accessing sensitive data from other websites

• It applies to all web content, including JavaScript, CSS, and images

• Cross-Origin Resource Sharing (CORS) is used to bypass the Same Origin Policy

• Example: A script from www.example.com cannot access data from www.anotherdomain.com

React is used for building dynamic and interactive user interfaces. Virtual DOM is a lightweight copy of the actual DOM.

• React allows for reusable components and efficient rendering of changes

• Virtual DOM updates only the necessary parts of the actual DOM, improving performance

• React is widely used and has a large community for support and resources

A style sheet is a document containing CSS rules that define how HTML elements should be displayed on a web page.

• Style sheets can be written in a separate file or embedded within an HTML document.

• CSS rules consist of a selector and a declaration block containing one or more property-value pairs.

• Selectors can target specific HTML elements, classes, IDs, or attributes.

• CSS can be used to control layout, typography, colors, and other visual aspects of a web page.

Prototype chaining is the mechanism by which objects inherit properties and methods from their prototype.

• Every object in JavaScript has a prototype property that refers to another object.

• If a property or method is not found on an object, JavaScript looks for it in the object's prototype chain.

• Prototype chaining can be used to create inheritance in JavaScript.

• Modifying the prototype of an object affects all objects that inherit from it.

Media elements are HTML tags used to embed multimedia content like images, videos, and audio files on a webpage.

• Media elements include ,

• They allow for the display of images, videos, and audio files on a webpage

• Attributes like src, alt, and controls are used to customize media elements

call and apply are methods in JS used to invoke a function with a specified 'this' value and arguments.

• call() method is used to invoke a function with a specified 'this' value and arguments provided individually

• apply() method is used to invoke a function with a specified 'this' value and arguments provided as an array

• Both methods are used to borrow methods from other objects, and to set the 'this' value explicitly

Javascript denouncing vs throttling

• Denouncing is delaying the execution of a function until a certain amount of time has passed since the last time it was called

• Throttling is limiting the number of times a function can be called within a certain time period

• Denouncing is useful for functions that are called frequently but only need to be executed once in a while

• Throttling is useful for functions that can be called multiple times in a short period and can cause performance issu...read more

Redux and Flux are state management libraries for JavaScript applications.

• Redux and Flux help manage the state of an application by providing a unidirectional data flow.

• Flux was developed by Facebook and Redux was inspired by Flux.

• Redux uses a single store to manage the state of an application, while Flux uses multiple stores.

• Both libraries use actions to update the state and reducers to handle those actions.

• Redux has become more popular in recent years due to its simplicity ...read more

Prototypal Inheritance is a way of creating objects based on existing objects.

• Objects inherit properties and methods from their prototype object

• Allows for efficient use of memory and code reuse

• Can lead to unexpected behavior if not used carefully

To center a div in the browser view, use CSS and set margin to auto

• Set the width of the div

• Set margin-left and margin-right to auto

• Use text-align:center for centering text inside the div

• Use position:absolute and top:50% for vertical centering

Callbacks are functions passed as arguments to other functions and executed later.

• Callbacks are used for asynchronous programming.

• They allow a function to be called when an event occurs.

• They can be used to handle errors in asynchronous code.

• Examples include event listeners and setTimeout() function.

To initialize jQuery, include the jQuery library in the HTML file and use the $() function.

• Include the jQuery library in the HTML file using a script tag

• Use the $() function to select elements and perform actions on them

• Example:

• Example: $(document).ready(function() { // code here });

Semantic tags in HTML5 are elements that provide meaning to the content of a web page.

• They help search engines and screen readers understand the content.

• Examples include

  ,

• They improve accessibility, SEO, and maintainability of the code.

HTML is a markup language used to create web pages. Div is a container element used to group other HTML elements.

• HTML stands for Hypertext Markup Language

• It is used to structure content on the web

• Div is short for 'division' and is used to group other HTML elements

• It can be styled with CSS to change its appearance

• Example:

  This is a div

let and const are block-scoped variables introduced in ES6.

• let allows reassignment while const does not.

• let and const have different hoisting behaviors.

• const must be initialized during declaration.

• let and const are not accessible outside their block scope.

ES6 (ECMAScript 2015) is a major update to JavaScript that introduced new features and syntax.

• let and const for variable declaration

• arrow functions for concise syntax

• template literals for string interpolation

• destructuring for easy assignment of object properties

• spread and rest operators for manipulating arrays and objects

• classes for object-oriented programming

• modules for better code organization

Closures are functions that have access to variables in their outer scope.

• Closures are created when a function is defined inside another function.

• The inner function has access to the outer function's variables, even after the outer function has returned.

• Closures can be used to create private variables and methods in JavaScript.

• Example: function outer() { let x = 10; function inner() { console.log(x); } return inner; } const closure = outer(); closure(); // logs 10

jQuery is a JavaScript library that simplifies HTML document traversing, event handling, and animating.

• jQuery methods are used to manipulate HTML elements and CSS styles.

• Common methods include .hide(), .show(), .addClass(), .removeClass(), .attr(), .val(), .text(), .html(), .css(), .animate().

• jQuery also has methods for handling events such as .click(), .hover(), .keydown(), .submit().

HTML has various types of elements that are used to structure and present content on the web.

• HTML elements can be categorized into semantic and non-semantic elements

• Semantic elements provide meaning to the content, while non-semantic elements are used for presentation purposes

• Examples of semantic elements include

  ,

Redux is a predictable state container for JavaScript apps.

• Redux is a library for managing application state.

• It provides a single source of truth for the entire application state.

• Redux follows a unidirectional data flow pattern.

• Actions are dispatched to update the state, which triggers a re-render of the UI.

• Redux can be used with React, Angular, Vue, and other frameworks.

Thunk is a function that delays the evaluation of an expression.

• A thunk is a function that wraps an expression to delay its evaluation.

• It is commonly used in Redux to handle asynchronous actions.

• Thunks are used to dispatch actions that return a function instead of an object.

• Thunks can be used to handle side effects in React components.

Worker threads allow for parallel execution of JavaScript code in the browser or Node.js environment.

• Worker threads can be used to perform CPU-intensive tasks without blocking the main thread.

• They can also be used to communicate between different scripts or modules.

• In Node.js, worker threads can be created using the 'worker_threads' module.

• In the browser, worker threads can be created using the 'Worker' constructor.

• Example use cases include image processing, data parsing, and...read more

Currying is a technique in functional programming where a function with multiple arguments is transformed into a sequence of functions each with a single argument.

• Currying allows for partial application of functions.

• It can be achieved using closures or bind() method.

• Curried functions are composable and reusable.

• Example: const add = x => y => x + y; add(2)(3) returns 5.