25+ LATEST Interview Questions & Answers [ UI Developer ] | ACTE
Top UI Developer Interview Questions and Answers

25+ LATEST Interview Questions & Answers [ UI Developer ]

Last updated on 04th Jul 2020, Blog, Interview Questions

About author

Kirubanandhan (Sr Project Manager )

(5.0) | 16547 Ratings 890

 These Top UI Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of Top UI . As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer.we are going to cover top 100 Top UI Interview questions along with their detailed answers. We will be covering Top UI   scenario based interview questions, Top UI interview questions for freshers as well as Top UI interview questions and answers for experienced.

Q1. What is Semantic HTML?

Ans:

Semantic HTML is a coding style where the tags will contain in which way texts need to display on the user interface. Tags like bold, Italic should not be used along with semantic HTML as they represent formatting and don’t have any meaning or structure. Semantically correct thing is to use these tags as they will have the same effect as bold and italic along with meaning and structure.

Q2. How absolute, a relative, a static and fixed position will differ?

Ans:

This is the basic UI Developer Interview Question asked in an interview. Please find below the different tables that are supported by UI Developer are:

  • Absolute: It will place the element exactly where a user wants to place it. In general absolute will place relative to the parent. If no parent is available then it is placed relative to the page itself.
  • Relative: It will place the element relative to itself (if we didn’t give any relative positioning) for example if we set position relative to an element and given as top: 10px then it will place the element 10px down from where the actual position of the element is.
  • Static: It will place the element according to the flow of the document. It uses default position, if we want to remove any position then we can use a static position to replace.
  • Fixed: It will place the element relative to the browser window or viewport. The viewport doesn’t change when scrolling. So the element will be fixed at that position.

Q3. What is a responsive website?

Ans:

Any website is meant to be responsive when it looks good and fits in all types of screen resolution device types. In order to re-arrange the elements, display or hide the elements from the user interface we can use CSS media queries to get things done.

Q4. What is the difference between inline, block and inline-block?

Ans:

  • Inline: In this thing, elements will follow the flow without breaking. Margin/padding will push other elements horizontally not vertically and inline elements ignore height and width.
  • Block: It breaks the line and doesn’t fit in the line. It usually has div, p, text, section etc.
  • Inline-block: It is similar to the inline element and follows the page flow. The only difference is that it will consider height and width.

Q5. Does HTML need a compiler?

Ans:

In general, HTML, CSS, and JavaScript have interpreted languages or browser interpreted technologies whereas C, C++, asp.net, PHP are not interpreted languages and they require a compiler which will convert their code into machine language. So HTML doesn’t need a compiler and it is called as a front-end language.

Q6. What is the difference between window and document?

Ans:

JavaScript uses a global object and everything runs under it which is called a window and global object which holds global variables, global functions, history and location under it. Along with it, Ajax, setTimeout, console and local storage are also under the window.

  • A document is also under the window as it is a property of the window object. The document represents the DOM which is represented in object-oriented representation for the HTML markup which the user has written and can get elements by getElementById, addEventListener on the document.

Q7. What is the difference between reset.css and normalize CSS?

Ans:

The difference between reset.css and normalize CSS is that reset.css removes all the built-in browser styling capabilities like margin, padding, and border. Whereas normalize CSS provides a book like an appearance which includes bold family to represent characters, a border between two paragraphs and common font-family for an entire page or the document.

Q8. What is web accessibility?

Ans:

Web accessibility is defined as providing access to the website for differently abled or disabled people. Recently HTML5 introduced WAI-ARIA using which even differently abled and disabled people are able to use the web, navigate, understand and interact with it.

Q9. What is JavaScript hoisting?

Ans:

This is the most asked UI Developer Interview Questions in an interview. In JavaScript, we need to declare the variables then only we are able to access the variables. If a variable is defined at the bottom of the script but called before then JavaScript throws variable is undefined. In JavaScript only assigned variables are hoisted like string, numbers etc. undefined variables and functions are not hoisted as they need to define before calling.

Q10. Explain what is event bubbling and event capturing?

Ans:

