UI Developer

100+ UI Developer Interview Questions and Answers

Updated 20 Feb 2025

Q51. Difference between Angular and React

Ans.

Angular is a full-fledged framework while React is a library for building UI components.

  • Angular is a complete solution for building web applications while React is focused on building UI components.

  • Angular uses two-way data binding while React uses one-way data flow.

  • Angular has a steeper learning curve while React is easier to learn.

  • Angular has a larger file size while React has a smaller file size.

  • Angular has a built-in dependency injection system while React does not.

  • Angula...read more

Q52. How to fetch value using different methods

Ans.

Different methods to fetch values in UI development

  • Using document.getElementById() to fetch value by element ID

  • Using document.querySelector() to fetch value by CSS selector

  • Using event.target.value to fetch value from input fields

  • Using AJAX to fetch data from server

  • Using local storage to fetch stored values

Q53. Nth child in css and semantic tags click event in jQuery

Ans.

Explanation of nth-child in CSS and click event in jQuery with semantic tags.

  • nth-child is a CSS selector that selects elements based on their position in a parent element

  • jQuery click event is used to trigger an action when an element is clicked

  • Semantic tags like

    ,
    ,
  • Example: $('article:nth-child(2)').click(function() { //code });

Q54. What is box model how to align the div center

Ans.

The box model in CSS defines the design and layout of elements on a webpage. To align a div center, use margin: auto.

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

  • To align a div center horizontally, set margin-left and margin-right to auto.

  • To align a div center vertically, set margin-top and margin-bottom to auto.

Are these interview questions helpful?

Q55. What is different between react and angular?

Ans.

React is a JavaScript library for building user interfaces, while Angular is a full-fledged framework for web development.

  • React is a library, while Angular is a framework.

  • React uses a virtual DOM for better performance, while Angular uses a regular DOM.

  • React is more flexible and allows developers to choose their own tools and libraries, while Angular has a more opinionated structure.

  • React is mainly focused on the view layer, while Angular provides a more comprehensive solutio...read more

Q56. Explain how to create a custom directive in angular

Ans.

Creating a custom directive in Angular involves defining a new directive using the 'directive' method.

  • Define a new directive using the 'directive' method in Angular module

  • Specify the directive's name, template, controller, and any other necessary properties

  • Use the directive in HTML by referencing its name as an attribute or element

Share interview questions and help millions of jobseekers 🌟

man-with-laptop

Q57. What is different between html html 4 nd html 5

Ans.

HTML5 introduced new features like semantic elements, audio/video support, canvas element, and improved form controls.

  • HTML5 introduced new semantic elements like <header>, <footer>, <nav>, <article>, <section> for better structure and SEO.

  • HTML5 added native support for audio and video elements, eliminating the need for third-party plugins like Flash.

  • HTML5 introduced the <canvas> element for drawing graphics and animations directly in the browser.

  • HTML5 improved form controls w...read more

Q58. Lazy loading in React.

Ans.

Lazy loading is a technique used to defer the loading of non-critical resources until they are needed.

  • Lazy loading can improve the performance of a React application by reducing the initial load time.

  • React.lazy() is a built-in function that allows for lazy loading of components.

  • Code splitting can be used to split the application into smaller chunks that can be loaded on demand.

  • Lazy loading can be used for images, videos, and other resources that are not immediately necessary....read more

UI Developer Jobs

Ui Developer 6-9 years
HCLTech
3.5
₹ 18 L/yr - ₹ 28 L/yr
Bangalore / Bengaluru
Ui Developer 3-8 years
Capgemini
3.7
Hyderabad / Secunderabad
Lead Engineer - User Interface Developer 5-9 years
GE India Industrial Private Limited
4.2
Hyderabad / Secunderabad

Q59. What are the different datatypes in JavaScript?

Ans.

Different datatypes in JavaScript include string, number, boolean, object, array, null, and undefined.

  • String: 'hello'

  • Number: 42

  • Boolean: true or false

  • Object: { key: value }

  • Array: [1, 2, 3]

  • Null: null

  • Undefined: undefined

Q60. how does the virtual DOM improve performance?

Ans.

The virtual DOM improves performance by minimizing the number of updates needed to the actual DOM.

  • Virtual DOM allows for efficient batch updates to the actual DOM, reducing the number of reflows and repaints.

  • It compares the virtual DOM with the actual DOM and only updates the necessary changes, instead of re-rendering the entire DOM tree.

  • This results in faster rendering and better performance, especially for complex UIs with frequent updates.

Q61. 2. Difference between synchronous and asynchronous programming

Ans.

Synchronous programming executes code sequentially, blocking further execution until the current task is completed. Asynchronous programming allows multiple tasks to be executed concurrently, without waiting for each other to finish.

  • Synchronous programming is easier to read and debug, but can lead to blocking issues.

  • Asynchronous programming is more complex, but improves performance by allowing non-blocking execution.

  • Examples of synchronous operations include reading a file or...read more

Q62. React virtual dom, how it works

Ans.

React virtual DOM is a lightweight copy of the actual DOM, which allows React to efficiently update and render components.

  • React creates a virtual DOM tree that mirrors the actual DOM.

  • When changes occur, React compares the virtual DOM with the previous version to identify the minimal updates needed.

  • React then updates the virtual DOM and efficiently applies the changes to the actual DOM.

  • This process helps in optimizing performance by reducing the number of direct manipulations ...read more

Q63. How angular works , architecture

Ans.

Angular is a JavaScript framework for building web applications with a modular architecture.

  • Angular uses a component-based architecture to build reusable UI components

  • It uses a declarative approach to define UI elements and their behavior

  • Angular provides a powerful set of tools for data binding, dependency injection, and routing

  • It follows the MVC (Model-View-Controller) pattern to separate concerns and improve maintainability

  • Angular also supports server-side rendering for bet...read more

Q64. What is flex - box ?

Ans.

Flexbox is a layout mode in CSS that allows you to arrange and align items within a container.

  • Flexbox is used for creating responsive and flexible layouts.

  • It allows you to easily align and distribute space among items in a container.

  • Flexbox has properties like flex-direction, justify-content, align-items, and flex-wrap.

  • It is supported by all modern browsers.

  • Example: display: flex; justify-content: center; align-items: center;

Q65. what is dependency injection

Ans.

Dependency injection is a design pattern that allows objects to receive dependencies rather than creating them internally.

  • It helps to decouple the code and makes it more testable.

  • It allows for easier maintenance and scalability.

  • It can be implemented using constructor injection, setter injection, or interface injection.

  • Example: Instead of creating a database connection object within a class, it can be passed as a dependency through constructor injection.

Frequently asked in,

Q66. Semantic structure of HTML.

Ans.

Semantic structure of HTML refers to using HTML elements to properly structure and organize content for better accessibility and SEO.

  • Semantic HTML elements provide meaning to the content, making it easier for search engines to understand and index the page.

  • Examples of semantic elements include <header>, <nav>, <article>, <section>, <aside>, <footer>, <main>, <figure>, <figcaption>.

  • Using semantic elements improves accessibility for users with disabilities, as screen readers ca...read more

Q67. How to detect a cycle in a linkedlist?

Ans.

To detect a cycle in a linked list, use Floyd's Tortoise and Hare algorithm.

  • Initialize two pointers, slow and fast, at the head of the linked list.

  • Move slow pointer by one step and fast pointer by two steps. If they meet at any point, there is a cycle.

  • If fast pointer reaches the end of the list without meeting slow pointer, there is no cycle.

Q68. Event propagation vs immediate propgation Div vs Section tag

Ans.

Event propagation determines the order in which event handlers are executed. Div and Section tags have different default display properties.

  • Event propagation refers to the order in which event handlers are executed, either bubbling or capturing.

  • Immediate propagation stops the event from propagating further.

  • Div tag is a block-level element with default display property of 'block'.

  • Section tag is a block-level element with default display property of 'block'.

Q69. what do you mean by responsive website?

Ans.

A responsive website is one that adapts to different screen sizes and devices.

  • Uses flexible layouts and images

  • Uses media queries to adjust styles based on screen size

  • Provides optimal user experience on all devices

  • Examples: Amazon, Netflix, and Google

Q70. What's the meaning of == and === in javascript

Ans.

The == operator checks for equality, while the === operator checks for strict equality in JavaScript.

  • The == operator performs type coercion before comparing values.

  • The === operator does not perform type coercion and compares both value and type.

  • For example, 1 == '1' returns true, but 1 === '1' returns false.

Q71. What is arrays explain the array

Ans.

Arrays are a data structure that stores a collection of elements of the same data type in a contiguous memory location.

  • Arrays have a fixed size determined at the time of declaration.

  • Elements in an array are accessed using an index starting from 0.

  • Arrays can store primitive data types like integers, floats, or objects like strings.

  • Example: var fruits = ['apple', 'banana', 'orange'];

Q72. What is stop propagation when to use

Ans.

Stop propagation is a method used to prevent event bubbling in the DOM.

  • It is used when you want to stop an event from propagating to its parent elements.

  • It can be used to prevent unwanted behavior caused by event bubbling.

  • It is commonly used in JavaScript event handling.

  • Example: event.stopPropagation()

  • Example:

Q73. 1. Find the longest subsequence in string

Ans.

Find the longest subsequence in a string

  • Iterate through the string and keep track of the current subsequence length

  • Update the longest subsequence length whenever a longer subsequence is found

  • Return the longest subsequence found

Q74. What is Closure in javascript

Ans.

Closure is a function that has access to its own scope, the outer function's scope, and the global scope.

  • Closure allows a function to access variables from its outer function even after the outer function has finished executing.

  • It helps in creating private variables and functions in JavaScript.

  • Closures are created every time a function is created, and they store references to the variables in their lexical environment.

  • Example: function outer() { var x = 10; function inner() {...read more

Q75. What is pseudo class in CSS?

Ans.

Pseudo classes are keywords used to define a special state of an element.

  • Pseudo classes start with a colon (:)

  • They are used to style elements based on their state or position

  • Examples include :hover, :active, :first-child, :nth-child

  • Pseudo classes can be combined with selectors to target specific elements

Q76. What software I use for UI development.

Ans.

I use a variety of software for UI development depending on the project requirements.

  • For wireframing and prototyping, I use tools like Sketch, Figma, and Adobe XD.

  • For coding and development, I use HTML, CSS, JavaScript, and frameworks like React and Angular.

  • For version control and collaboration, I use Git and GitHub.

  • For testing and debugging, I use browser developer tools and tools like Jest and Enzyme.

  • For optimizing performance and accessibility, I use tools like Lighthouse ...read more

Q77. How can you optimise your website

Ans.

Optimise website by improving page speed, reducing HTTP requests, compressing images, minifying code, and using caching.

  • Use a content delivery network (CDN)

  • Minify CSS, JavaScript, and HTML

  • Reduce image sizes and use WebP format

  • Enable browser caching

  • Reduce HTTP requests

  • Use lazy loading for images and videos

  • Optimise server response time

  • Use Gzip compression

  • Eliminate render-blocking JavaScript and CSS

  • Use asynchronous loading for JavaScript

  • Optimise database queries

Q78. Write a program to get sum of array

Ans.

Program to calculate the sum of an array

  • Iterate through the array and add each element to a running total

  • Use a loop or a built-in array method to calculate the sum

  • Handle edge cases like empty arrays or non-numeric elements

Q79. To create a responsive web page / template

Ans.

To create a responsive web page / template

  • Use CSS media queries to adjust the layout based on screen size

  • Implement a flexible grid system to ensure content adapts to different devices

  • Optimize images and other media for faster loading on mobile devices

  • Consider touch-friendly interactions and gestures for mobile users

  • Test the responsiveness across various devices and screen sizes

Q80. functional component vs class based component

Ans.

Functional components are simpler, lightweight, and easier to read, while class-based components have more features and lifecycle methods.

  • Functional components are stateless and are just JavaScript functions that return JSX.

  • Class-based components have access to lifecycle methods like componentDidMount and componentDidUpdate.

  • Functional components are easier to test and reuse.

  • Class-based components are more suitable for complex logic and state management.

  • Example: Functional com...read more

Q81. Difference between absolute and relative in CSS

Ans.

Absolute and relative are two positioning values in CSS.

  • Absolute positioning is based on the nearest positioned ancestor element, while relative positioning is based on the element's normal position.

  • Absolute positioning takes the element out of the normal flow of the document, while relative positioning does not.

  • Absolute positioning is often used for creating overlays or pop-ups, while relative positioning is often used for minor adjustments to an element's position.

  • Examples:...read more

Q82. jQuery dynamic moving item using keyboard

Ans.

jQuery can be used to move items dynamically using keyboard events.

  • Use keydown event to detect keyboard input

  • Use CSS position property to move the item

  • Use jQuery animate() method to add animation to the movement

  • Example: https://codepen.io/pen/?&editable=true&editors=101

  • Example: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_keydown_moveball

Q83. Write a program to add two array

Ans.

Program to add two arrays of strings

  • Create two arrays of strings

  • Loop through both arrays and add corresponding elements

  • Store the result in a new array

Q84. Write a program to reverse a sentence

Ans.

Program to reverse a sentence using array of strings

  • Split the sentence into an array of words

  • Loop through the array and reverse the order of the words

  • Join the reversed array into a sentence

Q85. Disadvantages of JavaScript

Ans.

JavaScript has some disadvantages that developers should be aware of.

  • JavaScript is an interpreted language, which can lead to slower performance compared to compiled languages.

  • JavaScript has limited support for multithreading, making it difficult to perform complex tasks efficiently.

  • JavaScript can be prone to security vulnerabilities, such as cross-site scripting (XSS) attacks.

  • JavaScript code can be difficult to maintain and debug, especially in large-scale applications.

  • JavaS...read more

Q86. What is the closure in JS?

Ans.

Closure in JS is a function that retains access to variables from its parent scope even after the parent function has finished executing.

  • Closure allows functions to have access to variables from an outer function even after the outer function has finished executing.

  • It is created whenever a function is defined within another function, and the inner function has access to the outer function's variables.

  • Closures are commonly used to create private variables and functions in Java...read more

Q87. how to create responsive webapp

Ans.

To create a responsive webapp, use media queries, flexible grids, and fluid images.

  • Use CSS media queries to adjust layout based on screen size

  • Implement flexible grids using frameworks like Bootstrap or Flexbox

  • Use fluid images that scale with the size of the viewport

Q88. Services and lifecycle hooks in angular

Ans.

Services are used to share data and functionality across components. Lifecycle hooks are methods that get called at specific stages of a component's life.

  • Services are singleton objects that can be injected into components

  • Lifecycle hooks include ngOnInit, ngOnDestroy, and ngOnChanges

  • ngOnInit is called when a component is initialized

  • ngOnDestroy is called when a component is about to be destroyed

  • ngOnChanges is called when a component's input properties change

Q89. Types of Storage in HTML5

Ans.

Types of storage in HTML5 include localStorage, sessionStorage, and IndexedDB.

  • localStorage: stores data with no expiration date

  • sessionStorage: stores data for one session only

  • IndexedDB: stores large amounts of structured data

Q90. What is a promise why its used

Ans.

A promise is an object representing the eventual completion or failure of an asynchronous operation.

  • Promises are used to handle asynchronous operations in JavaScript.

  • They help in avoiding callback hell and writing cleaner code.

  • Promises have states - pending, fulfilled, or rejected.

  • They can be chained using .then() method.

  • Example: Fetching data from an API returns a promise that resolves with the data.

Q91. 2)what is event loop in js

Ans.

Event loop is a mechanism in JavaScript that handles asynchronous operations.

  • Event loop continuously 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 to the call stack.

  • The task is executed and the process repeats.

  • setTimeout and setInterval functions are examples of asynchronous operations that use event loop.

Q92. How to use positions in css

Ans.

CSS positions are used to control the layout of elements on a webpage.

  • Use 'static', 'relative', 'absolute', or 'fixed' to position elements.

  • Elements with 'position: relative' are positioned relative to their normal position.

  • Elements with 'position: absolute' are positioned relative to the nearest positioned ancestor.

  • Elements with 'position: fixed' are positioned relative to the viewport.

  • Use 'top', 'bottom', 'left', and 'right' properties to further adjust the position of elem...read more

Q93. What is view encapsulation

Ans.

View encapsulation is a technique used to isolate components in a web application from each other.

  • It prevents styles and scripts from bleeding into other components.

  • It helps in maintaining code quality and reducing conflicts.

  • It can be achieved using Shadow DOM or CSS modules.

  • Angular provides view encapsulation by default.

Q94. Performance improvement technique using front end

Ans.

Lazy loading images can improve performance by only loading images when they are in the viewport.

  • Lazy loading images

  • Minifying CSS and JavaScript files

  • Using a content delivery network (CDN)

  • Implementing server-side rendering

  • Optimizing images for web

Q95. What is react, html and css?

Ans.

React is a JavaScript library for building user interfaces, HTML is a markup language for creating web pages, and CSS is a styling language for designing web pages.

  • React is a popular JavaScript library used for building interactive user interfaces.

  • HTML is a markup language used to structure content on web pages.

  • CSS is a styling language used to design the layout and appearance of web pages.

  • React components can be written in JSX, a syntax extension for JavaScript.

  • HTML elements...read more

Q96. What is use of constructors in Js

Ans.

Constructors in JavaScript are used to create and initialize objects.

  • Constructors are functions that are used to create new instances of objects.

  • They are called with the 'new' keyword to create a new object based on the constructor's blueprint.

  • They can also be used to set initial values or properties for the object being created.

  • Example: function Person(name, age) { this.name = name; this.age = age; }

  • Example: var person1 = new Person('John', 30);

Q97. Difference between display-block and inline-block

Ans.

display-block takes up full width, while inline-block only takes up necessary width.

  • display-block elements start on a new line and take up the full width available, like <div>

  • inline-block elements do not start on a new line and only take up as much width as necessary, like <span>

  • display-block elements can have margin and padding applied on all sides, while inline-block elements only have margin and padding applied horizontally

Q98. Assignment to convert psd to html

Ans.

Converting PSD to HTML involves translating a design file into a functional website using HTML, CSS, and possibly JavaScript.

  • Analyze the PSD file to identify design elements and layout

  • Use HTML to structure the content and layout of the website

  • Apply CSS to style the elements according to the design

  • Optimize images and assets for web use

  • Ensure responsiveness for different screen sizes

  • Test the website across browsers and devices

Q99. Difference between HTML and HTML 5

Ans.

HTML is the standard markup language for creating web pages, while HTML5 is the latest version with new features and improvements.

  • HTML is the standard markup language used to create web pages.

  • HTML5 is the latest version of HTML with new features like <video>, <audio>, <canvas> elements.

  • HTML5 supports multimedia elements, offline storage, and improved semantics.

  • HTML5 introduced new APIs like Geolocation API, Web Storage API, and Web Workers API.

Q100. Javascript functions ES6 vs prev ones

Ans.

ES6 introduced arrow functions, default parameters, rest parameters, spread syntax, and more.

  • Arrow functions provide a more concise syntax for writing functions.

  • Default parameters allow you to specify default values for function parameters.

  • Rest parameters allow you to pass an indefinite number of arguments to a function as an array.

  • Spread syntax allows you to expand an array into individual elements when calling a function.

  • ES6 also introduced template literals for string inte...read more

Previous
1
2
3
4
Next
Interview Tips & Stories
Ace your next interview with expert advice and inspiring stories

Interview experiences of popular companies

3.7
 • 10.4k Interviews
3.8
 • 8.1k Interviews
3.6
 • 7.5k Interviews
3.7
 • 5.6k Interviews
3.7
 • 5.6k Interviews
3.5
 • 3.8k Interviews
4.0
 • 1.3k Interviews
4.0
 • 759 Interviews
3.3
 • 519 Interviews
3.8
 • 114 Interviews
View all

Calculate your in-hand salary

Confused about how your in-hand salary is calculated? Enter your annual salary (CTC) and get your in-hand salary

UI Developer Interview Questions
Share an Interview
Stay ahead in your career. Get AmbitionBox app
qr-code
Helping over 1 Crore job seekers every month in choosing their right fit company
65 L+

Reviews

4 L+

Interviews

4 Cr+

Salaries

1 Cr+

Users/Month

Contribute to help millions

Made with ❤️ in India. Trademarks belong to their respective owners. All rights reserved © 2024 Info Edge (India) Ltd.

Follow us
  • Youtube
  • Instagram
  • LinkedIn
  • Facebook
  • Twitter