Zensar Technologies UI Frontend Developer Interview Questions and Answers

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...read more

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, ...read more

There are several ways to create objects in JS, including object literals, constructor functions, and ES6 classes.

• Object literals: var obj = {key1: value1, key2: value2}

• Constructor functions: function Person(name, age) {this.name = name; this.age = age}; var person1 = new Person('John', 30)

• ES6 classes: class Car {constructor(make, model) {this.make = make; this.model = model}}; var car1 = new Car('Toyota', 'Corolla')

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(...read more

New input types in HTML5 include color, date, email, number, range, tel, and more.

• Color: Allows users to select a color.

• Date: Provides a date picker for selecting dates.

• Email: Ensures that the input is a valid email address.

• Number: Restricts input to numeric values.

• Range: Allows users to select a value within a specified range.

• Tel: Ensures that the input is a valid telephone number.

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

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

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.

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

  ,