Event propagation is the order of events that fire on the element. Bubbling is when an event is fired on the element then bubbles up the DOM tree i.e. child will call first and then parent node will call whereas capturing is opposite to the bubbling where parent node is called first and then child node.

Q11. What exactly is the role of a UI developer?

Ans:

The best way to answer this is to define what a user interface is. UI is every detail that users can control or interact with (keyboard, mouse, touchscreen, other controllers, etc.) across different devices such as smartphones, desktop computers, laptops, tablets, and other mobile technology. The UI developer’s role is to create the best, most convenient interface that meets the users’ needs, such as ease of use, accessibility, and aesthetics.

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

Ans:

Although these disciplines often overlap, a UI developer is responsible for designing the visual, interactive elements, something that helps users navigate their way through the product. A user experience (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.

Q13. What’s the difference between a UI developer and a front-end developer?

Ans:

Front-end developers create the client-side of a web interface, making sure it functions properly, such as making sure all of the website’s elements work. The UI developer makes everything on the site user-friendly and looks good.

Q14. 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—though it’s not mandatory-Photoshop.

Q15. Name three ways to reduce a page’s load time?

Ans:

Eliminate unnecessary widgets, minimize redirects, and reduce image sizes.

Q16. What is HTML?

Ans:

HTML is the most popular language for creating websites, as well as any elements viewed in a web browser. It stands for HyperText Markup Language.

Q17. What is Semantic Markup?

Ans:  

Semantic markup: it’s a HTML that uses tags to embody what the text is trying to convey. In other words, it brings meaning and a presentation to a webpage.

Q18. Name at least three position property attributes?

Ans:

Property attributes include absolute, fixed, inherit, relative, and static.

Q19. Explain the difference between the <b> and <strong> tags?

Ans:

The <b> tag is a presentational element that only displays text in bold, while <strong> also assigns substantial importance to the text regarding search results.

Q20. Explain web accessibility?

Ans:

Web accessibility provides website access for differently-abled and disabled persons so that they can easily understand, navigate, and interact with the web.

    Subscribe For Free Demo

    Q21.Difference between UI and UX?

    Ans:

    UI means USER Interface and UX means User Experience. UI Is mainly related to look and feel, colors, layout. But UX is related to how UI is used, i.e. usability, wire-framing, interaction with UI.

    Q22.How to test website performance.?

    Ans:

    Website performance plays a major role. As per Google Lighthouse and Think With Google, the performance of a website is excellent if its loading time is under 5 seconds. A website is fair if the loading time is 5 to 8 seconds. But a website is poor if the loading time is more than 8 seconds.

    Q23.What is the difference between XHTML, HTML4 and HTML5?

    Ans:

    XHTML was the cleaner and stricter version of HTML4. Whereas HTML5 is the latest Web Standard with CSS & JavaScript. HTML5 is the latest version of HTML with semantic elements, audio video, forms, APIs and CSS3.

    Q24.Does HTML need a Interpreter?

    Ans:

    HTML, CSS and JS are browser interpreted technologies. Whereas Asp.net, Java and PHP are not interpreted or compiled. They need a compiler or interpreter which can convert their code into machine language. That’s why HTML, CSS and JavaScript are also called front-end technologies.

    Q25. What are Semantic tags in HTML?

    Ans:

    HTML5 introduced semantic tags like 

    • header
    • nav
    • article
    • section
    • aside
    • footer
    • figcaption

    These tags convey the containing content. Whereas in html4, the div tag was used to create partitions using descriptive classes. Semantic Elements results better in search results.

    Q26.Which is the best HTML debugging tool?

    Ans:

    We use Chrome, Firefox and Firebug (included in Firefox now) Dev tools as they are browser-inbuilt. But W3C Validation is the best HTML/CSS Debugging tool to validate.

    Q27.How to use HTML5 New tags in IE8 and lesser?

    Ans:

    HTML5 semantic tags like, header, nav, article,section, aside, footer and figcaption are not supported in HTML4 based browsers like IE8 and lesser. We can use html5shiv.js to run these elements in older browsers.

    Q28. Describe web accessibility?

    Ans:

    • Web accessibility means a web for differently abled or disabled people. 
    • HTML5 introduced WAI ARIA so that even disable people can interact, understand and navigate a website.

    Q29.Difference between <b> and <strong> tag?

    Ans:

    <b> is a presentational element used to give a bolder look to text. Whereas <strong> gives a bolder look and strong importance in search results.

    Q30.Difference between <i> and <em> tag?

    Ans:

    <i> is a presentational element used to give italic look to text. Whereas <em> gives italic look and emphasis in search results.

    Course Curriculum

    Get On-Demand TOP UI Developer Training with Instructor-led Classes

    • Instructor-led Sessions
    • Real-life Case Studies
    • Assignments
    Explore Curriculum

    Q31.Difference between <article> and <section> tag?

    Ans:

    • Article and section are both Semantic elements in HTML5. Article is used for independent content with heading, like Blog post, review, etc.
    • Section is used for the generic section of a page.

    Q32.Differentiate between reset.css and normalize css?

    Ans:

    • reset.css removes all built-in browsers styling like, margin, padding and border.
    • But normalize.css gives a common book appearance, like bold heading, margin between two paragraphs, common font-family, etc.

    Q33.Difference between display none and visibility hidden ?

    Ans:

    • Visibility:hidden and hides the content from the user but retains space.
    • Whereas Display:none hides the content and removes space.

    Q34.How to center align a div tag in css?

    Ans:

    Div is a block level element. By default, div occupies 100% width of the parent element. To center align a div in css, use

    • <style>
    •  .wrap{ 
    •      width:960px;
    •      margin:auto;
    •  }
    •  </style>
    •  <div class=”wrap”<
    •      // content for wrap div
    •  </div>

    Q35.Difference between Position Relative, Absolute and Fixed?

    Ans:

    Position relative can move an element with respect to its current position. Position absolute can move an element with respect to its current position or parent element’s position. Absolute Elements doesn’t occupy space in DOM Flow. Position fixed gives fixed position to an element with respect to the device screen. These elements don’t move on scrolling. Fixed Elements also doesn’t occupy space in DOM Flow.
    See More CSS Positions

    Q36. What is Hoisting?

    Ans:

    Hoisting is a mechanism where assigned variables and function declarations get moved or “hoisted” to the top of their scope before executing code. Therefore, no matter where functions and variables are declared, they get moved to the top of their range regardless of whether their scope is local or global.

    Q37. What’s the difference between HTML and XHTML?

    Ans:

    Although both languages create web pages, HTML is a hypertext markup language, whereas XHTML is an extensible hypertext markup language. XHTML is XML based, while HTML is SGML based. XHTML is strict compared to HTML and doesn’t allow users to get away with any coding or structure lapses.

    Q38. Explain the differences between local storage, session storage, and cookies?

    Ans:

    These can be explained as follows:   

    • Local storage allows data storage with no expiration date and offers the most substantial maximum storage limit.
    • Session storage stores the data associated with a session. When the user closes the tab or browser, the data disappears.
    • Cookies are reserved mostly for server-side reading, storing data sent back to the server. The data size must be less than 4KB.

    Q39. Discuss the differences between a document and a window?

    Ans:

    A window object has properties such as inner width, inner height, length, whether it was previously closed, its parent, and its name. The window is the first thing loaded into the browser.  The document object is defined as any document that gets loaded inside the window object, such as HTML, ASPX, or PHP, and has properties such as cookies, title, and URL, to name a few.

    Q40. Does HTML require a compiler?

    Ans:

    Since it’s a front-end language, HTML doesn’t need a compiler. However, languages such as C, C+, and Java require a compiler to convert the code into a language that a machine can comprehend.

    Q41.What is an AJAX request and give a simple example of where an AJAX request would be used?

    Ans:

    AJAX is Asynchronous JavaScript and XML. It is a client side process written in Javascript used to get or post data from a remote server without reloading page JavaScript AJAX .

    Q42.What is Variable Hoisting?

    Ans:

    A variable is declared first and then called. If a variable is declared on bottom and called earlier, value will be undefined. Only assigned values are hoisted in Javascript, like string, numbers etc. Undefined and function declaration can be called before declaration as they are not hoisted, and there is no assignment operator (=) in both. JavaScript Variables

    Q43. What is Callback Function?

    Ans:

    A function that is passed as argument to another function is called a callback function in javascript. JavaScript Callback Functions.

    Q44.What is closure in javascript?

    Ans:

    A var variable declared inside a function, i.e. local variable can also be accessed inside a child function. This technique in javascript is called closures. 

    Q45. How do floats work?

    Ans:

    Floats push the element to the left or right. The float property can have one of four values:

    • Inherited: The element inherits the parent’s float value
    • None: This is the default value; the element doesn’t float
    • Left: The element floats to the container’s left
    • Right: The element floats to the container’s right

    Q46. Name at least three plugins available in the Bootstrap jQuery plugin library?

    Ans:

    Answers include:

    • Alert
    • Affix
    • Button
    • Carousel
    • Collapse
    • Dropdown
    • Modal
    • Popover
    • Scrollspy
    • Tab
    • Tooltip

    Q47. Using the latest version of Bootstrap, what CSS class do you employ to span 14 columns on medium-sized screens, and eight columns on large screens?

    Ans:

    class=”col-md-14 col-lg-8”

    Q48. How do you verify whether or not a variable is set In PHP?

    Ans:

    Use this command: !isset($var);

    Q49. When you encounter an error, what’s the difference between require() and include()?

    Ans:

    The command includes () raises a warning if it fails while requiring () raises a fatal error.

    Q50. What is a CSS reset, and how does it differ from normalize.css?

    Ans:

    • Reset.css eliminates all browser default styles, such as margin, padding, and border.
    • Normalize.css sets a standard book-like appearance (e.g., bold headings, margins between two paragraphs, common font) across all browsers. However, it doesn’t reset them.
    Course Curriculum

    Best Hands-on Advanced TOP UI Developer Certification Course

    Weekday / Weekend BatchesSee Batch Details

    Q51. How do you use HTML5 new tags in IE version eight and earlier?

    Ans:

    That’s a trick question, because HTML5 semantic tags like the article, figcaption, footer, header, nav, and section, are not supported by HTML4-based browsers, and that includes IE8. However, you can use html5shiv.js to run these elements in the older browsers.

    Q51.Who is a UI/UX Developer? What does he do?

    Ans:

    UI/UX – User Interface/ User Experience, and developer has to work for better User Interaction with functionality. Focus is to provide a better interface for a user by front end coding.

    Q52.What Skills are required to become a UI Developer?

    Ans:

    Human Computer Interaction, HTML and CSS along with Photoshop and Graphic Designing are the minimal skills expected from a UI Developer, and AngularJS, SEO(Search Engine Optimization) would be preferred.

    Q53.What Is Semantic Html that uses markup?

    Ans:

    HTML using markup that also conveys the containing content. HTML5 has more semantic tags than prior versions (nav | aside | article | header | footer), but using descriptive classes and id’s could also be an example of semantic markup.

    Q54.How to call an external style sheet and an external script located in the root folder called style.css and main.js with HTML?

    Ans:

    •  <script src=”main.js”></script>
    •  <link href=”style.css” rel=”stylesheet”></link>

    Name 4 New Elements In Html5 That Were Not Available In Previous Html Versions.

    canvas | audio | svg | header | footer | aside | article | nav | section etc…

    Name 3 Attributes Of The Position Property.

    static, absolute, fixed, relative, inherit.

    Name Some Online Resources You Reference When Having Css Issues.

    Mozilla, Stack Overflow, CSS-Tricks . . .

    Q55.How Would You Solve A Floated Divs Parent Height?

    Ans:

    Clearfix, Float Parent as well, User overflow property other than ‘visible’.

    Declare All Elements With Class Of “blue-text” To Have A Text Color Of Blue.

    • blue-text {color: blue;}

    Q56.How Do You Include A Comment In Css?

    /* This is a Comment */

    Is Javascript Case Sensitive?

    Ans:

    Yes

    Q57.What Are 2 (shorthand) Boolean Operators Supported By Javascript?

    Ans:

    or ||, and &&, not equal to !

    Q58.What Is The Difference Between “==” And “===”?

    Ans:

    “==” checks equality, “===” checks equality and type

    Q59.What Is The Result Of “20” + 20?

    Ans:

    2020

    Q60.What Javascript Method Would Convert The String “20” To An Integer (on The Fly) So “20” + 20 = 40?

    Ans:

    parseInt(“20″) + 20;

    Q61. Can you describe your normal design process?

    Ans:

    This is a multifaceted question, and your answer may help the interviewer evaluate your ability to fit on any established web design team. Your design process might differ from other UI designers, but the interviewer might want to know if your processes are like the company’s processes in a meaningful way. When you answer this question, you should be honest about what makes your design process unique but also show that you are also capable of and willing to follow standard processes.

    Q62. Describe a normal working day for a UI designer?

    Ans:

    If your interviewer poses this question to you, they may want to know more about how you can work with a team. Think about what you normally do each day as a UI designer, such as what your daily tasks are, how you finish temporary tasks and how you correspond to teammates, supervisors and clients.

    Q63. If my website was slow, how would you diagnose the problem and fix it?

    Ans:

    “I would inspect various factors on your website. One thing I would do is use a link analysis tool to see if there are any dead links on the website. I would also check the coding on various pages of the site. One solution to the latter problem is to link similar pages to one CSS sheet and simplify the coding.

    Q64. What do you like the most about UI design?

    Ans:

    “You may hear this often, but my favorite part of UI design is when a system I have worked on is finally in the hands of users. I like to see how users interact with the websites and applications and to know that my hard work has made life easier for them in some way. Now, if a user experiences a problem with the system or website I worked on, that might mean that I have made a mistake. However, I relish the opportunity to take in user feedback and improve the system or website.”

    Q65. How do you deal with negative user feedback?

    Ans:

    “One time, I worked on a free smartphone game app that required users to tap the screen with precise timing, but three out of five users left comments saying that the app was unresponsive for them. Most of them left a rating of one or two stars.

    Q66. Can you describe any other projects you have worked on?

    Ans: 

    “I was once on a four-person team whose job was to overhaul the website of an accomplished author and motivational speaker. The website had a lot of broken links, much of the text and assets were relegated to tables, there was a lot of colorful text and the site navigation was not intuitive. I worked with a writer, a graphic designer and an IT person to improve over 150 pages of content.

    Q67. Can you describe a time where you had difficulties while working on a team?

    Ans:

    “I once worked on a remote four-person team for a software startup. One of the challenges of working with the team was figuring out how to communicate despite different time zones. To get around this problem, we used conferencing software and scheduled one-on-one meetings.

    Q68. What are the Skillsets that is required to become a UI Developer?

    Ans: 

    Following skillsets are essential to become a UI Developer

    • CSS
    • HTML
    • Photoshop
    • Graphic Design
    • User Testing
    • HCI
    • Creating mock-ups in the Adobe Suite Additional Skills required
    • AngularJS
    • SEO
    • User Research
    • Usability and Analytics
    • Visual Design and Content Strategy

    Q69. Explain how you can add text in the final cut pro?

    Ans: 

    • In the time-line, double click, in order to display it in the Viewer window at the top. At the lower end of the viewer, tap on the icon with big letter A, which indicates the text button
    • In the viewer window “Text” will appear in the viewer window. Tap the controls tab to open the text editing window
    • Type your text into the text box
    • Use the options or tools, given below the text box to change the font, size, style and color
    • To add your text into the Timeline, under Viewer, click on the video tab, then drag and drop the text into the time frame where you wanted it to appear

    Q70. Explain what is the use of SmoothCam Filter and how it works?

    Ans:

    The SmoothCam filter in Final Cut Pro is to analyze a clip’s complete media file before the effect can be played or rendered in real time.  SmoothCam filter requires two independent phases:

    • Motion Analysis: Pixels are analyzed in successive frames to determine the direction of camera movement. It stored the analysis data on disk
    • Motion Compensation: During rendering or real time playback, the SmoothCam filter avails the motion analysis data to implement a “four-corner” transformation to each frame.
    Coded UI Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

    Q71.How Do You Include A Comment In Javascript?

    Ans:

     /* This is a comment block */

    //This is a commented out line

    Loop Through The Color Array And Print Each Value To The Console. Assume You Do Not Know The Amount Of Colors In The Color Array.

    • var colors = [‘red, ‘yellow’, ‘green’, ‘blue’];
    • for( var i = 0; i < colors.length; i++ )
    • {
    • console.log(colors[i]);
    • }

    Q72.What Is Jquery?

    Ans: 

    A JavaScript Framework/Library that make things like DOM selection/manipulation, AJAX, and animation, easier.

    Q73.What Programming Language Does Jquery Use?

    Ans: 

    JavaScript

    Q74.Is Jquery Code Executed On The Clientside, Or Server Side?

    Ans: 

    Client Side

    Q75.How Do You Install/Use Jquery In A Project. What Is The Minimum Setup Needed To Start Using Jquery?

    Ans: 

    script tag, linked to a jquery CDN or locally hosted file.

    Q76.How Do You Select All Elements With The Class Of “selected” In Jquery?

    Ans:

    $(‘.selected’);

    Q77.Can Jquery Be Used To Make An Ajax Request?

    Ans: 

    Yes

    Declare A New Variable In Php Equal To The Number 3;

    $number = 3;

    Q78.How Do You Check If A Variable Has Been Set In Php?

    Ans: 

    isset($var);

    Q79.How Do You Access A Get Requests Url Parameter With Php?

    Ans:

     $_GET[“url key”]

    Q80.How Do You Check If A Variable Has Not Been Set In Php?

    Ans: 

    !isset($var);

    Q81. What is Coercion in JavaScript? What is Coercion in JavaScript?

    Ans: 

    In JavaScript conversion between different two built-in types called coercion. Coercion comes in two forms in JavaScript: explicit and implicit.

    Q82. Explain meta tags in HTML Explain meta tags in HTML

    Ans: 

    • Meta tags always go inside head tag of the HTML page
    • Meta tags is always passed as name/value pairs
    • Meta tags are not displayed on the page but intended for the browser
    • Meta tags can contain information about character encoding, description, title of the document etc,

    Q83. What is Scope in JavaScript? What is Scope in JavaScript?

    Ans: 

    In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function’s scoped variables.

    Q84. Name 3 Of The Minimum Html Elements Needed For An Html Document?

    Ans: 

    !DOCTYPE html | html | body | head | (title kind-of)

    Q85. If You Have An Issue With Your Page, How Do You Debug It, What Tools Do You Use?

    Ans: 

    Looking for common debugging practices like W3c validator, Firebug, Chrome Dev Tools.

    Q86. Name 4 New Elements In Html5 That Were Not Available In Previous Html Versions?

    Ans: 

    canvas | audio | svg | header | footer | aside | article | nav | section etc…

    Q87. Name Some Online Resources You Reference When Having Css Issues?

    Ans: 

    Mozilla, Stack Overflow, CSS-Tricks . . .

    Q88. Declare All Elements With Class Of “blue-text” To Have A Text Color Of Blue?

    Ans: 

    • blue-text {color: blue;}

    Q89. What Is The Current Major Version Of Bootstrap?

    Ans: 

    3.x.x

    Q90.What Is The Difference Between Require() And Include() When An Error Is Encountered?

    Ans:

    include() will raise a warning if it fails, require() will raise a fatal error.

    Q91.What Is A Simple Php Method To Make A Cross Domain Data Request?

    Ans:

    • file_get_contents().

    Q92.Inside A Php Function, What Param Needs To Be Set In Order To Access A Global Variable?

    Ans:  

    • function function_name(){
    • global $the_global_var;
    • }

    Q93.What is WAI ARIA web accessibility?

    Ans: 

    Web accessibility means a web for differently abled or disabled people. HTML5 introduced WAI ARIA so that even disable people can interact, understand and navigate a website.

    Q94. What Css Class Do You Use To Span 12 Columns On Medium Sized Screens But Only 6 Columns On Large Screens In The Latest Version Of Bootstrap?

    Ans: 

    • class=”col-md-6 col-lg-12″

    Are you looking training with Right Jobs?

    Contact Us
    Get Training Quote for Free