UI Developer Interview Questions

ui developer Interview Questions

Q. How do you optimize a website’s assets?

File concatenation, file compression, CDN Hosting, offloading assets, re-organizing and refining code, etc. Have a few ready.

Q. What are three ways to reduce page load time?

Reduce image sizes, remove unnecessary widgets, HTTP compression, put CSS at the top and script references at the bottom or in external files, reduce lookups, minimize redirects, caching, etc.

Q. What kind of things must you be wary of when design or developing for multilingual sites?

setting the default language, using Unicode encoding, using the ‘lang’ attribute, being aware of standard font sizes and text direction, and language word length (may affect layout).

Q. What is HTML?

HTML stands for HyperText Markup Language. It is the dominant markup language for creating websites and anything that can be viewed in a web browser. If you want to get some extra bonus points, you can learn the history of HTML and throw in some obscure facts.

Q. What is the difference between HTML elements and tags?

HTML elements communicate to the browser how to render text. When surrounded by angular brackets <> they form HTML tags. For the most part, tags come in pairs and surround text.

Q. What is “Semantic HTML?”

Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like <b></b> for bold, and <i></i> for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure. The semantically correct thing to do is use <strong></strong> and <em></em>. These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).

Q. What does DOCTYPE mean?

The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode.

Q. What’s the difference between standards mode and quirks mode?

Quirks Mode is a default compatibility mode and may be different from browser to browser, which may result to a lack of consistency in appearance from browser to browser.

Q. What are the limitations when serving XHTML pages?

Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be.

Q. How many HTML tags are should be used for the most simple of web pages?

8 total. 4 pairs of tags.



<TITLE>Simplest page ever!</TITLE>



Doesn’t get simpler than this.



Q. How do you make comments without text being picked up by the browser?

Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with “*<!–” and end with ” –>“.

<!– Insert  comment here. –>

Q. What is the difference between linking to an image, a website, and an email address?

To link an image, use <img> tags. You need specify the image in quotes using the source attribute, src in the opening tag. For hyperlinking, the anchor tag, <a>, is used and the link is specified in the href attribute. Text to be hyperlinked should be placed between the anchor tags. Little known fact: href stands for “hypertext reference.” When linking to an email, the href specification will be “mailto:send@here.com.” See examples below:

<img src=”HTMLrocks.jpg”></img>

<a href=”skilprelaunch2.wpengine.com”>Skilledup</a>

<a href=”brad@skilledup.com”>Email Me</a>

Q. My hyperlink or image is not displaying correctly, what is wrong with it?

It could be any number of things, but the most common mistakes are leaving out a tag bracket or quote missing for href, src, or alt text may be the issue. You should also verify the link itself.

Q. What is the syntax difference between a bulleted list and numbered list?

Bulleted lists use the <ul> tag, which stands for “unordered,” whereas <ol> is used to create an ordered list.

Q. What is the difference between <div>and <frame>?

<div> is a generic container element for grouping and styling, whereas a<frame> creates divisions within a web page and should be used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding foreign elements (ie. Youtube videos) into a page.

Q. What is the difference between the application model of HTML and HTML5?

Trick question, there is no difference. HTML5 is a continuum of HTML and just a souped up version of the original HTML. There has been no major paradigm shift.

Q. What’s the real difference between HTML and HTML5?

There are many. From a broader perspective, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can be viewed as an application development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics. It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols. Thus, proprietary plug-in technologies like Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX are no longer needed, because browsers can now process these elements without additional requirements.

Q. What is the new DOCTYPE?

Instead of typing out a ridiculously long DOCTYPE statement to tell the browser how to render your webpage, this long line of code has been truncated to <!doctype html>.

Q. What are some new HTML5 markup elements?

There are several: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>, and <wpr>.

Q. What elements have disappeared?

As mentioned above, <frame> and <frameset> have been eliminated. Other elements that are no longer supported include: <noframe>, <applet>, <bigcenter> and<basefront>.

Q. What are the new media-related elements in HTML5?

HTML5 has strong support for media. There are now special <audio> and <video> tags. There are additional A/V support tags as well: <embed> is a container for 3rd party applications. <track> is for adding text tracks to media. <source> is useful for A/V media from multiple sources.

Q. What are the new image elements in HTML5?

Canvas and WebGL. <Canvas> is a new element that acts as a container for graphical elements like images and graphics. Coupled with JavaScript, it supports 2D graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for generating 3D graphics in web browsers.

Q. What is the difference between SVG and <Canvas>?

<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.

Q. What are some new input attributes in HTML5?

There are many new form elements including: datalist, datetime, output, keygen, date, month, week, time, number, range, email, and url.

Q. What are data-attributes good for?

The HTML5 data- attribute is a new addition that assigns custom data to an element. It was built to store sensitive or private data that is exclusive to a page or application, for which there are no other matching attributes or elements.

Q. What is the difference between HTML5 interaction in Sencha and Twitter/Bootstrap?

Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5, CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all comingled together in code, whereas in Bootstrap, HTML and CSS and decoupled.

Q. What purpose do Work Workers serve and what are some of their benefits?

Web Workers are background scripts that do not interfere with the user interface or user interactions on a webpage, allowing HTML to render uninterrupted while JavaScript works in the background.

Q. Describe the difference between cookies, sessionStorage, and localStorage.

Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.

Q. What are some of the major new API’s that come standard with HTML5?

To name a few: Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API, Command API, Constraint Validation API, and the History API.

Q. What is the difference in caching between HTML5 and the old HTML?

