CSS CSS3 HTML HTML5 JavaScript jQuery

HCL – Web / UI Developer – interview questions and answer – HTML5 , CSS3 , JS & jQuery

1) Explain about HTML5 local storage ?
There are two ways to store data in HTML as objects locally :

  1. localStorage – store data  across session acess
  2. sessionStorage – storing data for current session only

Data will be stored in key/value pair format.
sessionStorage.companyname = “SHARAG INFOTECH”;
2)  explain CSS media queries ?
CSS media queries are used to develop responsive templates for different layout of screen, print, mobile , tablet or any other resolutions
CSS media queries can be added in 3 ways as like CSS style sheet :

  1. Internal stylesheet :  <style type=”text/css”>
    @media only screen and (max-width: 600px){
    /* rules apply to the device resolution is 480px or less  */
  2. Imported stylesheet :   @import “tablet.css”   (min-width: 800px) and (max-width: 1200px);
  3. External stylesheet:  <link rel=”stylesheet” type=”text/css” href=”deskto.css” media=”screen and (min-width: 1200px), print and (min-resolution: 300dpi)” />

3) explain css inheritance ?
Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. For the root element, which has no parent element, the inherited value is the initial value of the property.
A property can also be explicitly inherited by using the inherit keyword in property.
CSS inheritance example:
class inheritance for an HTML tag :
<div class=”firstClass secondClass thirdClass fourthClass ” > </div >
CSS property inheritance from parent :
p {
color: #000;
p a:link {
color: inherit;
and using LESS method for inheritance example:
//through variable
@color: #123456;
#emp {
color: @color;
div {
color: @color;
//through class name calling [MIXINS]
.rounded-corners (@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
#navtable {
#maintable {
4) what is javascript inheritance ?
In simple terms, inheritance is the concept of one thing gaining the properties or behaviours of something else.
Inherited children inherit their parent’s behaviour To say A inherits from B, is saying that A is a type of B.
In JavaScript You must use a special object called prototype.
function Animal() {}; // This is the Animal *Type* = function () {
alert(“All animals can eat!”);
function Bird() {}; // Declaring a Bird *Type*
Bird.prototype = new Animal(); // Birds inherit from Animal = function() {
alert(“Birds are special, they can fly!”);
The effect of this is that any Birds you create (called an instance of Bird) all have the properties of Animals
var aBird = new Bird(); // Create an instance of the Bird Type; // It should alert, so the inheritance worked; // Important part of inheritance, Bird is also different to Animal
var anAnimal = new Animal(); // Let’s check an instance of Animal now; // Alerts, no problem here; // Error will occur, since only Birds have fly() in its prototype
5) explain javascript associative array ?
Associative arrays are where we can associate a key string with a value string
JavaScript objects are also associative arrays.
i.e the property  emp.Name can also be read by calling emp[‘Name’]
We can access each property by entering the name of the property as a string into the array
it refers to accessing the DOM elements of HTML also [as object or associative array]
6) explain JS Namespace ?
Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace
and also helps to organize blocks of functionality into easily manageable groups that can be uniquely identified.
JavaScript doesn’t  builtin support of namespacing but using objects and closures we can achieve a similar effect.
javascript Namespacing patterns :
1)    Single global variables :
var myApplication =  (function(){
2)    Object literal notation :
var myApplication = {
getInfo:function(){ /**/ },
// we can also populate our object literal to support
// further object literal namespaces containing anything
// really:
models : {},
views : {
pages : {}
collections : {}
3)    Nested namespacing :
var myApp =  myApp || {};
// perform a similar existence check when defining nested
// children
myApp.routers = myApp.routers || {};
myApp.model = myApp.model || {};
myApp.model.special = myApp.model.special || {};
// nested namespaces can be as complex as required
4)    Immediately-invoked Function Expressions :
// an (anonymous) immediately-invoked function expression
(function(){ /*…*/})();
// a named immediately-invoked function expression
(function foobar(){ /*..*/}());
// this is technically a self-executing function which is quite different
function foobar(){ foobar(); }
5)   Namespace injection :
// define a namespace we can use later
var ns = ns || {}, ns2 = ns2 || {};
// the module/namespace creator
var creator = function(val){
var val = val || 0; = function(){
return val++
this.reset = function(){
val = 0;
//, ns.reset now exist, 5000);
// ns2 contains the same methods
// but has an overridden value for val
// of 5000
for more details on namespace read
7) explain Jquery live and bind methods ?
.bind() attacheds events to elements that exist or match the selector at the time the call is made.
Any elements created afterwards or that match going forward because the class was changed, will not fire the bound event.
$(‘img’).bind(‘click’, function(){…});
.live() works for existing and future matching elements.
Before jQuery 1.4 this was limited to the following events:
click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
$(‘img’).live(‘click’, function(){…});
8) what is bootstrap ?
Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.
More details
9) type of webservice ?
there are two types of web service….1. SOAP [Simple Object Access Protocol] Webservice and 2. RESTful [REpresentational State Transfer] Webservice.
SOAP is a messaging protocol , REST is a design philosophy , not a protocol.
you define your interface in a .wsdl file, which describes exactly which input parameters are expected and how the return values will look like
there are tools to generate the .wsdl files out of java class hirarchies. JAXB for example
there are also tools to generate java objects/classes as part of eclipse for example (don’t know the name in the moment).
SOAP is very strict. Every request is validatet against the wsdl before processing.
A good but not so easy to start with framework for SOAP WS is Apache CXF
REST (no hands on experience up to now, feel free to correct and improve 😉 ):
a way to access a webserver or web application to retrieve data from or send to it.
it’s only negotiated, how it is accessed.
common is something like this to retrieve object of type type with id=123
very intuitive, but no automatic validation of requests.
The main advantages of REST web services are:
Lightweight – not a lot of extra xml markup
Human Readable Results
Easy to build – no toolkits required
SOAP also has some advantages:
Easy to consume – sometimes
Rigid – type checking, adheres to a contract
Development tools


