UI developer interview question answer

Does HTML needs compiler?

HTML, CSS and JS are browser interpreted technologies. Whereas Asp.net, Java and Php are not interpreted. They need a compiler or interpreter which can convert their code in 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. Sementic Elements results better in search results.

What is the Geolocation API in HTML5?

HTML5’s Geolocation API lets users share their physical location with chosen web sites. JavaScript can capture a user’s latitude and longitude and can send it to the back-end web server to enable location-aware features like finding local businesses or showing their location on a map.

Today, most browsers and mobile devices support the Geolocation API. The Geolocation API works with a new property of the global navigator object.

A Geolocation object can be created as follows:

var geolocation = navigator.geolocation;

The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the user’s device.

What’s the difference between the <svg> and <canvas> elements?

The <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and even bitmap images.

SVG is a language for describing 2D graphics, but <canvas> allows you to draw 2D graphics on the fly using JavaScript.

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.

How do you optimize a website's assets & reduce page load time?

Follow these steps to optimize assets and also reduce the page load time of any website:

Properly naming all assets.
Using a content delivery network (CDN) for media files.
Hosting assets on different domains while also reducing DNS lookups
Using a cookie-free domain to place assets and splitting them among domains
Using CSS Sprites for Images.
Disabling etags.
Minimizing the use of JS in code.
Minimizing inline CSS and using internal and external style sheets.

What is the purpose of <! Doctype html>?

The in HTML5 refers to indicating to the web browser about the version of HTML in which the page is created. Neither there is an end tag is not is it case sensitive.

How many ways to use colors apply on html elements?

We can color HTML elements in three different ways, as mentioned below.

#efefef or Hex Color

By using the color name such as blue, red, etc.

RGB(10,234,128). This is a combination of red, green, and blue.

What is the importance of Drag and Drop in HTML5?

Answer: Drag and Drop is the most important User Interface concept which makes it easy to grab an object and Drag it at the place you want with the help of a mouse click.

Some common features that are mostly used by Drag and Drop operation include move, link or copy.

We can drag an image using elements, type = <img draggable = “true”>, to make an image draggable and set the draggable image attribute to true.

What is html5 new input type?

HTML5 has introduced new input types for forms. Designers can build interactive and user-friendly web forms by using these input types. The new input types also provide improved data validation, better color picker controls, and enhanced input control.

The new input types are:

Time

Date

Datetime

Datetime-local

Week

Month

Email

Color

Number

Range

Search

Telephone

URL

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.

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 emphasise in search results.

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 tools do you use for cross-browser testing?

They should have some kind of strategy. Perhaps a web-based tool like BrowserStack. Perhaps a VM based tool like Virtual Box. Perhaps different actual computers.

Differentiate between the ID and class.

Both ID and class is been used in HTML and assigns the value from CSS.

The ID is a kind of element which uniquely assigns a name to a particular element whereas class has an element with a certain set of properties that can be used for the complete block.

The id can be used as an element because it can uniquely identify it whereas class is also defined to block the elements and applies too many tags wherever it is used.

ID provides the restriction to use its properties to one specific element whereas in class the inheritance is applied to a specific block or group of the element.

In how many ways can a CSS be integrated as a web page?

CSS can be integrated in three ways:

Inline: Style attribute can be used to have CSS applied HTML elements.

Embedded: The Head element can have a Style element within which the code can be placed.

Linked/ Imported: CSS can be placed in an external file and linked via link element.

What are the advantages of External Style Sheets?

You can create classes for reusing it in many documents.

By using it, you can control the styles of multiple documents from one file.

In complex situations, you can use selectors and grouping methods to apply styles.

How to restore the default property value using CSS?

The closest option is to use the 'initial' property value, which restores the default CSS values, rather than the browser's default styles.

Which CSS has the highest priority?

In CSS, Inline CSS has the highest priority, followed by Internal sheets, then followed by External CSS, having the least priority.

Explain CSS3 Animations?

CSS animation lets an element gradually change from one style to another without using JavaScipt/jQuery. It lets move elements around the screen, makes them spin around, change color, size, shape, and much more. To use CSS animation, you need to write animations using keyframes which basically holds what styles the element will have at certain times.

Example - Here, the rectangle background color changes from Red to Green

/* The element to apply the animation to */
div {
  width: 100px;
  height: 50px;
  background-color: red;
  animation-name: animate;
  animation-duration: 3s;
}

