Web Developer Interview Questions

HTML, CSS, JavaScript, and jQuery Interview Questions

If you are looking for a job these days as a front-end developer, ui developer, ux developer, or web developer then these questions, answers, and resources should be very useful. Some of them are real questions from interviews. These are mostly intermediate and advanced questions, and I added some library specific questions (jQuery is most popular) as well as general questions that you might encounter.

General Interview Questions for Developers

You should be prepared to talk about your strengths, weaknesses, goals, etc. If you currently have a job you will probably asked why you are leaving your current employer. You should generally have an idea where you want to be in your career in 5 years from now. You might be asked questions about your daily activities and what you like about your job. Often, you will be asked what is one thing that you dislike about work. You might also encounter questions about working on teams vs working alone, communication, culture, Agile methodology, etc. Here are some sample questions:

Do you have any experience in HTML5 or CSS3?

Employers want to hire developers that are passionate about their work and developers that are up to date on emerging technologies and best practices. Even if you have not done much in HTML5 or CSS3 you should know what they are all about. Most importantly, you should know that only modern browsers support CSS3 methods and HTML5 tags, and support differs for each browser. Thus, if your code needs to support old browsers like IE6 you might not have much experience with HTML5 or CSS3.

But, that is no excuse. You should know about the new popular HTML5 tags, like audio, video, canvas, placeholder, etc and their pros and cons. The video tag in HTML5, for example, allows native browser support for videos without the need for something like Flash, however, different browser support different video formats so a big downside to the video tag is that you need to convert your videos into different formats. Finally, you should know that even if you need old browser support, you can still use HTML5 and CSS3 with the help of a JavaScript library like Modernizr that will allow you to detect lack of support in certain browsers and give you a way to implement the missing functionality with your code.


Do you have any exposure to Mobile Development?

Mobile is hot right now and if you do a lot of reading on the industry you should at least be thinking about Mobile Development. Even if you have never done much with Web ToolKit or Android OS, you should at least have some understanding on the difference between Desktop and Mobile design and development. In terms of design, there are many challenges as your viewable area is significantly reduced. In terms of development, looking at jQuery for mobile is a good start. Take some time to read about Mobile development.


What websites or blogs do you read?

This is another question where the employer wants to make sure that you are well read on industry's best practices and emerging technologies. Even if you do not read blogs, there are some websites that should stand out. I would think it is kind of weird if you have never heard of TechCrunch, A List Apart, or Stack Overflow.


What is the difference between progressive enhancement and graceful degradation?

Both are important user experience strategies in web development. The older one, graceful degradation, aims to provide an alternative version of your functionality to users with older browsers. Users on IE6, for example, can still use the website but with more basic functionality. The newer one, progressive enhancement, starts with a baseline of usable functionality available for all browsers and increases the richness of the user experience in more modern browsers.

Here is a great quote from a good article on the differences between these two techniques:

In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

These articles go even more in depth: Understanding Progressive Enhancement and Graceful Degradation & Progressive Enhancement


What are some CMS and/or Frameworks that you know?

Most developers work in a certain framework or CMS and you should definitely know some of them. WordPress and Drupal are probably most popular Content Management Systems. There are many more. Two popular frameworks are Symfony and Django. Many e-commerce companies nowadays use Magento, which is an eCommerce software platform. If you know any of these, be prepared to talk about some pros and cons of each CMS or framework.


Tell me something about the http protocol?

HTTP stands for Hypertext Transfer Protocol and it is the foundation of data communication for the world wide web.

Here is a good article from Wikipedia:

HTTP functions as a request-response protocol in the client-server computing model. In HTTP, a web browser, for example, acts as a client, while an application running on a computer hosting a web site functions as a server. The client submits an HTTP request message to the server. The server, which stores content, or provides resources, such as HTML files, or performs other functions on behalf of the client, returns a response message to the client. A response contains completion status information about the request and may contain any content requested by the client in its message body.


For more general interview questions for web developers check out these links: 20 Interview Questions for Web Developers and General Interview Questions.

HTML Interview Questions

Here are 5 questions to start:

1. What is the W3C and what does it do?
2. When do you use a HTML table?
3. How can you improve the accessibility of an online form?
4. What are meta tags and why are they used?
5. What are some differences between a DIV and a SPAN?

