Web Developer Interview Questions:

The main technologies required for a web developer are CSS, HTML and JavaScript. good
web developer also needs to have a grasp of and interest in both web standards and
accessibilit!. "hile most web developer roles require other technologies such as #ni$,
pache and server management, M!S%L & 'H' or S%L & Cold(usion or other d) and
programming technologies, C*S, 'erforce, or other source control management interfaces, +
am onl! going to cover the technologies that span all "eb ,eveloper -ob descriptions. HTML,
"eb Standards and ccessibilit!, CSS and JavaScript.
The main s/ill + loo/ for in a web developer is intelligence0, a desire to learn and an
adoration of web standards. These questions target /nowledge rather than capacit! to learn.
So, for each question remove 1 points if the answer, whether correct or not, sounded li/e it
was quoted from a te$t boo/ or this blog entr! 2unless, of course, !ou are interviewing me3.
dd points for interviewee efficient thought processes. if the! didn4t /now the answer to
start with but figured it out in the end.
'lease have a loo/ at "eb ,eveloper 5esume Screening for thought on how to filter through
resumes to find good "eb ,eveloper applicants.
0 6ote. +ntelligence 7 8ducation. Masters or 'h, ma! -ust mean that the! had the time and mone! to dela! getting a -ob.
Loo/ for people who can thin/, not ones who regurgitate te$t boo/s.
'lease note that these questions are two !ears old.
9 and 9 quoting :seldo. ;+ am adding <Can !ou use the men4s room without peeing all over
the floor=4 to m! list of phone screen interview questions.> ?enerall! not necessar! if
interviewing women.
XHTML, CSS & JavaScript Web Developer pplicant
Questions
XHTML Web Stan!ar!s Interview Question
Question:
"hat is a ,T,= "hat ,T, do !ou generall! use= "h!= 'ros and cons.
nswer
See the bottom half of ,T,. the ,ocument T!pe ,eclaration
nswer "atin#:
@. Completel! wrong answer though pretends to /now it
1. + don4t /now 2+ give points for honest!3, tr!ing unsuccessfull! but honestl! to give the
right answer
A. Bnowledge of the definition, but doesn4t /now wh! the! are used.
C. Bnowledge of which one to use and wh!
D. 8$planation of %uir/s mode versus 5egular mode and anal!sis of which one is best
for different media
ccessibilit$ Interview Question
Question
Tell me some considerations in selecting font siEe=
nswer
(ont siEes should be declared using relative measurement values, such as ems, via a st!le
sheet, without the use of the term Fimportant. There are issues with browser font siEe
enlarging which can be rectified via CSS.
nswer "atin#
@. uses GfontH tag
1. ?ives an answer using pi$els using CSS
A. 8$plains that font siEe should be declared using relative font siEes
C. 8$plains that font siEe should be declared using ems or percentages
D. ?ives the answer above
CSS Interview Question
Question
a3 "hat are the possible values for the displa! attribute that are supported b! all browsers=
b3 "hat is the default value for the displa! attribute for the image element= 2what is the
difference between inline and bloc/ level elements3
c3"hat does displa!. runIin do=
d3 ,ifference between ;visibilit!.hidden> and ;displa!.none>= "hat are the pros and cons of
using displa!.none=
nswer
main values. none, bloc/, inline, listIitem, runIin
all values. inline J bloc/ J listIitem J runIin J compact J mar/er J table J inlineItable J tableIrowI
group J tableIheaderIgroup J tableIfooterIgroup J tableIrow J tableIcolumnIgroup J tableI
column J tableIcell J tableIcaption J none J inherit
default value. inline, bloc/ or listIitem, depending on the element. The <img> is an inline
element.
5unIin should ma/e the runIin element be the first line of the ne$t sibling bloc/ level
element, if it is before a bloc/ level element that is not floated or absolutel! positioned. +f
the ne$t sibling is positioned or floated, then the runIin element will be a bloc/ level element
instead of appearing inIline.
''B4s %uir/smode e$plains it well. The wAschools lists table displa! values.
"hen visibilit! is set to hidden, the element being hidden still occupies its same place in the
la!out of the page. +f the displa! is set to none, the element does not occup! an! space on
the page K as if it didn4t e$ist..
nswer "atin#
@. ,oesn4t /now
1. Bnows the answer to
A. Bnows the answer to and ,
C. Bnows the answer to , ) and ,
D. Bnows the answer to C tooF
CSS Interview Question
Question
a3 "hat are the five possible values for ;position>=
b3 "hat is the defaultLinitial value for ;position>=
c3 How does the browser determine where to place positioned elements
d3 "hat are the pros and cons of using absolute positioning=
e3 if the! are reall! advanced, as/ about +8 EIinde$ issues with positioned elements.
nswer
a3 *alues for position. static, relative, absolute, fi$ed, inherit
b3 Static
c3 The! are placed relative to the ne$t parent element that has absolute or relative value
declared
d3 bsolutel! 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. n absolutel! positioned element ma! overlap other
elements, or be overlapped b! them.
e3 +8 treats a position li/e a EIinde$ reset, so !ou have to declare position of static on the
parent element containing the EIinde$ed elements to have them responsd to EIinde$
correctl!.
nswer "atin#
@. ,oesn4t /now
1. Bnows C out of D answers in part
A. Bnows & )
C. Bnows , ) & C
D. Bnows I,
M. Bnows 8 too
CSS Interview Question
Question:
"rite a snippet of CSS that will displa! a paragraph in blue in older browsers, red in newer
browsers, green in +8M and blac/ in +8N
%ossible nswer:
Ocontent pPcolor.blueQ
htmlHbod! Ocontent p Pcolor.redQ
0 html Ocontent pPcolor.greenQ
htmlHbod! Ocontent p P0color.blac/RQ
nswer "atin#
@. ,oesn4t /now
1. Bnows how to declare one color, but no hac/s
A. /nows the htmlHbod! hac/ and 0 html hac/
C. Bnows all the hac/s, but doesn4t validate or uses conditional comments in the HTML
D. ?ives !ou the right answer and e$plains wh! the CSS won4t validate, or, uses a valid
hac/, other than conditional +8 comments, instead of the above answer.
&asic Javascript Interview Question
Question:
"hat is the correct wa! to include JavaScript into !our HTML=
nswer:
See +ncluding Javascript in SHTML for answers.
nswer "atin#:
@. Ga hrefT>-avscript.function23>H I and other incorrect answers
1. verball! e$plains the theor! but doesn4t /now how to do it
A. correct e$planation using inline event handlers or inline code
C. discusses and /nows how to implement -avascript event listeners
D. 8$plainst how !ou include JS within an SHTML document and ensure it validates using
C,T, e$plains
&asic Javascript rra$ ' XHTML (or) Interview Question
Question
re the following all equal, and, if so, what would !our code loo/ li/e to ma/e 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:
<form name="myform" method="post" action="something">
<input name="anything" value="anything" type="something" >
<input name="field" value="something" type="something" >
<form>
nswer includes /nowing that the form is the second form on the page, and that
the fieldinput element is the second element within that form.
nswer "atin#
@. ,oesn4t /now how to code forms and doesn4t /now that the first inde$ of an arra! is
U.
1. Bnows either how to code forms with valid SHTML or that arra! starts at U, but not
both.
A. Bnows how to code forms but not correctl!, but omits something li/e doesn4t /now
that the form needs to be the second one on the page, and the element is the second
one in the form. "ould /now how to do it if the! actuall! put thought into it.
C. Codes the form correctl!, but uses +, instead of name
D. Codes ever!thing correctl!
JavaScript Interview Question
Question:
How do !ou d!namicall! add a paragraph with st!liEed content to a page=
%ossible nswer:
ne!"aragraph = document.create#lement($p$);
ne!"aragraph.set%ttri&ute($class$' $my(lass$);
ne!)e*t = document.create)e*t+ode($this is a ne! paragraph$);
ne!"aragraph.append(hild(ne!)e*t);
my,ocation = document.get#lement-y.d($parent/of/ne!/paragraph);
my,ocation.append(hild(ne!"aragraph);
nswer "atin#:
@. "rong nswer 2i.e. ;!ou can4t>3, + don4t /now.
1. #se JavaScript, with no /nowledge or incomplete /nowledge of how that is done.
Suggesting innerHTML, but not reall! /nowing. Vr e$planation of accessibilt! issues
surrounding this.
A. ble to e$plain how !ou create a node, add content to the node, add a class
attributes to that element, and then add that node as a child of the parent element
2the above e$ample3
C. 8$planation of how to do it 2worth A points3 and e$planation as to issues that arise
when doing it, such as screen readers not /nowing that te$t has changed, +8M and +8N
not appl!ing st!les included with added content, not duplicating +,s, etc.
D. Has no clue how to do it to start, but can figure it out with guidance. e$tra points for
the quic/ learnerF
*t+er ,uestions i!eas:
Q: How do !ou organiEe !our CSS= How do !ou come up with id and class names 2what
naming conventions do !ou use3=
: "hile there are no right answers, there are best practices. +ssues to loo/ for are not
having div mania, no inline CSS, no presentational mar/up, minimal use of classes,
understanding the CSS cascade.
Q: "hat do !ou thin/ of hac/s= "hen should !ou use them= +f !ou use them, how do !ou
maintain them= "hat can be done to avoid needing to use bo$Imodel hac/s= 2if the! aren4t
pros, !ou can as/ them what is the issue with $Ibrowsers and the bo$ model3
Q: "hat are the pros and cons of using tables for la!out= ,o !ou use tables= "hat are the
pros and cons of tableless design= How do !ou generall! la!out !our pages=
: chec/ for them 6VT using tables
Q: Chec/ to ensure that the! separate structure and semantics first from presentation later=
,o not as/ about this during HTML, but do in webstandards.
Q: "hat are some deprecated elements and attributes that !ou use, and in what instances
do !ou use them=
: List of deprecated elements and attributes.
Q: "hat is involved in ma/ing a website accessible= "hat are arguments !ou use to
convince others to invest in ma/ing their web site accessible.
: See Ma/ing the web ccessible. Ma/ing sites accessible also ma/es them more search
engine friendl! 2saves mone!3, ma/es !our pages accessible to the 1UW of the population
that has some t!pe of disabilit! 2so !ou can ma/e more mone!3 and it4s the law in man!
places.
Q: ,efine what web standards mean to !ou= How do !ou implement web standards=
Q: +n CSS, how can !ou ma/e a form elments bac/groundIcolor change when the user is
entering te$t= will this wor/ in all browsers=
Q: How can !ou target an element in !our HTML using the ,VM=