FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

HTML5 & CSS3 Interview Questions and Answer



Top HTML5 & CSS3 Interview Questions and Answer

List the main CSS style sheet properties:

  • Background
  • Text
  • Font
  • Border
  • Outline
  • Margin
  • Padding
  • List
  • Table

What are some of the new features and properties in CSS3?

  • Box model
  • New Web fonts
  • Rounded corners
  • Border Images
  • Box Shadows, Text Shadows
  • New Color schemes (RGBA)
  • Transform property
  • New Pseudo-classes
  • Multi-column layout
  • New Gradients
  •  

·         What is wrapping in CSS3?

p {word-wrap:break-word;}

 

. What is the DocType for HTML5? What are the new futures in HTML5?

The html5 doctype is <!doctype html>

Some of the new features are audio,video and many other features are there.

New Semantic Elements in HTML5

HTML5 offers new semantic elements to define different parts of a web page:  

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

 

HTML5 & CSS3 Interview Questions and Answer

Migration from HTML4 to HTML5

Typical HTML4

Typical HTML5

<div id="header">

<header>

<div id="menu">

<nav>

<div id="content">

<section>

<div id="post">

<article>

<div id="footer">

<footer>

 

Differentiate between localStorage and sessionStorage objects.

localStorage object stores the data without an expiry date while sessionStorage object stores the data only for one session.
- With localStorage object, data will not be deleted when the browser window is closed while the data is deleted when the browser window closes with sessionStorage objects.

 

Is it possible to list elements straight in an html file?

- Yes, it is possible with the use of indents.

 

How many types CSS can be include in HTML?

There are three ways to include the CSS with HTML:

1. Inline CSS : It is used when only small context is to be styled.
- To use inline styles add the style attribute in the relevant tag.
2. External Style Sheet : Is used when the style is applied to many pages.
- Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


3. Internal Style Sheet : Is used when a single document has a unique style.
- Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>

 

What are technologies we use in DHTML?

What are technologies we use in DHTML? - Speaking in true sense there is nothing dynamic in DHTML but enclosing technologies such as CSS, JavaScript, DOM and the static markup language it becomes dynamic........

 

How is FontSize and Font Size differ in DHTML?

  1. Font size is an attribute that we used in font tag, where as font-size is a style property.
    2. Font size is to be defined for every tag that we need to use in but font-size can be applied as a general class of action.

 

 

 

What is SASS?

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document cleanly and structurally.

 

List out some features of SASS?

·        It is more stable, powerful and compatible with versions of CSS.

·        It is super set of CSS and is based on the JavaScript.

·        It is known as syntactic sugar for CSS which means it makes easier way for user to read or express the things more clearly.

·        It uses its own syntax and compiles to readable CSS.

·        You can easily write CSS in less code within less time.

·        It is an open source pre-processor which is interpreted into CSS.

What are advantages of SASS?

·        It allows writing clean CSS in a programming construct.

·        It helps in writing CSS quicker.

·        It is superset of CSS which helps designers and developers work more efficiently and quickly.

·        As Sass is compatible with all versions of CSS, we can use any available CSS libraries.

·        It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.

  • What is variable defaults?
  • You can set default values for variables by adding !default flag to the end of the variable value. It will not re-assign the value, if it is already assigned to the variable.
  • What is expanded CSS style?

In expanded output styling, each property and rule has its own line. It takes more space compared to nested CSS style.

 

 

 

  • Why JavaScript is called as Script for all browsers?
  • JavaScript is written after <SCRIPT> tag and it is surrounded in between the <!-- your code --> tags, this is also known as comment tag. JavaScript interpreter treats the tag such that it treats all the lines in the comments as script lines. The JavaScript comment starts with // inside the <SCRIPT> tag. The script is contained inside <HTML> tag that contains a comment tag. The browser that is non-compatible with JavaScripts ignore the lines and move on, but compatible browsers always treats it as a script and execute it. The browser treat the written lines between the comment tag as normal lines and just thinking of the comment ignores it. Some browsers just treat the <!-- comment--> as a comment only and ignores whatever is written inside it.
  • How are tag positions used in JavaScript?
  • - The tag can be inserted in a document wherever there is a requirement for a tag to be put. Nested tags are also possible within a <HEAD>...</HEAD> tag. There are many other ways to use the tag like inside <BODY>...</BODY> section. 
    - The tags can be placed inside <SCRIPT> tag also. The position of a particular tag is not fixed and it can be placed anywhere in the HTML document. Head is a used to place the tags that consists of noncontent settings. 
    - The example will show the position of <SCRIPT> tag :
  • <HTML>
    <HEAD>
    <TITLE>Tag position</TITLE>
    <SCRIPT LANGUAGE=”Text/JavaScript”>
    // your script statement(s) here
    </SCRIPT>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>
  • - This uses the <SCRIPT> tag inside the HEAD section. 
    - There is one more code that will show the positon of <SCRIPT> in body section and it is as :
  • <HTML>
    <HEAD>
    <TITLE>Tag position</TITLE>
    </HEAD>
    <BODY>
    <SCRIPT LANGUAGE=”Text/JavaScript”>
    // your script statement(s) here
    </SCRIPT>
    </BODY>
    </HTML>
  • What are the different types of errors supported by JavaScript?
  • There are many errors that can occur in a system. JavaScript provides a message for all the errors at run time and dynamically generate the error code. The errors that are present : 
    Load-time errors : 
    These are the errors that come when loading a web page like using of improper syntax and the errors gets detected the moment user loads a page. 
    Run-time errors : 
    These are the errors that comes due to misuse of the language commands used inside the HTML document. This shows that it has loaded but the functionality is not properly integrated.
    Logic errors : 
    These are the errors that comes due to bad logic performed on a function that is having different operation but it is made to have logic differently.

 