For more general HTML questions for web developers check out these links: HTML interview questions and 55 HTML Interview Questions.

JavaScript Interview Questions

What is the main difference between window.onload and onDocumentReady?

Both functions are used to perform tasks when the page is loaded in the browser but they have important differences. Most importantly, "window.onload" will execute code when browser has loaded the DOM tree and all other resources like images, objects, etc, while onDocumentReady allows you to execute code when only the DOM tree has been built, without waiting for images to load. Thus, you can start scripting agains the DOM much quicker with onDocumentReady. Another important difference is that window.onload is not cross-browser compatible while using something like jQuery's document.ready() will work nicely on all browsers.


What is the difference between undefined value and null value?

In JavaScript, undefined means that a value has been declared but has not yet been assigned a value, such as null, which can be assigned to a variable as a representation of no value. If a value is null, it was assigned programmatically, as JavaScript never sets a value to null on its own. Also, undefined and null are two different types: null is an object while undefined is a type itself (undefined).


Explain the difference between synchronous and asynchronous JS request?

Most importantly, synchronous request blocks JavaScript engine until the interaction with the server is complete. The user cannot click away, cancel request, or go to another tab during this time. It is bad for user experience and that is why we have AsynchronousJAX.


Explain briefly the difference between normal array and associative arrays?

This kind of a question could be rephrased as "explain the difference between a['one']='dog' and a[one]='dog'" because the main difference between a normal array in JavaScript and associative arrays is that associative arrays use Strings instead of Integer numbers as index. But this is also kind of a trick question as JavaScript does not support associative arrays, they are objects and not really an array. More information about JavaScript arrays can be found by reading the following articles: Objects as associative arrays and Mastering Javascript Arrays.


Here is a link to more JavaScript Interview Questions: Advanced JavaScript Interview Questions

CSS Interview Questions

What is a z-index?

Z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of an element with a lower stack order.


Explain how you solved some css problem?

You should be able to explain a CSS bug that you worked on and how you went about solving it. You could talk about IE issues, take a look at these CSS problems that often need solutions for Internet Explorer.


Explain the benefits of CSS sprites?

Most importantly there is a performance benefit as CSS sprites reduce page load time by minimizing HTTP requests for different images. Usually there is also an accessibility benefit as the code degrades gracefully and shows text to screen readers, search engines, and browsers without CSS. I also think that CSS sprites are easier to manage as you are working with one image instead of many small images. Finally, you should also know how to implement CSS sprites.

jQuery Interview Questions

What are some benefits of using jQuery?

You should be able to vocalize the benefits of jQuery. It is lightweight, open source, has lots of plugins, and jQuery has a great community and user support. It is incredibly good at matching CSS selectors, it supports chains of actions, and it has many useful AJAX methods. These are just some basic reasons. You could also add that jQuery fixes many JavaScript cross-browser issues.


Name some jQuery methods.

There are so many, so you definitely should know some from your memory. How about hide(), show(), or toggle().


Here is a link to more jQuery specific interview questions: jQuery Interview Questions

More Resources for Interview Questions

1. Commonly asked JavaScript questions
2. Many JavaScript Interview Questions
3. JavaScript Quiz4. Another JavaScript Test
5. JavaScript Functional vs Object Oriented Programming
6. Building an Object Oriented JavaScript Framework
7. Web Developer Interview Questions
8. Interviewing Developers

Grabbing only Pictures out of an XML feed

Pulling Images from feeds with Google AJAX Feed API and Regular Expressions

Recently, I have been building a super aggregator and search engine website using various google APIs. The search engine is using the Google search API and most of the rss and xml aggregation is handled using the Google AJAX Feed API. But, in order to retrieve only the images out of the xml feed, I had to make modifications to the standard Google Feed API.

The xml feed had some images and some other links and text, but I just wanted to grab the linkable pictures so I had to write an extra function and use regular expressions to get rid of the content i did not want. I assume that this piece of code could be useful to other who want to just pull images out of an xml feed that contains more than just pictures.

Here is the JavaScript excerpt:

[sourcecode language="JavaScript"]
<script type="text/javascript">
google.load("feeds", "1");

