HTML Questions/Answers

What’s a doctype do?

Basically, the DOCTYPE describes the HTML that will be used in your page. Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect DOCTYPE can trigger quirks mode.

What’s the difference between standards mode and quirks mode?

There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5 for Windows that is required not to break existing content on the Web. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.

What are the limitations when serving XHTML pages?
Are there any problems with serving pages as application/xhtml+xml?

Browsers will display xml parse errors if your page contains invalid code.

However that serving your pages as application/xhtml+xml will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.

How do you serve a page with content in multiple languages?
What kind of things must you be wary of when design or developing for multilingual sites?

  1. Character encoding
  2. Language direction
  3. Using the right language code
  4. Font sizes

What are data- attributes good for?

Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page

Describe the difference between cookies, sessionStorage and localStorage?

Browsers that implement the “Web Storage” draft specification define two properties on the Window object:localStorage and sessionStorage. Both properties refer to a Storage object—a persistent associative array that maps string keys to string values. Storage objects work much like regular JavaScript objects: simply set a property of the object to a string, and the browser will store that string for you. The difference between localStorage and sessionStorage has to do with lifetime and scope: how long the data is saved for and who the data is accessible to.

Session Storage = non persistent and scoped only to the current window
localStorage = persistant and scoped to the domain.

Cookies = the old school way of doing all of the above. Stores name/value pairs per domain.

CSS Questions/Answeres

Describe what a “reset” CSS file does and how it’s useful?

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.  There isn’t any default color or background set for the body element, for example. In other words, this is a starting point, not a self-contained black box of no-touchiness.

Describe Floats and how they work?

Float is a CSS positioning property. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected.

Note: Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed.

What are the various clearing techniques and which is appropriate for what context?

1- Floating the container
If you float an element containing floats, it will encompass its content. The side-effect of this is that we add another floated element to the page, while we most of the times want it to behave as a regular block element. That is solved by applying a width of 100% to the container as well, so it forces a line-break before the content after it.


  • Setting a width to 100% might collide with desired padding.
  • IE 6 seems to add an extra bottom margin in some cases.

2- Adding Overflow: Hidden To The Container
If you add overflow: hidden to the containing element, it will automatically adjust its height and take the floated children into account.

3- Generating Content Through CSS (recommended)
Another alternative is to use the CSS pseudo-class :after to generate content after the containing element, using it to clear floats and then hiding itself. Personally, I don’t like this approach since it generates content to the page that has nothing to do there in the first place.

    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;


  • Not IE 6 nor IE 7 supports the :after pseudo-class, so you need to apply a hasLayout fix for both of them. Note that IE 7 also supports a hasLayout fix.

Explain CSS sprites, and how you would implement them on a page or site?

CSS Sprites is a method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates.

More info:

What are your favourite image replacement techniques and which do you use when?

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text

More info:

CSS property hacks, conditionally included .css files, or… something else?

property hacks include both of :

1- Conditional comments to set classes on the html element

<!--[if lt IE 7 ]> <html> <![endif]-->
<!--[if IE 7 ]>    <html> <![endif]-->
<!--[if IE 8 ]>    <html> <![endif]-->
<!--[if IE 9 ]>    <html> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

 2- Browser specific CSS hacks