What is Pop() method in JavaScript?

- The pop() method is similar as the shift() method but the difference is that Shift method works at the end of the array.
- The pop() method take the last element off of the given array and returns it. The array on which is called is then altered.
For example :

var fruits = ["apple ", "banana ", "mango"]; 
console.log(fruits.pop() );
console.log(fruits);

- We get the following console output :

mango
["apple ", "banana “];

How to create an array in JavaScript?

- We can create an array in JavaScript as following ways :
For example :

<script>
var fruits = new Array[];
fruits[0] = “Apple”;
fruits[1] = “Orange”;
fruits[2] = “Banana”;
alert(fruits[1]);
</script>

- It will give output : Orange
- Another easier way to create an array is as follow :

<script>
var fruits = [“Apple”,”Orange”,”Banana”];
alert(fruits[0]);
</script>

JavaScript vs. Jscript

Both JavaScript and Jscript are almost similar. Java script was developed by Netscape. Microsoft implemented its own scripting language and named it as Jscript.

As Jscript runs in Internet Explorer, it has the access to different objects that are exposed by the browser. ActiveXObject is one such object.

 

  •  
    - It is a scripting language developed by Netscape Communications.
    - The Netscape Navigator interprets JavaScript embedded into Web pages.
    - JavaScript is used for developing web applications.
    - It is not dependent on Sun Microsystem's Java language.

    JScript 
    - Microsoft JScript is an open implementation of Netscape's JavaScript.
    - JScript is a scripting language designed to create active online content. ActiveX controls, Java programs, etc can be linked and automated in the web pages using JScript.

 

 

What is the difference between Client side JavaScript and Server side JavaScript?

Client-Side JavaScript (CSJS)
- It is JavaScript that enables the enables web pages on browsers to run active online content.

Server-Side JavaScript (SSJS)
- It is JavaScript that enables back-end access to databases, file systems, and servers.

 

How to Accessing Elements using javascript?

Following are some of the functions with which the elements can be retrieved:

- getElementById()
- getElementByName()
- getElementByValue()
- getElementByTag()

 

How to set the cursor to wait in JavaScript?

<html>
<div style="width: 100px; height: 100px; background: yellow; cursor: wait">

A mouse over this yellow patch will show you the wait cursor.

</div>
</html>

What is the use of jQuery.data()?

  1. jQuery.data() is used to set/return arbitrary data to/from an element.
    2. Syntax: jQuery.data(element, key, value)
    3. “element” is the DOM element to which the data is associated.
    4. “key” is an arbitrary name of the piece of data.
    5. “value” is value of the specified key.
    6. Suppose we want to set the data for a span element:
  2. How to read, write and delete cookies in jQuery?
  • - To deal with cookies in jQuery we have to use the Dough cookie plugin.
    - Dough is easy to use and having powerful features.

    1. Create cookie
  • $.dough("cookie_name", "cookie_value");

  • 2. Read Cookie
  • $.dough("cookie_name");

  • 3. Delete cookie
  • $.dough("cookie_name", "remove");
  • How to always reference latest version of jQuery?
  • When you reference the jQuery on your web page, you have to specify the version number also.
  • <script type=”text/javascript”
    src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”>
    </script>

  • Above code will always load the 1.5.1 version of jQuery. If you reference the latest jQuery then you don’t need to change the code every time the new version of jQuery is released.

    To achieve this you have to use following code
  • <script type=”text/javascript”
    src=”http://code.jquery.com/jquery-latest.min.js”>
    </script>
  • How can images be made to appear scrolling one over another?
  • - Jquery provides the user with the ability to change the attributes of a property dynamically. The jquery slide method can be used to change the height of elements gradually. This can be used to give the scroll effect of an image over image.
    The jquery comprises of the following slide methods:

    1. $(selector).slideDown(speed,callback)
    2. $(selector).slideUp(speed,callback)
    3. $(selector).slideToggle(speed,callback)

 

Explain the features of jQuery.

- jQuery is a write less and do more javascript library.

- It helps us to make the use of javascript much easier.

- It simplifies the complicated things from javascript like the AJAX calls and the DOM manipulation.

Features of jQuery are :

1. Effects and animations.
2. Ajax.
3. Extensibility.
4. DOM element selections functions.
5. Events.
6. CSS manipulation.
7. Utilities - such as browser version and the each function.
8. JavaScript Plugins.
9. DOM traversal and modification.

 

Why is jQuery better than javascript?

  1. jQuery is great library for developing ajax based application.
    2. It helps the programmers to keep code simple and concise and reusable.
    3. jQuery library simplifies the process of traversal of HTML DOM tree.
    4. jQuery can also handle events, perform animation, and add the ajax support in web applications.
  2. When can you use jQuery?
  • 1. jQuery can be used to for developing ajax based applications.
    2. It can be used to keep the code simple, concise and reusable.
    3. It simplifies the process of traversal of HTML DOM tree.
    4. It can also handle events, perform animation, and add the ajax support in web applications.
  • When can you use jQuery?
  • JQuery can be used to

    1. Apply CSS
    2. Call functions on events
    3. Traverse the documents
    4. Manipulation purpose and to add effects too

What are the features provided by ActionScript 3.0?



- ActionScript 3.0 allows a framework to provide object oriented features and write the program easily. 

- Scripting language can be used to animate the designs and provide flexibility at the same time editing features. 

- It provides more control and code reusability of the applications that are made in flash and is complex. 

- It provides a platform that gets compiled and uses the ActionScript Virtual Machine for the reusability of the code. 

- The Flash libraries can be used that have the XML capabilities and use the content rich browser to display it.

What are the differences between JavaScript and ActionScript?



- ActionScript consists of more libraries than the JavaScript and it is based on ECMA-262. 

- JavaScript is used within the browser’s Document that shows the DOM in the window. 

- DOM stands for Document Object Model are used in the browser window and have form centric documents for the JavaScript, whereas ActionScript doesn’t run in the browser window and have the media centric approach.

- The extensions are more supported in ActionScript than the JavaScript as it doesn’t provide the unique extension features.

 

 

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.

The ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Read about all AngularJS directives in our AngularJS directive reference.

Example

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

AngularJS Controllers

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

AngularJS Example

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

 

How to Use the Scope?

When you make a controller in AngularJS, you pass the $scope object as an argument:

Example

Properties made in the controller, can be referred to in the view:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});

