UI Developer Interview questions

UI is an acronym for user interface and UX is an acronym for a user experience that is designed for delivering look and feel of websites. A UI designer is responsible for product improvement, customer reach, prototyping, design planning, competitor analysis, UI prototyping, and animation sequences, etc.

In this article, you can go through the set of UI Developer interview questions most frequently asked in the interview panel. This will help you crack the interview as the topmost industry experts curate these at HKR training.

Let us have a quick review of the UI Developer interview questions.

1. What kind of skills do you think are crucial for a successful UI developer?

Ans: UI developers must have skills in visual design including animation and interactive elements, prototyping platforms, copywriting, SEO, site analytics, and front-end frameworks. A good UI developer knows HTML, CSS, and also Photoshop even when it’s not mandatory.


2. What’s the difference between a UI developer and a UX developer?


  • A UI developer takes care of the designing part of the visual, interactive elements, that helps users navigate their way through the product. 
  • A UX developer creates and improves the quality of a user’s interaction with both the company and its product. 
  • If UI and UX were part of the human body, UI would be the skin and appearance, while UX would be the internal organs.
3. Does HTML need a compiler?

Ans: No, HTML need not have any compiler, because it is a front end language, whereas Java, C, C++ need a compiler to convert the code into machine understandable language. 

4. How many types of heading does an HTML contain?

Ans: The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each type of heading tag displays different text size from another. Here, <h1> is the largest heading tag and <h6> is the smallest one. 


<h1>Heading no. 1</h1>    

<h2>Heading no. 2</h2>    

<h3>Heading no. 3</h3>    

<h4>Heading no. 4</h4>    

<h5>Heading no. 5</h5>    

<h6>Heading no. 6</h6>

5. What are Attributes and how do you use them?

Ans: Each tag has additional attributes that change the way the tag behaves or is displayed. 


A <input> tag has a type attribute that can be used to specify whether it’s a text field, checkbox, radio button or one of many more options.

Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags. But, they can never be in closing tags.


<!-- Text field -->

<input type="text" />

<!-- Checkbox -->

<input type="checkbox" />

<!-- Radio button -->

<input type="radio" value="on" />
6. How many types of CSS can be included in HTML?

Ans: There are three ways to include the CSS with HTML:

  1. Inline CSS: It is used for styling small contexts. To use inline styles add the style attribute in the relevant tag.
  2. External Style Sheet: This is used when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

<link rel="stylesheet" type="text/css" href="mystyle.css"/>


3.Internal Style Sheet: It is used when a single document has a unique style. Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag in the following way:


<style type="text/css">

hr {color:sienna}

p {margin-left:20px}

body {background-image:url("images/back40.gif")}


7. What are the tags used to separate a section of texts?

Ans: There are three tags that can be used to separate the texts:

  • <br> tag: The <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line.
  • <p> tag: This contains the text in the form of a new paragraph.
  • <blockquote> tag: It is used to define a large quoted section. If you have a large quotation, then put the entire text within the tags.

<blockquote>……….</blockquote> tag.

8. Name some common lists that are used when designing a page.

Ans: There are many common lists used for designing a page. You can choose any or a combination of the following type of lists:

  • Ordered list: The ordered list displays elements in a numbered format. It is represented by the <ol> tag.
  • Unordered list: The unordered list displays elements in a bulleted format. It is represented by the <ul> tag.
  • Definition list: The definition list displays elements in definition form like in a dictionary. The <dl>, <dt> and <dd> tags are used to define description lists.

9. What can you do to increase page performance?

Ans: To increase the page performance, the following are a few steps.

  • Reduce image size.
  • Clear the cache.
  • Reduce the external HTTP requests.
  • Load the JavaScript asynchronously
  • Code your site for mobile. 

10. What are the JavaScript data types?

Ans: There are two types of data types in JavaScript:

1. Primitive data types.

  • String - It represents a sequence of characters, for example: "hello".
  • Number - It represents numeric values, for example, 100.
  • Boolean - It represents boolean value either false or true.
  • Undefined - represents an undefined value.
  • Null - represents null, i.e., no value at all.

2. Non-primitive data types.

  • Object - It represents an instance through which we can access members.
  • Array - It represents a group of similar values.
  • RegExp - It represents a regular expression.