function replaceit(matches){
var pattern = new RegExp("<img([^>]+)(\s*[^\/])>", "g");
return matches.match(pattern);
}

function initialize() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/TechCrunch?format=xml");
feed.setNumEntries(20);

feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var wow = replaceit(entry.content);
div.innerHTML = wow;
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
[/sourcecode]


Here is how the code works:

You define the feed on line 10, and on line 11 you set the number of entries you want to pull from the XML feed with set setNumEntries() function. If the feed loads successfully line 16 loops through the 20 items and pulls the content out of the feed. The content contains some text and links that I need to get rid of so line 19 runs the content through a function I set up on line 4.

The function uses regular expressions to retrieve the img tags and only return the images. Line 21 injects the results into the div specified on line 15 and it uses appendChild to get it done. Hopefully, this is useful to someone!

Feeds in your Blog with Google Ajax Feed API

Put RSS Feeds in your WordPress blog without extra plugins or jQuery

I started using the Google Ajax Feed API and i really like it, so I decided to write a WordPress plugin that will use the API to place rss or xml feeds on your wordpress blog. There are plugins out there already that allow you to put feeds on your blog, and one of them actually uses the Google API, it's called jQuery Google Feed Plugin but as the name suggests it also uses jQuery. jQuery is a wonderful JavaScript library but sometimes I use prototype and I don't want to load both libraries. Actually, I don't want to load any extra library, and after looking at the simplicity of implementing this, I decided that writing a wordpress plugin for this is a waste of time. Anyone can insert feeds inside their wordpress blog with just a couple quick steps:

First, get your own free Google API key and insert this javascript in the header.php file right between the <head> and </head> tag:

[sourcecode language="javascript"]
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-GOOGLE-API-KEY-HERE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.setNumEntries(10);
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>

[/sourcecode]

Now, go anywhere in your blog where you want the feeds to appear and create the div where you want the results to be displayed:

<div id="feedControl"></div>

This feed technique will allow you to insert as many feeds as you want into your blog and configure the titles, number of entries, and the style via css.

feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg"); - Here the feed url is http://www.digg.com/rss/index.xml and feed title is Digg, you can change these or add another feed using the same format.

feedControl.setNumEntries(10); - The number 10 here represents how many entries you want to display, change it if you want to show less or more than 10 entries per feed.

If you don't like this technique and still want to insert feeds into your WordPress blog, you can try these plugins:

• FeedWordPress


• Friends RSS Aggregator


• inlineRSS


• Bloglines RSS Aggregator Widget 1.0


• HeadlineAnimator


• aggregated blog feeds

Link Equity or Link Popularity

Your web page's link equity is a very significant factor that affects your placement in search engine result. Link popularity is another name for link equity and it refers to relevance of a web page by looking at its links. It's a mathematical method to calculate your online existence. Simply, a web page with more quality incoming links is more important then another web page with fewer incoming links. Incoming links refers to links that are coming from other websites to your web page. Quality of the incoming links is very important as not all incoming links are counted equal. In fact, the quality of incoming links counts more than the quantity.

Over time, your website will acquire many incoming links and search engines will give you better results. Thus, if you make changes to your website through some redesign or redevelopment, remember not to lose your link popularity. If you change your URL structure, you should utilize a 301-permanent-redirect to transfer the equity. Otherwise, you will lose search engine ranking equity, bookmark equity, and direct citation equity.

The 301 status code notifies the search engine that the resource has been "moved permanently" to a new location. It also tells search engines that the link equity from the previous URL should be credited to the new one, but in practice, it may take some time for this to occur. There are many ways to code this redirect, below there are php and .htaccess examples:

How to do a 301 Redirect with PHP:
[sourcecode language="php"]
<?php Header( "HTTP/1.1 301 Moved Permanently" ); Header( "Location: http://www.new-url.com" ); ?>
[/sourcecode]

How to do a 301 Redirect with .htaccess:

To Move a single page:
Redirect 301 /oldpage.html http://www.example.com/newpage.html

To change domain names:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^.*oldwebsite.com$ [NC]
RewriteRule ^(.*)$ http://www.preferredwebsite.net/$1 [R=301,L]