.someclass {
    *color: blue; /* IE 7 and below */
    _color: blue; /* IE 6 */

/* IE6, IE7 - star hack */
.someclass  { *color: blue; }

How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?

There are 3 ways we can follow:

  1. Do nothing except follow web standards.
  2. Create a completely separate layout
  3. Create one layout, but add code to optimize it depending on the device and browser looking at it.(That what I use) How?Use CSS Media Queries to create a specific version of my website (like mobile website/layout)

Have you ever used a grid system, and if so, what do you prefer?

Yes, Bootstrap and YUI3

How do you optimize your webpages for print?

In the case of a print stylesheet when the page is printed this functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print.

You can follow my way:
1- Create A Stylesheet For Print.
2- Avoid Unnecessary HTML Tables.
3- Know Which Portions Of The Page Don’t Have Any Print Value. (.no-print { display:none; })
4- Use Page Breaks
5- Size Your Page For Print.
6- Test!

Have you used or implemented media queries or mobile specific layouts/CSS?


More info:

What are some of the “gotchas” for writing efficient CSS?

  1. Use a CSS reset
  2. Clear things up
  3. Box Model
  4. IE is bad but have to deal with it with tricks
  5. Get Firebug or Chrome inspector

How would you implement a web design comp that uses non-standard fonts?

Using @font-face and Webfonts (font services like: Google Webfonts, Typekit etc.)

Explain how a browser determines what elements match a CSS selector?

Browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly

Javascript Questions/Answers

Explain event delegation?

JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.

More info:

Explain how this works in JavaScript?

Within JavaScript your code will always have some form on context. The way context works is through the this variable. The this variable will always refer to the object that the code is currently inside of. Remember that global objects are actually properties of the window object. This means that even in a global context, the this variable will still refer to an object (BOM Browser Object Model || window object).

More info:

How do you go about testing your JavaScript?

I prefer QUnit because it’s developed by the team of jQuery.

More info:

AMD vs. CommonJS?

CommonJS is a project to define a common API and ecosystem for JavaScript. One part of CommonJS is the Module specification. Node.js and RingoJS are server-side JavaScript runtimes, and yes, both of them implement modules based on the CommonJS Module spec.

AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD. One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously – that means that modules are only loaded as they are needed, as opposed to loading all modules up front.

AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment – for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browser

What is hash table?

It is also known as hash map is a data structure used to implement an associative array.It is a structure that can map keys to values.

How it works?

A hash table uses a hash function to compute an index into an array of buckets or slots, from which the correct value can be found.

See the below diagram it clearly explains




In a well-dimensioned hash table, the average cost for each lookup is independent of the number of elements stored in the table.

Many hash table designs also allow arbitrary insertions and deletions of key-value pairs.

In many situations, hash tables turn out to be more efficient than search trees or any other table lookup structure.


The hash tables are not effective when the number of entries is very small. (However, in some cases the high cost of computing the hash function can be mitigated by saving the hash value together with the key.)


They are widely used in many kinds of computer software, particularly for associative arrays, database indexing, caches and sets.

Explain why the following doesn’t work as an IIFE: function foo(){ }(); ?
What needs to be changed to properly make it an IIFE?

The Immediately-Invoked Function Expression (IIFE) has it’s syntax to work like: (function(){})(); so to make this function work it should be (foo(){})()


What’s the difference between a variable that is: null, undefined or undeclared?
How would you go about checking for any of these states?

Undeclared variables are those that are not declared in the program (do not exist at all),trying to read their values gives runtime error.But if undeclared variables are assigned then implicit declaration is done .
Undefined variables are those that are not assigned any value but are declared in the program.Trying to read such variables gives special value called undefined value.

while null is value of nothing that means the variable declared and have a null value.

To check we can use typeof operator like that:

if (typeof(a) == "undefined") {
  // this will be executed
  alert("a is undeclared or undefined");
else {
  alert("a is declared and defined");


What’s a typical use case for anonymous functions?

we can use them as callback functions as you can pass it as a parameter to an other function.

What’s the difference between host objects and native objects?

Both terms are defined in the ECMAScript specfication:

native object
object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment.

NOTE Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program.

host object
object supplied by the host environment to complete the execution environment of ECMAScript.

NOTE Any object that is not native is a host object.

A few examples:

Native objects: Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace, array methods, …

Host objects (assuming browser environment): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, …

What’s the difference between .call and .apply?

The main difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly.

Pseudo syntax:

theFunction.apply(valueForThis, arrayOfArgs), arg1, arg2, …)


Explain Function.prototype.bind?

Creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

var x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }

module.getX(); // 81

var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object

// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81


Difference between document load event and document ready event?

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn’t have to wait for all content to load.


What is the arity of a function?

the number of formal parameters defined for a function

A function can determine its own arity (length) like this:

// For IE, and ES5 strict mode (named function)
function foo(x, y, z) {
    return foo.length; // Will return 3

// Otherwise
function bar(x, y) {
    return arguments.callee.length; // Will return 2


What’s the difference between an “attribute” and a “property”?

Attributes carry additional information about an HTML element and come in name=”value” pairs

Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className with a value of my-class

So Attributes are in your HTML text document/file, whereas properties are in HTML DOM tree



Front-end Job Interview Questions and Answers

If you got an interview as Front-End job interview getting prepared is so important thing you have to do from the moment you got interview call/email, You can find a lot of resources for Front-end Job Interview Questions but nothing could be compared with but you will find yourself with a lot things to review so I will summarize for you what you can do so quick and efficient at the way.

Note: Keep in mind that many of these questions are open ended and could lead to interesting discussions that tell you more about the person’s capabilities than a straight answer would.

So see you next week with all answers…