UI Developer Interview Questions and Answers: Top 60 Tricky Questions

    UI Developer Interview Questions and Answers

    UI Developer Interview Questions and Answers

    What are the technical and additional skills that are needed to be a UI developer?

     UI (UI stands for User Interface )  developer  should be creative  and as well as good technical knowledge about :

    • HTML
    • CSS
    • JQuery
    • JavaScript
    • CSS preprocessor like Sass, LESS, or Stylus

    UI developer should  also know some UI design tool:

    Wireframing

    • Balsamiq
    • Axure

    UI design and prototyping

    • Sketch
    • Proto.io
    • InVision Studio

    Adobe Creative Suite

    • Photoshop
    • Illustrator

    Please tell some online resources name that you reference when having User Interface (UI) issues.

    Stackoverflow.com

    Css-tricks.com

     

    HTML for UI Developer Interview Questions

    What is HTML ?

    HTML stands  for Hypertext Markup Language . It is used to create and display content on the web page. We can also  create static website using HTML

    What is The readonlyAttribute ?

     The readonly attribute defines that the input field can not be changed.

    <input type="text" name="Username" value="Rock" readonly>:

    What is the difference between <sub>  and<sup> elements.

     You can define the HTML  <sub> element and  HTML  <sup> element .  Text will be down in HTML  <sub> element  and  Text will be up in HTML  <sup> element.

    Example :

    This is subscripted text.

    This is superscripted text.

    HTML5

     What is HTML5 ?

     HTML5 is updated version of  Hypertext Markup Language(HTML).Some new tags are added in HTML5 like <audio>, <video>, <svg> and <canvas> etc.

    What is a doctype ?

     <!DOCTYPE html>  Top HTML5 page before the <html> tag. In HTML5  <!DOCTYPE html> means “this html page is written in HTML5” This code indication about HTML5  version: <!DOCTYPE html> = “HTML5”.

    What is charset=”UTF-8″ ?

     UTF means Unicode Transformation Format .

    Is HTML5 Tags case-sensitivity ?

     No, HTML5 tags are not case sensitive. We can write uppercase or lowercase alphabets but recommended HTML5 standard is lowercase.

    What is use  SVG in HTML5?

     SVG mean for Scalable Vector Graphics and SVG is a language and it is used in creating graphical applications.

    SVG is used for drawing the  graphic images, circles, paths, text, and boxes .

    <svg> Element is used for SVG graphics.

    Example :

    <!DOCTYPE html>
    <html>
    	<body>
    		<svg width="400" height="400">
    			<circle cx="100" cy="100" r="60" stroke="blue" stroke-width="5" fill="red" />
    
    Sorry, this browser does not support inline SVG.
    
    		</svg>
    	</body>
    </html>

     

    What is HTML Canvas?

     The HTML5 Canvas element is used for designing the graphic web page .  Using HTML5 Canvas you can create or draw the graphics on a web page .

    JavaScript used  for designing the graphics on a web page.

    Browser support

    You can use a different type of Browser  like Chrome 4.0 Internet Explorer 9.0 Mozilla Firefox 2.0 Opera 9.0 Safari 3.1.  so now you can understand Canvas use all the current browser .

    Using canvas you can draw the text animation and draw some graphic element on your web page.

    What is an article tag in HTML5?

     HTML5 article tag is an independent and self content and self-contained content.

    Article tag is introduced in HTML5 and  the article tag is also support the Global attributes and  event attributes

    Syntax

    In HTML, the syntax for the <article> tag is:

    <!DOCTYPE html>
    <html>
    	<body>
    		<article>
    			<h1>Heading for the article tag</h1>
    			<p>This is paragraph Text that display under article heading</p>
    		</article>
    	</body>
    </html>

    What is a new form tag attributes in HTML5

     HTML5 form attributes.

    In HTML5 14 new  from attribute that we will see on this article.

    • Placeholder
    <input type="text" name="customer-name" id="customer-name-id" placeholder="Enter customer name">
    • Autofocus
    <input type="text" name="address" id="address-id" autofocus>
    • Autocomplete
    <input type="text" name="email" id="email" autocomplete="off">

    Attribute Values

    on       Default value. Indicating that autocomplete is on (enabled)

    off       Indicating that autocomplete is off (disabled)

    • Required

    <input type=”text” id=”f-name” name=”f-name-id” required>

     

    Javascript for UI Developer Interview Questions

    Is Javascript Case Sensitive?

    Yes, Javascript make a difference in lowercase and uppercase.

    What is use of console.log.

    This is used  for print the value in console.

    What Is The Result Of  “30” + 30 + 60 in JavaScript ;

    Result will be 303060

    What is the difference between document.write() and console.log().

    document.write() : Writing the data into the HTML output (Print the data in HTML).

    console.log() : Writing the data into the browser console.

     Execution of JavaScript Programs.

    Within a web browser JavaScript programs are executed.

    CSS for UI Developer Interview Questions

    What is Cascading Style Sheet (CSS) and Explain the advantages of CSS?.

    CSS stands for Cascading Style Sheets and using CSS you can view, How your HTML web page will be displayed  on the screen.

    You can understand some advantages of CSS.

    CSS saves time : Once you write the css you can reuse it using external css.

    Browsers  Independence − You can write CSS and it can be used any latest browsers.

    Easy maintenance  –  You can maintain CSS very easily. .

    How  to increase page performance?

    To increase the page performance,the steps are as follows :

    1. Reduce image size.
    2. Clear the cache.
    3. Reduce the external HTTP requests.
    4. Load the JavaScript asynchronously
    5. Code your site for mobile .

    How will you define the difference between session storage and cookies?

    The main difference between session storage and cookies are

    Cookies: All information store in web browser. Cookies does not delete when you close web browser.

    Session Storage: All information store in web server.  Session will be delete delete when you close web browser.

    Distinguish between UI and UX

    UI and UX both are important concept for web application development. UI mean USER Interface and UX  mean User Experience.

    UX  (User Experience) :   How user interact with web application.

    UI (USER Interface) :      Define website look and feel,layout, colors.

    Define CSS Box Model?

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

    How will you check the coding errors in css?

    Open your webpage in browser. Press Ctrl + shift + j. You will find all security, JavaScript and css related issues.

    W3C validator is good for checking any HTML and css errors. You can get error about your webpage coding.

    How To become a good User Interface Developer?

    You need to know good HTML, CSS and JavaScript for designing a good User Interface. Graphic Designing are also important for UI Developer. Some latest technology like AngularJS is also good.

    what Is Use of Jquery Library   ?

    A JavaScript Library that use for animation, DOM  manipulation and AJAX. It is fast  JavaScript Library for make a fast and animated web page.

    Where Is Jquery Exicuted client side environment Or Server side environment Explain?

    Jquery code is Exicuted on Clientside

    How can You  Select Elements for the Class Name “allselected” In Jquery?

    $(‘.allselected’);

    How can you know if  Variable Has  Set or not in PHP Language?

    isset($varvalue);

    !isset($varvalue);

    In Php How will You  Get a Requests in Url Parameter ?

     $_GET[“urlkeyvalue”]

    How will You  get A Cross-Domain URL Request In PHP?

     file_get_contents().

    How can You Get a Global Variable within a Function In PHP? .

    Function global_function_name(){
    
    global $global_var_name;
    
    }

    What do you think about Ajax Application is better than Traditional Web Applications?

    It is not necessary to use Ajax always. Ajax is good for single-page application (SPA) web application.

    We have to think for application that we are going to develop. We always prefer Ajax for single page application but Ajax also good for Traditional Web Applications.

    How Will You Set Session Variables From JavaScript?

    JavaScript is a client side scripting language. You can’t set session variables in scripting language. Using session variable in JavaScript,  you can use  AJAX (asynchronous JavaScript and XML)  though to asynchronously.

    Distinguish Between Class And Id ?

    Class can be devoted to any number of elements while ID identifies and sets style to one and only one incidence of an element .

     How will You Include Comments Style Sheet?

    Including the comments is very easy in Style Sheet. You need to only use following  tags  for comments.

    /*

    Must  add  at the beginning of any comment

    */

    Must  add  after the comment.

    NOTE: Comments cannot be nested.

    What Do You mean by a responsive website?

    Any website that means to be responsive, when it turns any system screen resolution device types, looks decent at any size, and comprehensible to the user.

    How you can create  An Array In Javascript with 6 cities name, Assign That Array To The Variable  name like city_name ?

     var city_name  = [‘Chicago’ , ‘Illinois’, ‘Brooklyn ’, ‘Dallas’, ‘Austin’,‘Seattle’];

     Can You explain what is different between HTML and XHTML?

    Hypertext Markup Language ( HTML) and extensible hypertext markup language ( XHTML ) are used to create web pages. But the difference between HTML and XHTML  is extensible hypertext markup language ( XHTML ) is XML based language while Hypertext Markup Language ( HTML) is SGML based language .

    Which tool is best for HTML debugging ?

    You can use firefox, firebug and chrome as a Devtools. But we have some tools list for you.

    Firefox Developer Tools :

    Firefox Developer Tools is a perfect tools for debugging HTML. You can easily view and debug HTML using this tool.

    Chrome Developer Tools is a inbuilt tools in Google chrome. It is perfect for check website speed and debug HTML error.

    W3C Validation check the markup validity tools. You can find any HTML error using this tool.