Aztecsoft php web developer interview questions and answers

1) how to increase the web page performance ?
1) Use lightweight templates
2) Put Stylesheets at the Top
3) Put Scripts at the Bottom
4) Avoid CSS Expressions like As an example, the background color could be set to alternate every hour using CSS expressions.
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
5) Make JavaScript and CSS External
6) Minify JavaScript and CSS : Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.
7) Remove Duplicate Scripts
8) Choose over @import
9) Don’t Scale Images in HTML
10) Make favicon.ico Small and Cacheable
11) use Ajax, JSON, Jquery for fastening results
2) $test=array( 0=>’one’ , 2=> ‘two’ , ‘3 ‘=>’three’ , ‘3a’=>5, ‘myindex’); print_r($test); what will be the output? 
Array ( [0] => one [2] => two [3 ] => three [3a] => 5 [3] => myindex )
3) what is output of this mysql function select substring_index(‘’,”@”,-1); 
Ans:   explanation is below

Returns the substring from string str before count occurrences of the delimiter delim. If count is positive, everything to the left of the final delimiter (counting from the left) is returned. If count is negative, everything to the right of the final delimiter (counting from the right) is returned. SUBSTRING_INDEX() performs a case-sensitive match when searching for delim.

mysql> SELECT SUBSTRING_INDEX('', '.', 2);
        -> 'www.mysql'
mysql> SELECT SUBSTRING_INDEX('', '.', -2);
        -> ''

This function is multi-byte safe.
4) An employee table having columns  id {employee id} , name {employee name},  m_id {manager id }  , write a query to select employee and their manager names  ? 

Main table    
id name m_id
1 John 2
2 Greek Tor 1
3 Alex John 1
4 Mike tour 1
5 Brain J 3
6 Ronald 3
7 Kin 4
8 Herod 3
9 Alen 2
10 Ronne 1

Ans:  INNER join SQL command is mostly used to join one table to it self. The biggest advantage of doing this is to get linking information from the same table. We will try to understand this with an example. The best example of INNER join will be employee table where we will keep the employee and its manager as a single record. This way by linking to the table it self we will generate a report displaying it as two linked tables. Each record will have one additional field storing the data of the manager by keeping the employee ID and we will use M_ID ( manager ID ) to link with main employee ID. This way we will link two virtual tables generated from one main table. 
let us use inner join to create one report on who is the manager of which employee. Check this SQL 
SELECT, as emp_name, as manager FROM emp as t1 INNER JOIN emp as t2 on = t1.m_id

