UI Developer Interview Questions

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. UI focus on coding skills like HTML, CSS and Javascript, but UX focus on interaction with UI.

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

How to test website performance.

Website performance plays 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 4 seconds. A website is fair if loading time is 3 to 5 seconds. But a website is poor if loading time is more than 8 seconds.

Even Chrome Lighthouse test available in Google Chrome, Microsoft Edge and Chromium browser is good for website performance and Usability testing.

Use Chrome Lighthouse, a built-in tool in Chrome, Edge, Chromium, and other browsers to test website speed, performance, usability, and SEO.

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 includes semantic elements, audio video, new form elements and attributes, Web APIs, CSS3 and JavaScript.

Does HTML need a compiler?

HTML, CSS and JS are frontend technologies. Whereas ASP.NET, Java and PHP are for backend. Backend technologies run on servers and need a compiler or interpreter which can convert their code into machine code. HTML and CSS are parsed and then rendered in web browsers, so they need no compilation. Compilation is only for programming languages. JavaScript is a programming language, so it needs a compiler or interpreter for code execution.

What is Semantic HTML?

HTML5 introduced semantic tags like header, nav, main, article, section, aside, footer and figure. These tags convey the containing content. Whereas in HTML4, div tags were used to create partitions using descriptive classes. Semantic elements result better in search results and social media crawling.

What is the best HTML debugging tool?

We use Chrome, Firefox and Firebug (removed from Firefox but available in Firefox Developer edition) Dev tools as they are browser-inbuilt. W3C Validation is the best HTML/CSS debugging tool to validate. Chrome Lighthouse is also recommended for UI Testing and SEO.

How to use HTML5 new tags in IE8 and older versions?

HTML5 semantic tags like header, nav, article, section, aside, footer and figcaption are not supported in HTML4-based browsers like IE8 and older. 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 disabled people. HTML5 introduced the role attribute, WAI-ARIA, subtitles so that even disabled people can read, interact and navigate a website properly.

Difference between <b> and <strong> tags?

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

Difference between <i> and <em> tags?

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

Difference between <article> and <section> tags?

Article and section are both semantic elements in HTML5.
Article is used for independent content with a heading, like blog post, review, etc.
Section is used for a generic section of a page, like sections in an article. Both article and section must include a heading or subheading.

What is Meta Viewport?

Apple introduced Meta Viewport first in Safari to adjust viewport size in iPhone Safari browser. Soon other mobile browsers started supporting the same rule. Although it's not W3C recommended, it still works on all browsers. For Responsive Web Design, meta viewport is compulsory.

Difference between reset.css and normalize.css?

reset.css removes all built-in browser styling like margin, padding, and border. But normalize.css gives a common book-like appearance, like bold headings, margin between paragraphs, screen-friendly fonts, etc.

What is CSS Box Model?

CSS Box Model includes content, margin, padding, and border. Total border-box width is equal to width of content + padding + border. These properties occupy space on the 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 hides the content from the user but retains the space. Whereas display: none hides the content and removes the space in the normal document flow.

How to center align a div tag in CSS?

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>

How to vertically align a div in CSS?

To align a div in the vertical center, use display:table-cell with vertical-align:middle. Make sure the height of the div is more than the content and the display of the 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 moves an element with respect to its current position. Position absolute moves an element with respect to its current position or parent element's position. Absolute elements don't occupy space in the DOM flow. Position fixed gives a fixed position to an element with respect to the device screen. These elements don't move on scrolling. Fixed elements also don't occupy space in the DOM flow.
See More CSS Positions

What are vendor-specific prefixes like -webkit?

Vendor-specific prefixes are used mainly with CSS3 properties to run them in all browsers. Chrome, Edge, Safari, and Firefox use the WebKit engine. But earlier Firefox used the -moz prefix, Opera used the -o prefix, and Internet Explorer supported the -ms prefix. For latest browsers, only -webkit is required now.

What is JavaScript?

JavaScript is a prototype (object-based) general-purpose programming language used in web applications and development. JS is also known as the programming language of the web. JavaScript was primarily built for web browsers 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 in case sensitive.

Is JavaScript Compiled or Interpreted?

Earlier JS engines used interpreters to execute JS code at runtime. But in 2008, Google Chrome was launched with a modern and better Just-In-Time (JIT) Compiler. In 2009, Firefox 3.6 also introduced compilation using a JIT compiler or runtime compilation to improve JS execution. Now all modern browsers use JIT compilation for faster execution of JavaScript.

What is "use strict" in JavaScript?

JavaScript introduced strict mode in ES5 2009. Strict Mode is recommended for detecting logical errors earlier. Here are the things which are not allowed in strict mode.

<script>
    "use strict";
    let x=010;                  // octal notation not allowed
    y=010;                     // no variable declaration

</script>

What is the difference between == and === operators?

== is a comparison operator, whereas === is strict equality. == checks value only, === checks value and data type. For example:

        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

    let x="20";
    x=+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 or fetch .

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. Callback functions are among High Order Functions. 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 x=2;            // for both outer and inner functions
    
    function inner(){
        var y=3;        // for inner function only
        var z=x+y;
        return z;        // 5
    }
}

Event Delegation, Bubbling and Capturing Events.

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

What is Block Scope?

let and const are block scoped in javascript. A curly brackets is a block used in if, for, while etc. let and const can be used only inside block, unlike var (global scope). See more, JavaScript variables

What are Arrow Functions?

Arrow functions are function declaration in es6 but instead of using function keyword, we use ()={}. They are mainly used as callbacks to write better code. Also this keyword is not current object in arrow functions.

    let a=(x,y)=>{return x*y} ;
    let b=x=>2*x;
    [1,3,9,12].sort((a,b)=>a-b);

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, iframe, 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.

For IE 8 and below, use Jquery 1 , the latest stable version of Jquery 1 is Jquery 1.12.4 .