An important feature of HTML5 is the Application Cache. It creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. It is a feature that speeds up site performance.

Q. What are css3 modules?

CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Q. wrap in css3?

The word-wrap property allows long words to be able to be broken and wrap onto the next line.





eg: <p>thisisaveryveryveryveryveryverylongword</p>

Q. white space in css3?

white-space property specifies how white-space inside an element is handled.





Eg: <p>

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.


Q. track ?

The <track> tag specifies text tracks for media elements (<audio> and <video>).
This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

<video width=”320″ height=”240″ controls>
  <source src=”forrest_gump.mp4″ type=”video/mp4″>
  <source src=”forrest_gump.ogg” type=”video/ogg”>
  <track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en”
  <track src=”subtitles_no.vtt” kind=”subtitles” srclang=”no”

Q. Explain .bind() vs .live() vs .delegate() vs .on()

All these 4 jQuery methods are used for attaching events to selectors or elements. But they all are different from each other.

.bind(): This is the easiest and quick method to bind events. But the issue with bind() is that it doesn’t work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.

.live(): This method overcomes the disadvantage of bind(). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Chaining is not properly supported using this method.

.delegate(): The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored and it also supports chaining.

.on(): Since live was deprecated with 1.7, so new method was introduced named “.on()”. This method provides all the goodness of previous 3 methods and it brings uniformity for attaching event handlers.

Q. Media elements other then audio and video?

<audio>  For multimedia content, sounds, music or other audio streams
<video>  For video content, such as a movie clip or other video streams
<source>  For media resources for media elements, defined inside video or audio
For embedded content, such as a plug-in
<track> For text tracks used in mediaplayers

Q. canvas?

The <canvas> element is used to draw graphics, on the fly, on a web page.

Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:

Q: .holdready()?

using jQuery.holdReady() function we can hold or release the execution of jQuery’s ready event.

  • This method should be call before we run ready event.
  • To delay the ready event, we have to call


  • When we want to release the ready event then we have to call


  • This function is helpful when we want to load any jQuery plugins before the execution of ready event.

For example

$.getScript(“xyzplugin.js”, function() {


Q. difference between onload() vs readyState(). ??

document.ready() function is different from body onload() function for 2 reasons.

  • We can have more than one document.ready() function in a page where we can have only one bodyonload function.
  • document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.

Q. embeded?

Embeded New Media Element in HTML5, For embedded content, such as a plug-in.

Q. deprecated elements in html5?

The following HTML 4.01 elements are removed from HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

Q. jquery data()?

Jquery .data() is used to set/return arbitrary data to/from an element.



Suppose we want to set the data for a span element:

Jquery.data(span, “item” , { val1:10, val2:”myitem”});

If we want to retrieve the data related to div element and set it to label’s data:

$(“label:val1”).text(jquery.data(div, “item”).val1);

$(“label:val2”).text(jquery.data(div, “item”).val2);

Q. what do you mean by chaining in jquery?

Chaining is very powerful feature of jquery.

Chaning  means specifying  multiple function and/or selectors to an element.




Q. list of API’s in  html5?

several APIs to drag/drop elements,

 find Geolocation,

 include web storage,

 application cache,

 web workers, etc.

Q. data types in js?

string, number, boolean, object, null, undefined.

Q. null & undefined?

  • undefined is the value of a variable with no value.
  • variables can emptied by setting the value to null

Q. What is NAN function? what is uses of it NAN?

isNaN function will check an argument and return TRUE (1) if the argument does not seem to be a number.

NaN: 0/0 not a defined thing it result NaN

NaN:not  a number.

0/0 NaN;

Infinity/-infinity: NaN;


Eg: var x = 5;

            Var  y = “b”;

            Var z = (x*y);//NaN

Q. What is the meaning of dom element? main use of it?

DOM:document object model

javascript can access all the elements of an html document

when a web page is loaded, the browser creates a documen object model of the page



Document.getElementByTagName(); etc,.

Q. What is the innerHtml?

The easiest way to modify the content of an HTML element is by using the innerHTMLproperty.

To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML=new HTML

Q. New features in html5?

canvas,svg,drag/drop,geolocartion,video,audio,input types,form elements,

form attributes,semantic,web storage,app cache,web works, sse.

Q. html5 api?

canvas,svg,drag/drop,geolocartion,video,audio,web storage.

Q. What is use of canvas?

i)<canvas> element is used to draw graphics, on the fly on web page.

via scipting (usually javascript)

ii)svg stands for scalable vector graphics

            svg is used to define vector-based graphics for the web.

            svg defines the graphics in xml format

            svg graphics do not lose any quality if they are zoomed or resized

            every element and every attribute in svg files can be animated

            svg is a w3c recommendation


            advantages of using svg over image formats (like JPEG and GIF)

            svg images can be created and edited with any text editor

             svg images can be searched, indexed, scipted, and compressed

            svg images are scalable

            svg images can be printed with high quality at any resolution

            svg imges are zoomable(and the image can be zoomed without degradation)

Q. Differences between  svg and canvas?

  • svg is a language for describing 2D graphics in xml.
  • Canvas draws 2D graphics, on the fly(with a js)
  • SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
  • In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
  • Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Q. localstorage

stores data with no expiration date. the data will not deleted when the

the browser is closed, and will be available the next day, week or year.


0 Responses on UI Developer Interview Questions"

Leave a Message

Your email address will not be published. Required fields are marked *

Copy Rights Reserved © Mindmajix.com All rights reserved. Disclaimer.