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 f irm 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 conten t, 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().
SEOmoz has recently been interviewing applicants for a web developer position. Prior to conducting the interview, I wrote up a list of technical questions I wanted to ask. After interviewing, I decided to build upon this list and put together a larger one that everyone could use - both for interviewers and interviewees. The list is not specific to any particular type of development position, but I tried to balance it between both the design/html/usability side of things and the back-end/database/programming side. I'm just focusing on web development related questions - you should obviously ask the usual barrage of questions like "Why do you want to work for [some company?]" I'm not covering those types here. Also, this list isn't in any particular order. 1. What industry sites and blogs do you read regularly? This question can give you an idea of how in-tune they are with the latest industry trends and technologies, as well as how passionate they are about webdev. It'll help separate the
2.
3.
4.
5.
6.
7.
8.
people who do it as a career AS WELL as a hobby from those who might simply be in it for the big developer paychecks. _ Do you prefer to work alone or on a team? This is an important question to ask depending on the work environment. If your project is going to require close interaction with other developers it's very handy to have someone who has had that kind of experience. On the other hand, many developers thrive while going solo. Try to find a developer that fits your needs. _ How comfortable are you with writing HTML entirely by hand? (+exercise) Although their resume may state that they're an HTML expert, often times many developers can't actually write an HTML document from top to bottom. They rely on an external publisher or have to constantly flip back to a reference manual. Any developer worth a damn should at least be able to write a simple HTML document without relying on external resources. A possible exercise is to draw up a fake website and ask them to write the HTML for it. Keep it simple and just make sure they have the basics down watch for mistakes like forgetting the tags or serious misuse of certain elements. If they write something like: , it might be a good hint to wrap things up and call the next interviewee. _ What is the w3c? Standards compliance in web development is where everything is (hopefully?) going. Don't ask them to recite the w3c's mission statement or anything, but they should at least have a general idea of who they are. _ Can you write table-less XHTML? Do you validate your code? Weed out the old-school table-driven design junkies! Find a developer who uses HTML elements for what they were actually intended. Also, many developers will say they can go table-less, but when actually building sites they still use tables out of habit and/or convenience. Possibly draw up a quick navigation menu or article and have them write the markup for it. To be tricky, you could draw up tabular data - give them bonus points if they point out that a table should be used in that scenario :) _ What are a few of your favorite development tools and why? If they say notepad you've obviously got the wrong person for the job. Not only can this help you gauge their level of competence, but it'll also see if they match the tools everyone else uses in-house. _ Describe/demonstrate your level of competence in a *nix shell environment See how well they work without their precious GUI. Ask some basic questions like how they would recursively copy a directory from one place to another, or how you'd make a file only readable by the owner. Find out what OSs they have experience with. _ What skills and technologies are you the most interested in improving upon or learning? Find out if their future interests match the direction of the position (or the company in
general). _ 9. Show me your portfolio! A portfolio can say a lot about a developer. Do they have an eye for aesthetics? Are they more creatively or logically oriented? The most important thing is to look for is solid, extensive, COMPLETED projects. A half dozen mockups and/or hacked-out scripts is a sign of inexperience or incompetence. _ 10. What sized websites have you worked on in the past? Find a developer that has experience similar in size to the project you're putting together. Developers with high traffic, large scale site expertise may offer skills that smaller-sized developers don't, such as fine tuning apache or optimizing heavily hit SQL queries. On the other hand, developers who typically build smaller sites may have an eye for things that large scale developers don't, such as offering a greater level of visual creativity. _ 11. Show me your code! Whether it's plain old HTML or freakishly advanced ruby on rails, ask for code samples. Source code can say more about a persons work habits than you think. Clean, elegant code can often be indicative of a methodical, capable developer. A resume may say 7+ years of perl experience, but that could mean 7 years of bad, unreadable perl. Also, make sure you ask for a lot of source code, not just a few isolated functions or pieces of HTML. Anyone can clean up 20-30 lines of code for an interview, you want to see the whole shebang. Don't ask for a full, functional app, but make sure it's enough that you can tell it's really what their code is like. _ 12. What are a few sites you admire and why? (from a webdev perspective) Find out what inspires them. While it doesn't necessarily "take one to know one," a great developer should always have a few impressive favorites. _ 13. Fix this code, please. Give them some broken code written in the development language they are expected to know for the position. Have them go through it line by line and point out all the mistakes. _ 14. I just pulled up the website you built and the browser is displaying a blank page. Walk me through the steps you'd take to troubleshoot the problem. This is a great question to determine how well rounded their abilites are. It tests everything from basic support skills all the way up to troubleshooting the webserver itself. _ 15. What's your favorite development language and why? What other features (if any) do you wish you could add to this language? Asking about feature additions is a particularly valuable question - it can reveal if they're skilled in programming in general or if their skillset is pigeonholed into their language of choice. _
16. Do you find any particular languages or technologies intimidating? I've often felt that the more I learn, the less I feel like I know. Solving one mystery opens up ten others. Having the interviewee tell you their faults can reveal a lot about what they know. _ 17. Acronym time (oh boy!) Some might argue that knowing what acronyms actually stand for is trivial, but there are certain acronyms that a developer should have hard-wired into their head ( HTML or CSS, for example). This is the kind of question that might be better reserved for the phone interview to weed out those who are very unqualified. _ 18. What web browser do you use? There is a right answer to this question: all of them. A competent developer should be familiar with testing cross-browser compatibility by using all the major web browsers. Obviously they'll have a primary browser they use for surfing, but their answer to this question might be a good way for you to segue to asking how extensively they test crossbrowser issues. Also, if it's some kind of css/html position seeing what toolbars they have installed can be a good metric of their skillset (I personally find the web developer toolbar for firefox to be invaluable) _ 19. Rank your interest in these development tasks from 1 to 5 (1 being not interested at all, 5 being extremely interested) Write up a list of tasks the job requires. Having them rank these items according to their interest level can help you find who is the best suited for the position. I know debugging uncommented perl code from 1997 sounds seriously awesome to me. _ 20. What are a few personal web projects you've got going on? Almost all developers have personal web projects they like to plug away at in their spare time. This is another question that can help differentiate the passionate developers from the clock-punchers. It's also a good question to end an interview with, as it's usually easy (and fun) for them to answer. ators). 4. Tell me what this CSS selector does: img[src=^photos]
CSS questions on web developer interviews can take many forms. Some show a bit of styled HTML and ask for the CSS to generate it. That’s great, but it’s time-consuming. I like this approach because it shows a relatively complicated CSS selector with an arcane option. Knowing that it is an attribute selector (in this case, for img elements) is a passable answer in my book. Also knowing that it selects img elements whose src attribute starts with the word “photos” earns bonus points. Writing a specific selector like this is somewhat rare, so not knowing that the caret (^) indicates “starts with” wouldn’t be a problem for me as lon g as they said something like “I’d have to look it up.”
5. Tell me some of the ways you can reduce the load time of a web application you’ve written?
This is another open-ended question that can allow the candidate to shine. I would look for any number of points to be touched on, including:
optimize images to be no greater than screen-resolution, and saved at a compression level that squeezes the file size as much as the visual integrity of the image will allow; use CSS-based image sprites instead of multiple images to reduce HTTP requests; eliminate images wherever possible and rely instead on robust CS S; minimize all javascript files (using tools like jscompress.com or others) to reduce the amount of data transfered; combine external javascript files to reduce HTTP re quests; watch the application load using a tool like YSlow or webkit’s resource inspector to identify any bottlenecks; and analyze database queries and any javascript functions (especially any that iterate over the DOM) to see whether they could be optimized.