id emp_name manager
1 John Greek Tor
2 Greek Tor John
3 Alex John John
4 Mike tour John
5 Brain J Alex John
6 Ronald Alex John
7 Kin Mike tour
8 Herod Alex John
9 Alen Greek Tor
10 Ronne John

for more :  To generate only the manager table used this SQL
SELECT, as emp_name from emp as t1 INNER JOIN emp as t2 on 
Managers Table

id emp_name
2 Greek Tor
1 John
1 John
1 John
3 Alex John
3 Alex John
4 Mike tour
3 Alex John
2 Greek Tor
1 John

To generate only the employee table  used this SQL
SELECT, as emp_name from emp as t1 INNER JOIN emp as t2 on 

id emp_name
1 John
2 Greek Tor
3 Alex John
4 Mike tour
5 Brain J
6 Ronald
7 Kin
8 Herod
9 Alen
10 Ronne

use below dump for your reference 
`id` int(4) NOT NULL auto_increment,
`name` varchar(25) NOT NULL default ”,
`m_id` int(4) NOT NULL default ‘0’,
UNIQUE KEY `id` (`id`)
— Dumping data for table `emp`
INSERT INTO `emp` VALUES (1, ‘John’, 2);
INSERT INTO `emp` VALUES (2, ‘Greek Tor’, 1);
INSERT INTO `emp` VALUES (3, ‘Alex John’, 1);
INSERT INTO `emp` VALUES (4, ‘Mike tour’, 1);
INSERT INTO `emp` VALUES (5, ‘Brain J’, 3);
INSERT INTO `emp` VALUES (6, ‘Ronald’, 3);
INSERT INTO `emp` VALUES (7, ‘Kin’, 4);
INSERT INTO `emp` VALUES (8, ‘Herod’, 3);
INSERT INTO `emp` VALUES (9, ‘Alen’, 2);
INSERT INTO `emp` VALUES (10, ‘Ronne’, 1);

5) write code to read the following file content “rag.txt”  and replace postgre SQL to MySQL and output the content ?
The postgre SQL database has become the world’s most popular open source database because of its consistent fast performance, high reliability and ease of use. postgre SQL used on every continent — Yes, even Antarctica! — by individual Web developers as well as many of the world’s largest and fastest-growing organizations to save time and money powering their high-volume Web sites, business-critical systems and packaged software by postgre SQL.
 $str = file_get_contents(‘rag.txt’);
$str = str_replace(‘postgre SQL’ ,’MySQL’, $str);
echo $str;
6) how we can destroy session cookie?
Ans: we can use session_destroy() or  to destroy particular cookie set it to past time using  setcookie () function like  setcookie (“TestCookie”“”time() – 3600);
7) True or False 
a) session_destroy()  : destroys all of the data from session   TRUE
b) session_unset() : frees all session variable  TRUE

c) unset($_SESSION) deletes all session data   FALSE    “Do NOT unset the whole $_SESSION with unset($_SESSION) as this will disable the registering of session variables through the $_SESSION superglobal.”  

8) $array = array( “hi”, “Hello World” , “what”, “Good Morning”);  write code to output the array contents havng more than one word ?

<? $array = array( “hi”, “Hello World” , “what”, “Good Morning”); 
$count = sizeof($array);
$i =0;
while ($i < $count )
echo “<br> ***********<br>”;
$exp = explode ( ” ” ,$array[$i] );
if (count($exp) > 1)
echo $array[$i] .” is having more than  one word in “. $i.” position of array  <br>”;
9) what is the output of the below code 
$sec_array = array(“red”, “green”, “blue”,”yellow”);
array_splice( $sec_array , 1, -1);
print_r($sec_array );   ? 


Ans: Array ( [0] => red [1] => yellow )
10) how we can get the second value from the last in an array ?
example  <? 
$check = array ( “rag”, “shara”, “sharag”, “man”,”woman”,”child”, “human”);
echo $check[count($check)-2];

11)  What is the maximum length of a URL?
Microsoft states that the maximum length of a URL in Internet Explorer is 2,083 characters, with no more than 2,048 characters in the path portion of the URL
Firefox, Safari , Opera  supports more than 100,000 characters.  but some times server like Apache, IIS may not support these longer URL’s. so better to keep it short URL.


