P. 1
Web Developer Interview Questions

Web Developer Interview Questions

|Views: 58|Likes:

More info:

Published by: Chandika Chathura Kumara on Dec 13, 2010
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less





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. Please have a look at Web Developer Resume Screening for thought on how to filter through resumes to find good Web Developer applicants.
* Note: Intelligence ≠ Education. A Masters or PhD may just mean that they had the time and money to delay getting a job. Look for people who can think, not ones who regurgitate text books.

Please note that these questions are two years old. … and … quoting @seldo: “I am adding ‘Can you use the men’s room without peeing all over the floor?’ to my list of phone screen interview questions.” Generally not necessary if interviewing women.

XHTML, CSS & JavaScript Web Developer Applicant Questions
XHTML Web Standards Interview Question
Question: What is a DTD? What DTD do you generally use? Why? Pros and cons. Answer See the bottom half of DTD: the Document Type Declaration Answer Rating: 1. Completely wrong answer though pretends to know it 2. I don’t know (I give points for honesty), trying unsuccessfully but honestly to give the right answer 3. Knowledge of the definition, but doesn’t know why they are used. 4. Knowledge of which one to use and why 5. Explanation of Quirks mode versus Regular mode and analysis of which one is best for different media

PPK’s Quirksmode explains it well. If the display is set to none. block. B and D . the element being hidden still occupies its same place in the layout of the page. the element does not occupy any space on the page — as if it didn’t exist.. If the next sibling is positioned or floated. block or list-item. The <img> is an inline element. 2. depending on the element. Answer Rating 1. 5. Doesn’t know Knows the answer to A Knows the answer to A and D Knows the answer to A. without the use of the term !important. such as ems. if it is before a block level element that is not floated or absolutely positioned. 3. 4. Answer Rating 1. uses <font> tag Gives an answer using pixels using CSS Explains that font size should be declared using relative font sizes Explains that font size should be declared using ems or percentages Gives the answer above 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.Accessibility Interview Question Question Tell me some considerations in selecting font size? Answer Font sizes should be declared using relative measurement values. run-in all values: inline | block | list-item | run-in | compact | marker | table | inline-table | table-rowgroup | table-header-group | table-footer-group | table-row | table-column-group | tablecolumn | table-cell | table-caption | none | inherit default value: inline. Run-in should make the run-in element be the first line of the next sibling block level element. 2. There are issues with browser font size enlarging which can be rectified via CSS. 4. The w3schools lists table display values. inline. via a style sheet. list-item. When visibility is set to hidden. 3. then the run-in element will be a block level element instead of appearing in-line.

4.} Answer Rating 1. nor does their content flow around the positioned element. e) IE treats a position like a z-index reset. knows the html>body hack and * html hack . Answer Rating 1. or be overlapped by them. 5. Doesn’t know 2. The positioned element does not flow around the content of other elements. 2. 6. fixed. red in newer browsers. but no hacks 3. 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. ask about IE z-index issues with positioned elements. Knows the answer to C too! 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. B & C Knows A-D Knows E too CSS Interview Question Question: Write a snippet of CSS that will display a paragraph in blue in older browsers. 3. Knows how to declare one color. 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.5. absolute. Doesn’t know Knows 4 out of 5 answers in part A Knows A & B Knows A. 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. An absolutely positioned element may overlap other elements. relative. Answer a) Values for position: static.

Gives you the right answer and explains why the CSS won’t validate. 5.and other incorrect answers verbally explains the theory but doesn’t know how to do it correct explanation using inline event handlers or inline code discusses and knows how to implement javascript event listeners Explainst how you include JS within an XHTML document and ensure it validates using CDATA.field. and. instead of the above answer.value). 2. alert(document. Knows all the hacks. 4.elements[1]. explains Basic Javascript Array / XHTML Form Interview Question Question Are the following all equal.forms["myform"].elements["field"].forms[1]. . uses a valid hack.value). <a href=”javscript:function()”> . or. Basic Javascript Interview Question Question: What is the correct way to include JavaScript into your HTML? Answer: See Including Javascript in XHTML for answers. and that the fieldinput element is the second element within that form. 3. Answer Rating: 1. other than conditional IE comments. if so.4. what would your code look like to make the following all equal the same thing: alert(document. but doesn’t validate or uses conditional comments in the HTML 5. alert(document.myform. answer: <form name="myform" method="post" action="something"> <input name="anything" value="anything" type="something" /> <input name="field" value="something" type="something" /> </form> Answer includes knowing that the form is the second form on the page.value).

2. etc. “you can’t”).createTextNode('this is a new paragraph'). newParagraph. not duplicating IDs.e. Use JavaScript. and the element is the second one in the form. Wrong Answer (i. 3. I don’t know. Doesn’t know how to code forms and doesn’t know that the first index of an array is 0. Answer Rating: 1.Answer Rating 1. but omits something like doesn’t know that the form needs to be the second one on the page. 2. with no knowledge or incomplete knowledge of how that is done. Has no clue how to do it to start. 4. but can figure it out with guidance: extra points for the quick learner! Other questions ideas: . 5. Would know how to do it if they actually put thought into it. such as screen readers not knowing that text has changed. but not really knowing.getElementById('parent_of_new_paragraph).appendChild(newText).setAttribute('class'. 'myClass'). Explanation of how to do it (worth 3 points) and explanation as to issues that arise when doing it. Codes everything correctly JavaScript Interview Question Question: How do you dynamically add a paragraph with stylized content to a page? Possible Answer: newParagraph = document. and then add that node as a child of the parent element (the above example) 4. 3. but not both. add content to the node.appendChild(newParagraph). add a class attributes to that element. Suggesting innerHTML. Able to explain how you create a node. newParagraph. Or explanation of accessibilty issues surrounding this. IE6 and IE7 not applying styles included with added content. Codes the form correctly.createElement('p'). myLocation = document. but uses ID instead of name 5. newText = document. myLocation. Knows either how to code forms with valid XHTML or that array starts at 0. Knows how to code forms but not correctly.

understanding the CSS cascade. Issues to look for are not having div mania. minimal use of classes. no presentational markup. no inline CSS. how can you make a form elments 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? . Q: What are some deprecated elements and attributes that you use.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. 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. Making sites accessible also makes them more search engine friendly (saves money). but do in webstandards. 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. Q: What do you think of hacks? When should you use them? If you use them. Q: Define what web standards mean to you? How do you implement web standards? Q: In CSS. A: See Making the web Accessible. how do you maintain them? What can be done to avoid needing to use box-model hacks? (if they aren’t pros. and in what instances do you use them? A: List of deprecated elements and attributes. 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. there are best practices.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->