11. Explain the “for-in” loop in javascript.

Ans: The “for-in” loop is used to loop through the properties of an object.

The syntax for the “for-in” the loop is.

for (variable name in object){

statement or block to execute


In each repetition, one property from the object is associated with the variable name, and the loop is continued till all the properties of the object are depleted.

12. How are DOM utilized in JavaScript?

Ans: DOM stands for Document Object Model and is responsible for how various objects in a document interact with each other. DOM is required for developing web pages, which includes objects like paragraphs, links, etc. These objects can be operated to include actions like add or delete. DOM is also required to add extra capabilities to a web page. On top of that, the use of API gives an advantage over other existing models.

13. How are event handlers utilized in JavaScript?

Ans: Events are the actions that result from activities, such as clicking a link or filling a form, by the user. An event handler is required to manage the proper execution of all these events. Event handlers are an extra attribute of the object. This attribute includes the event's name and the action taken if the event takes place.

UI Certification Training

  • Master Your Craft
  • Lifetime LMS & Faculty Access
  • 24/7 online expert support
  • Real-world & Project Based Learning


14. What is a Closure in JavaScript?

Ans: A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables.

  • It has access to its own scope i.e. variables defined between its curly brackets.
  • It has access to the outer function's variables.
  • It has access to global variables.


function outer() {

   var a = 10;

   function inner() {

         var b = 20; 



   return inner;


15. What are the different ways to create an array in JavaScript?

Ans: There are two ways to create an object in javascript.

1. Using an array initializer (array literal).
The array initializer syntax is simple. It is represented in a comma-separated list of values in square brackets.


var myArray1 = [1,2,3,4,5]      // an array with 5 elements

var myArray2 = [5]              // an array with 1 element

var myArray3 = [true,'Hi',[7]]  // element types need not be the same.

2. Using the Array constructor.
The Array constructor method has three different syntaxes. If the constructor is called with two or more arguments, it declares an array with array elements also initialized. If only one argument is provided to the Array constructor, it refers to the length of the new array with elements not initialized. Finally, the constructor without any argument creates an array with its length set to zero without initializing the elements.


var myArray4 = new Array(1,2,3,4,5)  // an array with 5


var myArray5 = new Array(20)        // an empty array of

length 20

var myArray6 = new Array()           // an empty array of

length 0

16. What are the effects methods used in jQuery?

Ans: These are some effects methods used in jQuery:

  • show() - It displays or shows the selected elements.
  • hide() - It hides the matched or selected elements.
  • toggle() - It shows or hides the matched elements. In other words, it toggles between the hide() and shows() methods.
  • fadeIn() - It shows the matched elements by fading it to opaque. In other words, it fades in the selected elements.
  • fadeOut() - It shows the matched elements by fading it to transparent. In other words, it fades out the selected elements.

17. What are the selectors in jQuery? How many types of selectors in jQuery?

Ans: To work with an element on the web page, first you must find it. Selectors find the HTML elements in jQuery. There are many types of selectors. Some basic selectors are as follows.

  • Name: It is used to select all elements that match the given element Name.
  • #ID: It is used to select a single element that matches the given ID.
  • Class: It is used to select all elements that match with the given Class.
  • Universal (*): It is used to select all elements available in a DOM.
  • Multiple Elements E, F, G: It is used to select the combined results of all the specified selectors E, F or G.
  • Attribute Selector: It is used to select elements based on its attribute value.

18. Which are the two methods used for cross domain Ajax calls?

Ans: There are two methods used to transfer data between the two more more security domains:

  • CORS – Cross Origin Resource Sharing and it works with the HTTP web browsers.
  • JSONP – JSON with Padding which works with the HTTP GET and on legacy browsers.

19. What are the differences between AJAX and Javascript?



  • AJAX sends requests to the server and does not wait for the response. It performs other operations on the page during that time.
  • AJAX does not require the page to refresh for downloading the whole page.
  • AJAX minimizes the overload on the server since the script needs to request once.


  • JavaScript makes a request to the server and waits for a response.
  • JavaScript manages and controls a Web page after being downloaded.
  • JavaScript posts a request that updates the script every time.

20. What is JSON in Ajax?

Ans: JSON is abbreviated as JavaScript Object Notation. JSON is a safe and reliable data interchange format in JavaScript, which is easy to understand for both users and machines. Developers use JSON to pass the updates made in AJAX between the client and the server. We can take websites with live updates and can be considered as an example of AJAX with JSON. It directly assigns data to the elements present in DOM of the web pages.

Subscribe to our youtube channel to get new updates..!


21. What are the various elements provided by HTML5 for media content?

Ans: HTML provides the support of the following elements for representing the media content.

  • <audio> – It defines the sound content.
  • <video> – It represents the video content that needs to be attached to a Web page.
  • <source> – This tag defines the source of video and audio.
  • <embed > – It provides a container for an external application.
  • <track> – It defines text tracks for video and audio.

22. What is ? What are the different types of that are available?

Ans: The declaration provides instruction to the web browser to understand what information should be displayed, and the need to start with declaration. In HTML5, DOCTYPE declaration is very short, and case-insensitive, and is written at the top of every HTML5 page.

The following DOCTYPE are also supported in HTML5:

There are 3 types of DOCTYPES as mentioned below:

  • Strict Doctype.
  • Frameset Doctype.
  • Transitional Doctype.

23. Explain about Graphics using Canvas with an example.

Ans: The <canvas> element is used to design graphics on the web page, and it has several methods available for drawing circles, boxes, adding images and text. The default pixel size of canvas is 300 px X 150 px (width X height).

Example: to Draw square Box using canvas element is shown below.





#mycanvas{border:2px solid pink;}




<canvas id = “mycanvas” width = “150” height = “150”></canvas>



24. What are the differences between CSS and CSS 3?



  • CSS is mostly focused on offering various formatting features.
  • There are missing features such as layer design, page element addition, special effects, etc.
  • Can’t split into modules.
  • Only support single text blocks.

CSS 3:

  • CSS 3 is focused on improving the design of web pages.
  • It is easy to use and includes plenty of features that were missing on CSS.
  • Can split into multiple modules.
  • Multi-column text blocks are supported here.

25. How to add borders to an image using CSS 3?

Ans: Users have to apply the border-image property to specify the image to be used as the border around an element.


img {

   border:1px solid #021a40;


26. What is CSS transition-timing-function Property?

Ans: The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.


div {

transition-timing-function: linear;


27. Can you write CSS 3 code for creating Multi Background Images?



#multibackgroundimg {

background-image: url(/css/images/logo1.png), url(/css/images/border1.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;



UI Certification Training

Weekday / Weekend Batches


28. What is data binding in AngularJS?

Ans: Automatic synchronization of data between the model and view components is referred to as data binding in AngularJS. There are two ways for data binding

1. Data mining in classical template systems.

2. Data binding in angular templates.

29. List types of filters in AngularJS.

Ans: Types of filters used in AngularJS are: 

currency: Format a number to a currency format.

date: Format a date to a specified format.

filter: Select a subset of items from an array.

json: Format an object to a JSON string.

limit: To Limits an array/string, into a specified number of elements/characters.

lowercase: Format a string to lowercase.

number: Format a number to a string.

orderBy: Orders an array by an expression.

uppercase: Format a string to uppercase.

30. Is AngularJS well-suited with all browsers?

Ans: Yes, AngularJS is supported with all the browsers like Safari, Chrome, Mozilla, Opera, and Internet Explorer, etc. It is also companionable with mobile browsers.

Find our upcoming UI Certification Training Online Classes

  • Batch starts on 1st Jun 2022, Weekday batch

  • Batch starts on 5th Jun 2022, Weekend batch

  • Batch starts on 9th Jun 2022, Weekday batch

Global Promotional Image


Request for more information

Kavya Gowda
Kavya Gowda
Research Analyst
Kavya works for HKR Trainings institute as a technical writer with diverse experience in many kinds of technology-related content development. She holds a graduate education in the Computer science and Engineering stream. She has cultivated strong technical skills from reading tech blogs and also doing a lot of research related to content. She manages to write great content in many fields like Programming & Frameworks, Enterprise Integration, Web Development, SAP, and Business Process Management (BPM). Connect her on LinkedIn and Twitter.