HTML, CSS & JavaScript Web Designer or Web Developer Interview Questions

HTML, CSS & JavaScript Web Designer or web Developer Interview Questions

HTML Web Standards Interview Question


What is a DTD? What DTD do you generally use? Why? Pros and cons.

A DTD is a Document Type Definition, also know as DOCTYPE. In a document served as text/html, the DOCTYPE informs the browswer how to interpret the content of the page. If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into “quirks mode”. If you know what you are doing and include a correct XHTML DOCTYPE, your page will be rendered in “standards mode”.

Accessibility Interview Question

Importance in selecting font size for a web page?

Font sizes should be declared using relative measurement values, such as ems, via a style sheet, without the use of the term !important. There are issues with browser font size enlarging which can be rectified via CSS.

CSS Interview Question

a) What are the possible values for the display attribute that are supported by all browsers?

b) What is the default value for the display attribute for the image element? (what is the difference between inline and block level elements)
c)What does display: run-in do?
d) Difference between “visibility:hidden” and “display:none”? What are the pros and cons of using display:none?


main values: none, block, inline, list-item, run-in
all values: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
default value: inline, block or list-item, depending on the element. The <img> is an inline element.
Run-in should make the run-in element be the first line of the next sibling block level element, if it is before a block level element that is not floated or absolutely positioned. If the next sibling is positioned or floated, then the run-in element will be a block level element instead of appearing in-line.
PPK’s Quirksmode explains it well. The w3schools lists table display values.
When visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page. If the display is set to none, the element does not occupy any space on the page — as if it didn’t exist..


CSS Interview Question


a) What are the five possible values for “position”?
b) What is the default/initial value for “position”?
c) How does the browser determine where to place positioned elements
d) What are the pros and cons of using absolute positioning?
e) if they are really advanced, ask about IE z-index issues with positioned elements.


a) Values for position: static, relative, absolute, fixed, inherit
b) Static
c) They are placed relative to the next parent element that has absolute or relative value declared
d) Absolutely positioned elements are removed from the document flow. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. An absolutely positioned element may overlap other elements, or be overlapped by them.
e) IE treats a position like a z-index reset, so you have to declare position of static on the parent element containing the z-indexed elements to have them responsd to z-index correctly.


CSS Interview Question


Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7

Possible Answer:

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}


Basic Javascript Interview Question


What is the correct way to include JavaScript into your HTML?


correct explanation using inline event handlers or inline code

Basic Javascript Array / XHTML Form Interview Question


Are the following all equal, and, if so, what would your code look like to make the following all equal the same thing:



<form name="myform" method="post" action="something">
<input name="anything" value="anything" type="something" />
<input name="field" value="something" type="something" />

Answer includes knowing that the form is the second form on the page, and that the field input element is the second element within that form.


JavaScript Interview Question


How do you dynamically add a paragraph with stylized content to a page?

Possible Answer:

newParagraph = document.createElement('p');
newParagraph.setAttribute('class', 'myClass');
newText = document.createTextNode('this is a new paragraph');
myLocation = document.getElementById('parent_of_new_paragraph);


Other questions ideas:

Q: How do you organize your CSS? How do you come up with id and class names (what naming conventions do you use)?
A: While there are no right answers, there are best practices. Issues to look for are not having div mania, no inline CSS, no presentational markup, minimal use of classes, understanding the CSS cascade.
Q: What do you think of hacks? When should you use them? If you use them, how do you maintain them? What can be done to avoid needing to use box-model hacks? (if they aren’t pros, you can ask them what is the issue with x-browsers and the box model)
Q: What are the pros and cons of using tables for layout? Do you use tables? What are the pros and cons of tableless design? How do you generally layout your pages?
A: check for them NOT using tables
Q: What are some deprecated elements and attributes that you use, and in what instances do you use them?
A: List of deprecated elements and attributes.
Q: What is involved in making a website accessible? What are arguments you use to convince others to invest in making their web site accessible.
A:  Making sites accessible also makes them more search engine friendly (saves money), makes your pages accessible to the 20% of the population that has some type of disability (so you can make more money) and it’s the law in many places.
Q: Define what web standards mean to you? How do you implement web standards?
Standardized specifications for Internet markup languages such as HTML, CSS, and XML. Formulated by the W3 organisation, these standards enable people to create websites that will work in almost any browser or internet-enabled device, instead of being specific to certain versions of Internet Explorer or Netscape Navigator.

Q: In CSS, how can you make a form elments background-color change when the user is entering text? will this work in all browsers?
It’s possible to change the default look of form elements by styling their html tags: inputselect and textarea.
but it won’t work in all browsers
Q: How can you target an element in your HTML using the DOM?
by using the nodes of the DOm elements we can target any element on any event in HTML
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “’ type=’text/javascript’%3E%3C/script%3E”));
try {
var pageTracker = _gat._getTracker(“UA-1855756-5”);
} catch(err) {}


