Web Developer Interview Questions:

The main technologies required for a web developer are CSS, HTML and JavaScript. A good web developer also needs to have a grasp of and interest in both web standards and accessibility. While most web developer roles require other technologies such as Unix, Apache and server management, MySQL & PHP or SQL & ColdFusion or other dB and programming technologies, CVS, Perforce, or other source control management interfaces, I am only going to cover the technologies that span all Web Developer job descriptions: HTML, Web Standards and Accessibility, CSS and JavaScript.

The main skill I look for in a web developer is intelligence*, a desire to learn and an adoration of web standards. These questions target knowledge rather than capacity to learn. So, for each question remove 2 points if the answer, whether correct or not, sounded like it was quoted from a text book or this blog entry (unless, of course, you are interviewing me). Add points for interviewee efficient thought processes: if they didn’t know the answer to start with but figured it out in the end.

Accessibility Interview Question

Question

Tell me some considerations in selecting font size?

Answer

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

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?

Answer

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 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

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.

Answer

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

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 Array / XHTML Form Interview Question

Question

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

  alert(document.forms["myform"].elements["field"].value);
 alert(document.forms[1].elements[1].value);
 alert(document.myform.field.value);

Answer:

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

Question:

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

Possible Answer:

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

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: Check to ensure that they separate structure and semantics first from presentation later? Do not ask about this during HTML, but do in webstandards.

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: 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?

Q: In CSS, how can you make a form elements background-color change when the user is entering text? will this work in all browsers?

Q: How can you target an element in your HTML using the DOM?