Front End Developer Interview Questions

I have been on both ends of the iterview table for front end web development. I decided to create a list of HTML, CSS, JavaScript and jQuery questions to help everyone involved. I will continue to add questions and improve the depth of the answers over time. Many thanks to all who helped!



HTML / General Interview Questions

What is the difference between form get and form post?

Get
With GET the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The form data is restricted to ASCII codes. Because URL lengths are limited there can be limitations on how much form data can be sent.

Post
With POST all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser bar.

POST and GET correspond to different HTTP requests and they differ in how they are submitted. Since the data is encoded in differently, different decoding may be needed.

List some common IE6 bugs and how you dealt with them?

Ie6 is not dead, just ask China which represents a nice chunk of the worlds online population. Your pages should at least be functional on IE6, unless you dont care about half the worlds population. See the links below for a good compilation of ie6 bugs and solutions.

What is the importance of the HTML DOCTYPE?

The doctype declaration should be the very first thing in an HTML document, before the html tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

What are some of the online tools and resources you use when you have a problem? Where do you go to ask questions?

This question really just looks for how resourceful the candidate is, it also reflects on their problem solving process and may lead you to ask more questions.

What is web a application?

A great question to feel out the depth of the applicants knowledge and experience.

A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.

Must read:

CSS Interview Questions

Explain the difference between visibility:hidden; and display:none; ?

Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes up absolutely no space as if it was never there.

I would show you but you would not see anything! Good example here http://www.w3schools.com/css/css_display_visibility.asp

Name three ways to define a color in html?

1) Hex
2) RGB
3) Name (ie red)
.colorMe { color:red; color:#ff0000; color:rgb(0,0,255); }

How do you clear a floated element?

A floated element is taken out of the document flow. To clear it you would need to do a clear:both or try overflow:auto on the containing div.
Wrapper Div
Floating Div
Floating Div

test
test
test


Wrapper Div
Floating Div
Floating Div

test
test
test
clear:both; or overflow:auto on containing div

Learn more here http://www.sitepoint.com/simple-clearing-of-floats/

What is a sprite? How is it applied using CSS? What is the benefit?

- A image sprite is a collection of images put into one single image.
- Using css positioning you can show and hide different parts of the sprite depending on what you need.
- Sprites reduces the number of http requsts thus reducing load time of page and bandwidth

Buy Buttons using Sprite as background:

Both buttons use the same background image. The only differece is in the positioning.
 

Here is the actual background image:
And the CSS. <style> .orangeBuyBtn { background: url('buyButtons-bg.gif') repeat-x 0 0; border-color: #5B5752 #6B6B6B #808080; border-style: solid; border-width: 1px; color: #FFFFFF; cursor: pointer; font-size: 14px; font-weight: bold; } .greenBuyBtn { background: url('buyButtons-bg.gif') repeat-x 0 -24px; border-color: #5B5752 #6B6B6B #808080; border-style: solid; border-width: 1px; color: #FFFFFF; cursor: pointer; font-size: 14px; font-weight: bold; } </style> Learn more about sprites at Smashing Magazine. Also see the Site Point article or this W3School Article.

JavaScript Interview Questions

What is the difference between == and === ?

The 3 equal signs mean "equality without type coercion". Using the triple equals, the values must be equal in type as well.

== is equal to
=== is exactly equal to (value and type)
0==false // true
0===false // false, because they are of a different type
1=="1" // true, auto type coercion
1==="1" // false, because they are of a different type
Resources for this answer:

Where do you place your JavaScript on the page?

It may depend on what you are using it for. There is some debate on this but generally a good question to ask to get an understanding of the JS knowledge. Answers:

What is a javascript object?

A collection of data containing both properties and methods. Each element in a document is an object. Using the DOM you can get at each of these elements/objects and do some cool sh*t.

Describe what event bubbling is?

Event bubbling causes all events in the child nodes to be automatically passed to its parent nodes. The benefit of this method is speed because the code only needs to traverse the DOM tree once.

Describe what "this" is in JavaScript?

In JavaScript, 'this' normally refers to the object which 'owns' the method, but it depends on how a function is called.

What is a closure?

Closures are expressions, usually functions, which can work with variables set within a certain context. Or, to try and make it easier, inner functions referring to local variables of its outer function create closures. Resources for this answer:

What is Global Namespacing?

Resources for this answer:

What type of object system does JavaScript support?

Resources for this answer:

jQuery Interview Questions

Using jQuery how would you hide the image when the user clicks it for the following code snippet?

<div class="content"> <p>Some Content Here</p> <p class="loader"><img src="ajax-loader.gif"></p> </div>

Some Content Here (click the image)

$(document).ready(function(){ $('.loader img').click(function() { $('.loader img').hide(); \\ $('.loader img').hide(); }); });