</script>

AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

The event directives allows us to run AngularJS functions at certain user events.

An AngularJS event will not overwrite an HTML event, both events will be executed.


Mouse Events

Mouse events occur when the cursor moves over an element, in this order:

  1. ng-mouseenter
  2. ng-mouseover
  3. ng-mousemove
  4. ng-mouseleave

Or when a mouse button is clicked on an element, in this order:

  1. ng-mousedown
  2. ng-mouseup
  3. ng-click

You can add mouse events on any HTML element.

AngularJS Directives on HTML Elements

AngularJS modifies the default behavior of some HTML elements.

Element

Description

a

AngularJS modifies the <a> element's default behaviors.

form

AngularJS modifies the <form> element's default behaviors.

input

AngularJS modifies the <input> element's default behaviors.

script

AngularJS modifies the <script> element's default behaviors.

select

AngularJS modifies the <select> element's default behaviors.

textarea

AngularJS modifies the <textarea> element's default behaviors.

AngularJS Validation Properties

  • $dirty
  • $invalid
  • $error

Validation is explained in Angular Validation.

 

 

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Bootstrap Alerts?

Alerts

Bootstrap provides an easy way to create predefined alert messages:

× Success! This alert box indicates a successful or positive action.

× Info! This alert box indicates a neutral informative change or action.

× Warning! This alert box indicates a warning that might need attention.

× Danger! This alert box indicates a dangerous or potentially negative action.

Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:

 

Bootstrap Buttons Styles

Bootstrap provides seven styles of buttons:

To achieve the button styles above, Bootstrap has the following classes:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Navigation Bar With Dropdown

WebSiteName

  • Home
  • Page 1
    • Page 1-1
    • Page 1-2
    • Page 1-3
  • Page 2
  • Page 3

Navigation bars can also hold dropdown menus.

The following example adds a dropdown menu for the "Page 1" button:

Bootstrap Vertical Form (default)

Bootstrap Supported Form Controls

Bootstrap supports the following form controls:

  • input
  • textarea
  • checkbox
  • radio
  • select

 

5) What are the types of layout available in Bootstrap?

In Bootstrap there are two types of Layout available

·          Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen

·          Fixed Layout: For a standard screen you will use fixed layout (940 px) option

17) Explain what is Bootstrap collapsing elements?

Bootstrap collapsing elements enables you to collapse any particular element without writing any JavaScript code or the accordion markup. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)