/* The animation code */
@keyframes animate {
  from {background-color: red;}
  to {background-color: green;}
}


What is the use of calc()?

The calc() function lets you perform calculations to be used as the property value. It takes a single expression as its parameter and expression's result is used as property value. The expression can be any simple expression with addition, subtraction, multiplication and division.

Example
width: calc(100% - 90px);

The most useful ability of calc() is its ability to mix units, like percentages and pixels.

Explain child selector in CSS?

Child selectors can be used for applying the style for parent element and this will descend to the child elements. Below is the example -

body > input{
 color: #FFFFF1;

}

Explain “Atrribute Selector” in CSS?

Attribute selector can be used to apply a style for an HTML element with particular attribute. Example
input[type = "text"]{
 color: #FFFFFF; 

}

What are the media types in CSS3?Media Types in CSS: 

There are many types of media types which are listed below:

all - It is used for all media devices
print - It is used for printer.
screen - It is used for computer screen, smartphone, etc.
speech - It is used for screen readers that read the screen loud.

How to create shadow effect in CSS3?

The box-shadow property is used to add shadow effects around any element’s frame. Users can set multiple effects to a portion separated by commas. Usually, it is described by X and Y offsets relative to the part, color, and blur and spread radii.

What is gradient and explain its types?

In CSS3, gradients let users display smooth transitions two or number of specified colors.

CSS defines two types of gradients, which are:

Linear Gradients: It goes up/down/right/left/diagonally

Radial Gradients: Usually defined by its center

How to use before and after in CSS3?

The ::before the selector is used to inserting something before the content of any selected element. Whereas, the ::after selector to insert something after the content in a specified element.

Syntax for before selector:

::before {

   css declarations;

}

Syntax for After Selector:

::after {

   css declarations;

}

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.

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 heigth 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>

What is the difference between inline, block and inline-block?

Inline: In this thing, elements will follow the flow without breaking. Margin/padding will push other elements horizontally not vertically and inline elements ignore height and width.

Block: It breaks the line and doesn’t fit in the line. It usually has div, p, text, section etc.

Inline-block: It is similar to the inline element and follows the page flow. The only difference is that it will consider height and width.

How do floats work?

Floats push the element to the left or right. The float property can have one of four values:

Inherited: The element inherits the parent’s float value

None: This is the default value; the element doesn’t float

Left: The element floats to the container’s left

Right: The element floats to the container’s right

What are the CSS frameworks?

CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: -

Bootstrap
Foundation
Semantic UI
Gumby
Ulkit

What is a CSS selector?

It is a string that identifies the elements to which a particular declaration apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. There are several different types of selectors in CSS: -

Element Selector
Id Selector
Class Selector
Universal Selector
Group Selector

How absolute, a relative, a static and fixed position will differ?

Absolute: It will place the element exactly where a user wants to place it. In general absolute will place relative to the parent. If no parent is available then it is placed relative to the page itself.

Relative: It will place the element relative to itself (if we didn’t give any relative positioning) for example if we set position relative to an element and given as top: 10px then it will place the element 10px down from where the actual position of the element to be.

Static: It will place the element according to the flow of the document. It uses default position, if we want to remove any position then we can use a static position to replace.

Fixed: It will place the element relative to the browser window or viewport. As viewport doesn’t change when scrolling. So element will be fixed at that position

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 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 javascriptis called closures.

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

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.

What Are  Boolean Operators Supported By Javascript

or ||, and &&, not equal to !

Create An Array In Javascript With A List Of 4 Colors, Assign That Array To The Variable, ‘colors’

var colors = [‘red, ‘yellow’, ‘green’, ‘blue’];

Loop Through The Color Array And Print Each Value To The Console. Assume You Do Not Know The Amount Of Colors In The Color Array.

var colors = [‘red, ‘yellow’, ‘green’, ‘blue’];

for( var i = 0; i < colors.length; i++ )

{ 

console.log(colors[i]); 

}

How Do You Select All Elements With The Class Of “selected” In Jquery?

$(‘.selected’);

Explain the differences between local storage, session storage, and cookies.

Local storage allows data storage with no expiration date and offers the most substantial maximum storage limit.
Session storage stores the data associated with a session. When the user closes the tab or browser, the data disappears.
Cookies are reserved mostly for server-side reading, storing data sent back to the server. The data size must be less than 4KB.