 |
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.
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.
Ans:
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.
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.
Example:
<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>
Ans: Each tag has additional attributes that change the way the tag behaves or is displayed.
Example:
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.
Example:
<!-- Text field -->
<input type="text" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" value="on" />
Ans: There are three ways to include the CSS with HTML:
Inline CSS: It is used for styling small contexts. To use inline styles add the style attribute in the relevant tag.
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
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
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
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Ans: There are three tags that can be used to separate the texts:
Ans: There are many common lists used for designing a page. You can choose any or a combination of the following type of lists:
Ans: To increase the page performance, the following are a few steps.
Ans: There are two types of data types in JavaScript:
1. Primitive data types.
2. Non-primitive data types.
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.
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.
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.
Ans: A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables.
Example:
function outer() {
var a = 10;
function inner() {
var b = 20;
console.log(a+b);
}
return inner;
}
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.
Examples:
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.
Examples:
var myArray4 = new Array(1,2,3,4,5) // an array with 5
Elements
var myArray5 = new Array(20) // an empty array of
length 20
var myArray6 = new Array() // an empty array of
length 0
Ans: These are some effects methods used 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.
Ans: There are two methods used to transfer data between the two more more security domains:
Ans:
Ajax:
Javascript:
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.
Ans: HTML provides the support of the following elements for representing the media content.
Ans: The <!DOCTYPE> declaration provides instruction to the web browser to understand what information should be displayed, and the need to start with <!DOCTYPE> declaration. In HTML5, DOCTYPE declaration is very short, and case-insensitive, and <!DOCTYPE html> 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:
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.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:2px solid pink;}
</style>
</head>
<body>
<canvas id = “mycanvas” width = “150” height = “150”></canvas>
</body>
</html>
Ans:
CSS:
CSS 3:
Ans: Users have to apply the border-image property to specify the image to be used as the border around an element.
Example:
img {
border:1px solid #021a40;
}
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.
Example:
div {
transition-timing-function: linear;
}
Ans:
<style>
#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;
}
</style>
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.
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.
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.
Batch starts on 8th Mar 2021, Weekday batch
Batch starts on 12th Mar 2021, Fast Track batch
Batch starts on 16th Mar 2021, Weekday batch
©2021 HKR Trainings. All rights Reserved.