UI interview question and answersJanuary 21, 2015January 21, 2015admin
angularjs basic interview questions and answers
What is the Difference between display: inline and display: block?

Display: block means that the element is displayed as a block, starts in new line it has some white space above and below it and tolerates no HTML elements next to it as paragraphs and headers have always been. Except when ordered otherwise (by adding a float declaration to another element, for instance).
Display: inline means the elements displayed in the same line in order exactly opposite to display: block. This is when we want to highlight any particular word or heading by the time we can use.

Can you brief about Doctype in HTML5

Doctype is not an html tag, the <! DOCTYPE> declaration must be the very first thing in your HTML document, before thetag. It works like an instruction and mediator to the web browser which version of html written for the web application.

Block level elements and inline elements in html

Actually its repeated question in the interview but he is making confusion, but I said answer like this most HTML elements are defined as block level or inline elements.

Block Level Elements starts with new line and ends with new line, when displayed in browser for example

Is <DOCTYPE> mandatory? If yes why? Is this html tage?

Yes it’s mandatory, the declaration tell the browser which version of html is used to develop web application and its intimates the errors in case any find, HTML5 is not based on SGML, and therefore does not require a reference to a DTD (this required only in html old versions).

* If you’re not included <! DOCTYPE> declaration to your HTML documents that browse don’t consider even your using html5 assets, so with <! DOCTYPE> that the browser knows what type of document to expect.

Which Browser we are using how can we know with using JavaScript?

This quite critical but simple if find the exact way, the properties appName and appCodeName return the name of the user browser please check this simple code.

<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML =
“Developed by ” + navigator.appName + “. Browser Name “+ navigator.appCodeName;
</script>
How Meta Viewport works

This simple example code, this should be include in header

<meta name="viewport" content="width=device-width, initial-scale=1">

This means that the browser will probably render the based on page width.

How many type of gradients are In Css3

There are two type gradients available in css3.
1) Linear Gradients (goes down/up/left/right/diagonally)
2) Radial Gradients (defined by their center)

What is call back functions in Js and jquery?

JavaScript Statements are executed line by line the action or effect is not completed It through the errors.
Callback function is executed after the current effect is 100% finished.

<button>Hide</button>
<p>this is a paragraph with little content. </p>
$("button").click(function(){
  $("div").toggle("slow",function(){
    alert("alert is the callback function");
  });
});

What is array? declare with example in javascript?

Simple abbreviation arrays are used to store multiple values in a single variable.
This simple array example code storing some elements.

var bus = ["Saab", "Volvo", "BMW"];
document.write(bus);

How to define object in oops?

Almost everything is object in javascript, object containe with properties and methods. See.

var bus = {type:"BMW", model:200, color:"Red"};
document.write(bus.type);

What’s is Json why?

JSON stands for JavaScript Object Notation and lightweight data interchange format independent its “self-describing” and easy to understand for everyone.

JSON is a format for storing and transporting data. JSON is often used when data is sent from a server to a web page.

Can you please explain about Media Queries with example?

With a @media query, you can write different CSS code for different media types. This helps when you want different layout for different media types such as a screen or a printer, but also when you want different layout for different devices, which is very useful when making web pages with responsive design.
You can also have different layout when a user resizes the browser window up or down to a certain width, or height.

What is new in html5?

In HTML5 there are many Elements in HTML5, HTML5 elements, New Semantic/Structural Elements, New Form Elements
, New Input Types, New Attribute Syntax, Graphics, New Media Elements

Which is the latest version in css and what and all new in latest version

CSS3 is the latest standard for CSS.

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
How to select third element with using JavaScript

$(document).ready(function(){
  $("p:nth-of-type(3)").css("background-color","red");
});
HTML code:-
<p>The first paragraph in body.</p>
<p>The second paragraph in body.</p>
<p>The third paragraph in body.</p>

<p>The fourth paragraph in body.</p>

How can you give box shadow for div?

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px #888888;
}

Can you list out jquery event?

There are many in Jquery so please refer this link http://api.jquery.com/category/events/