UI Developer Interview Questions with answers for UI Developers , Web Designers , Frontend Developers and Web Developers with HTML5 , CSS3 , JavaScript , JS ES6 and JQuery Interview Questions. These interview questions are based on recent interviews conducted by our candidates in Delhi NCR, or sourced from Linkedin, Stack overflow, Github and Glassdoor.

Who is UI Developer?

UI Developer or Frontend Developer is the person who build User Interface or Front End of a website. To build User Interface of a website , a UI Developer must know HTML, CSS and JavaScript used to build Front End of a website. Frontend Developer is one of the fastest growing job profile in IT Sector.

UI Developers are among the top highest paid in IT Sector. An experienced frontend developer can earn upto $1,25,000 PM.

Source - Forbes Survey, 2016

UI Interview Questions

UI developer interview questions with answers. If you are looking for latest UI Interview questions with answers, you are at right place. Here are some commonly asked UI Developer Interview Questions with answers.

what is difference between UI and UX

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

Design of button is UI, but interaction with button is UX.

How to test website performance.

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

website speed test and performance
website speed test

Use Chrome Lighthouse, a build in tool in chrome, edge chromium and chromium browser to test website speed, performance, usability and SEO of website.


HTML Interview Questions

What is the difference between XHTML, HTML4 and HTML5?

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.

Does HTML needs compiler?

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.

What is Semantic HTML?

HTML5 introduced semantic tags like header, nav, article, section, aside, footer and figcaption. These tags convey the containing content. Whereas in html4, div tag was used to create partitions using descriptive classes. Semantic Elements results better in search results and social media crawling.

Which is best HTML debugging tool.

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

How to use HTML5 New tags in IE8 and lesser.

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.
→ See More html5 tags in IE8

What is web accessibility?

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.

Difference between <b> and <strong> tag?

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

Difference between <i> and <em> tag?

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

Difference between <article> and <section> tag?

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 generic section of a page.

CSS Interview Questions

Difference between reset.css and normalize css?

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

What is CSS Box Model?

CSS Box Model includes content , margin , padding , and border . Total border-box width is equal to width + padding + border. These properties occupies space on css box model.
→ See More CSS Box Model

How to check coding errors in css?

Open your webpage in Firefox. Press Ctrl + shift + j. You will see all security, javascript and css related issues. You can also use W3C validator for HTML and CSS related issues. Even W3C validation can check css errors now.

Difference between display none and visibility hidden ?

Visibility:hidden hide the content from user but retain space. Whereas Display:none hide the content and remove space.

How to center align a div tag in css?

Div is block level element. By default, div occupy 100% width of 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>

How to vertically align a div in css?

To align div in vertical center , use display:table-cell with vertical-align:middle. Make sure the height of div is more than content and display of parent div is table.


<style>
 .box{ 
     width:400px;
     height:200px;
     display:table;
     vertical-align:middle;
 }
 .box p{
    display:table-cell; 
 }
 </style>
 <div class="box"<
    <p>vertical center text</p>
 </div>

Difference between Position Relative, Absolute and Fixed

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 elements position. Absolute Elements doesn't occupy space in DOM Flow. Position fixed gives fixed position to an element with respect to device screen. These elements doesn't move on scrolling. Fixed Elements also doesn't occupy space in DOM Flow.
See More CSS Positions


JavaScript Interview Questions

JavaScript Interview Questions for web developer, UI Developers, Frondend Developers and Web Designers.

What is JavaScript

JavaScript is prototype based scripting language of web. JS is also known as the programming language of web. JavaScript was primarily build for web browser only. But now, JavaScript is also used outside a web browser using Node JS.

Is JavaScript Case Sensitive?

Yes, JavaScript is case-sensitive. But HTML and CSS are not.

What is difference between == and === operator?

== is comparison operator , whereas === is Strict equality. == checks value only, === check value and datatype. For exp

        5=="5"     // true, 
        5==="5"    // false.
    
        1==true     // true, 
        1===true    // false.
    
        undefined==null     // true, 
        undefined===null     // false.
    

What is output of "20" + 20?

"2020". First 20 is string type, second is numeric, for addition, both should be numeric type.

What is output of "20" + 20 + 20 and "20" + ( 20 + 20)?

"20" + 20 + 20 = "202020" but "20" + ( 20 + 20) is "2040".

How to convert "20" to number?

Three ways to convert string into number


    var x="20";
    Number(x)       //  20 
    parseInt(x)     //  20
    parseFloat(x)   //  20
        

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

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

What is Variable Hoisting?

A variable is declared first and then called. If 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

Callback Function

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

What is closure in javascript

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


function outer(){
    var i=2;            // for both outer and inner functions
    
    function inner(){
        var j=3;        // for inner function only
        var k=i+j;
        console.log(k);        // 5
    }
}

Event bubbling and Event Capturing.

Event Propagation are the order that event fire on element. Bubbling is when an event fire on the element and then bubble up DOM Tree. Means First child and then parent will call. Capturing is exactly opposite. First parent node is called and then propagates down towards target element. Event Bubbling Vs capturing


Jquery Interview Questions

Use of Jquery ready function.

Jquery recommends use of $(document).ready(function(){ }) or $(function(){ }) in script tag to write jquery syntax. Jquery ready function execute Jquery functions after all html elements are loaded, before images, iframes, ads are loaded.


$(document).ready(function(){
    // jquery code
});
            

Jquery Ready Functions Short Form


$(function(){
    // jquery code
});
            

Difference between Jquery ready function and window onload.

window.onload is a javascript function whereas $(document).ready is a Jquery function. Jquery ready function loads content slightly faster than javascript window.onload function. window.onload wait for all DOM contents including media to load first and then executed, whereas Jquery ready function wait for only html elements, not media, thus load fast.

Various Jquery versions.

Jquery 1 was the first stable release of Jquery. Many websites still use Jquery 1 as Jquery 1 supports all major browsers, including IE 8, 7 and 6.

Jquery Versions and difference
Version Release Size Browser Support Description
1.0 Aug 2006 IE 6 and above First Stable Version
1.12 Jan 2018 95 kb IE 6 and above Latest Stable Version
2 Apr 2013 81 kb IE 9 and above 10% lighter than Jquery 1, no support in IE 8 and below.
3 June 2016 86 kb IE 8 and above Latest Stable Version with HTML5 Support
For IE 8 and above, use Jquery 1 , the latest stable version of Jquery 1 is Jquery 1.12.4 .