Web Design HTML Interview Questions & Answers

Web Design HTML Interview Questions &amp; Answers
1) Intrepret this statement: <strong>Michelle</strong>
a) It makes Michelle strong
b) It highlights Michelle as being strong
c) It will print out Michelle in bold font – correct answer
2) Tables can be nested (table inside of another table).
a) True – correct answer
b) False
3) Which is correct?
a) <b>Click Here<b>
b) <strong>Click Here<strong>
c) <b>Click Here</b> – correct answer
d) </strong>Click Here</strong>
4) Which of the following is a two sided tag?
a) DT
b) LI
c) DD
d) DL – correct answer
5) The Browser applies the feature of a tag until it encounters_____tag.
a) Quit
b) Closing – correct answer
c) Exit
d) Anti
e) Deactivate
6) _______are the HTML codes that control the apearance of the document contents
a) Tags – correct answer
b) Codas
c) Slashes
d) Properties
e) Code
7) What are the genral syntax for inline image?
a) src=img
b) src=image
c) img=file
d) img src=file – correct answer
e) image src=file
8) An HTML_____takes text in one format and changes it to HTML code.
a) Browser
b) Editor
c) Converter – correct answer
d) Processor
e) Parser
9) To create a link to an anchor, you use the______property in A tag.
a) Name
b) Tag
c) Link
d) Href – correct answer
10) HTML Tags are case sensitive.
a) True
b) False – correct answer
11) Relative path make your hypertext links______.
a) Portable – correct answer
b) Discrete
c) Uniform
12) A_____structure starts with a general topic that includes link to more specific topics.
a) Hierarchical – correct answer
b) Linear
c) Mixed
13) Which of the following path is supported by HTML?
a) Ralative
b) Defererenced
c) Absolute and Relative – correct answer
14) You cannot designate an inline image as a hypertext link.
a) True
b) False – correct answer
15) Because each computer differs in terms of what fonts it can display, each individual browser determines how text is to be displayed.
a) True – correct answer
b) False
16) You do not have to connect to the internet to verify changes to a Web page on your computer.
a) True – correct answer
b) False
17) You can combine structures e.g, linear and hierarchical.
a) True – correct answer
b) False
18) What is HTML stands for?
a) Hypertext Mailing List
b) Hypertext Mark Language
c) Hypertext Markup Language – correct answer
19) What is the tag for an inline frame?
a) Iframe – correct answer
b) Inframe
c) frame
d) inlineframe
20) Within the MAP tag, you use the AREA tag to specify the areas of the image that will act as a hotspot.
a) True – correct answer
b) False
21) Can you create an e-mail form with auto responder using form action
a) Yes
b) No – correct answer
22) What is the most widely use e-mail form script?
a) ASP
b) PHP – correct answer
c) Perl CGI
d) JSP
23) There are_____color names recognized by all version of HTML.
a) 6
b) 8
c) 256
d) 16 – correct answer
24) Software programs, like your Web browser, use a mathemathical approach to define color.
a) True – correct answer
b) False
25) If you want to increase the font size by 2 relative to the sorounding text, you enter +2 in the tag.
a) True – correct answer
b) False
26) What operator makes converts 00110011 into 11001100?
a) ~ – correct answer
b) !
c) &
d) |
27) The default statement of a switch is always executed.
a) True
b) False – correct answer
28) H1 is the smallest header tag.
a) True
b) False – correct answer
29) The page title is inside the____tag.
a) Body
b) Head – correct answer
c) Division
d) Table
30) _____refers to the way the GIF file is saved by the graphics software.
a) Dithering
b) Interlacing – correct answer
c) Balancing