Frame Learning UI Developer Interview Questions and Answers

Q1. Given UI task display like display boxes side by side in desktop screen and one after the other in mobile screen using media queries?
Add your answer
Q2. Explain difference between authorization vs authentication?
Ans. 
Authentication verifies a user's identity, while authorization determines what a user can access.
• Authentication confirms a user's identity through credentials like username and password.

• Authorization controls access to resources based on the authenticated user's permissions.

• Example: Logging into a website (authentication) and then being able to view/edit specific pages based on your role (authorization).
Answered by AI
Add your answer
Q3. How to render list in react? Also explain difference between state vs prop in react?
Ans. 
To render a list in React, use map() function to iterate over an array of data and return a list of components. State is mutable data managed within a component, while props are immutable data passed from parent to child components.
• To render a list in React, use map() function to iterate over an array of data and return a list of components.

• Example: const items = ['item1', 'item2', 'item3']; items.map(item =>

• read more
Answered by AI
Add your answer

Q1. What are the webpage optimization techniques? How to check webpage optimization? In lighthouse optimization reports , how to fix issue related render blocking scripts?
Ans. 
Webpage optimization techniques include minifying CSS and JS files, optimizing images, using asynchronous loading for scripts, and reducing render-blocking scripts.
• Minify CSS and JS files to reduce file sizes and improve loading times.

• Optimize images by compressing them and using the correct file format (e.g. JPEG for photographs, PNG for graphics).

• Use asynchronous loading for scripts to prevent them from blocking the ...read more
Answered by AI
Add your answer
Q2. Write scss code nested li element by applying background color 2 element and also use mixins?
Ans. 
Use SCSS to apply background color to nested li elements and utilize mixins.
• Use nesting to target the li elements within a parent element

• Apply background color to the 2nd li element using the :nth-child() selector

• Define and use mixins to reuse styles across the codebase
Answered by AI
Add your answer
Q3. How to fix cumulative layout shift issues?
Ans. 
To fix cumulative layout shift issues, ensure all images and media have dimensions specified in HTML, use CSS aspect ratio boxes, and prioritize loading critical resources.
• Specify dimensions for all images and media in HTML to prevent layout shifts.

• Use CSS aspect ratio boxes to reserve space for images before they load.

• Prioritize loading critical resources to avoid sudden layout changes.
Answered by AI
Add your answer

Q1. Indroduction
Add your answer

Hii

Q1. Basic html css and js
Add your answer

Q1. Deep html like meta tags , viewport ,tricky, semantics tags, new input tags ,html5 doctype
Add your answer
Q2. Css z index ,box model , postions, displays, visiblity, opacity,
Add your answer

Q1. For loop fine the array value
Ans. 
Using a for loop to find a specific value in an array of strings.
• Use a for loop to iterate through the array

• Check each element to see if it matches the desired value

• Return the index of the matching element or -1 if not found
Answered by AI
Add your answer
Q2. For loop fine the array valu
Ans. 
To find array values using for loop
• Declare a variable to store the sum of array values

• Use a for loop to iterate through the array

• Access each element using array[index] syntax

• Add the element value to the sum variable

• Return the sum variable
Answered by AI
Add your answer

Excellent and test related which we worked technology only

Q1. 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 ...read more
Answered by AI
Add your answer
Q2. What is props drilling and higher order component in react. ?
Ans. 
Props drilling is passing props through multiple levels of components. Higher order component is a function that takes a component and returns a new component.
• Props drilling involves passing props from a parent component to a deeply nested child component, which can lead to prop pollution and make the code harder to maintain.

• Higher order component is a pattern where a function takes a component and returns a new compon...read more
Answered by AI
Add your answer

Q1. Previous projects domain
Add your answer
Q2. What is role of previous company and some questions related to previous projects
Add your answer