Over the past several months, I’ve interviewed a bunch of people for a Front-end Developer position at Threespot. Candidate quality has varied, but I’ve gradually developed an internal list of things prospectives should know going into an interview.

This doesn’t cover Javascript. But I will state here that Javascript is equal to HTML/CSS in the front-end developer’s skill set. The complete candidate knows Javascript and at least one framework.

This also doesn’t cover accessibility and related best practices.

Caveat: technology changes, so really, this list can and will fall out of date. Also, this list is obviously non-exhaustive.

The basic

These are things that every front-end candidate should know well:

• The difference between margin and padding, and how margin, padding and width interact with the box model.

• float, float-clearing, and the different methods of clearing floats. Also how floats affect the flow, and the uses of floats in general.

• The differences between class and id, and how CSS specificity uses each.

• CSS sprites, and using :hover and background for rollover images.

• Firebug. Really, I’ve not met a single good front-end developer who doesn’t have Firebug in their arsenal.

• CSS resets: what they are, why they’re useful. Eric Meyer’s is a common one, but others do exist.

• Class composition with multiple classes.

• The concepts of semantic markup and progressive enhancement.

• Image production. You should be able to get around in Photoshop well enough to cut your own art.

• Knowledge of the font stack: what the common web fonts are.

The intermediate

Good front-end candidate should know these items in addition to the stuff above.

• Transparent PNGs, IE6, and the use of filters. They should also know where a transparent gif will serve.

• Conditional stylesheets for IE browsers.

• Using display: block and display: inline to achieve and resolve layout issues.

• The use of position: absolute and position: relative to achieve various layout and centering (both vertical and horizontal) effects.

• background repeats: where to use repeat-x or repeat-y, and when to anchor background images to corners.

• In addition to Firebug, having an IE Debug toolbar, plus being familiar with Webkit’s inspector.

• Knowledge of common cross-browser issues. See below for a list.

• Form styling: when to use padding, when to rely on line-height, how borders, backgrounds and margins are rendered in multiple browsers.

• The traits of image formats like gif, jpeg or png; and where/when each format should be used.

• Using the technique of super long or tall background images to do things like decorated elastic buttons or containers.

• Faux columns.

• Flash embeds. i.e., swfobject and the like.

• The use of negative numbers for margin and the like.

The advanced

Ideal front-end candidate should know this stuff. Some of these are more soft and less strictly technological.

• Judging and evaluating a design comp for cross-browser issues.

• Similarly, judging and evaluating a design comp for places that require disproportionate developer effort for small visual gains.

• Deciding when the extra effort required for the two points above are necessary or preferred, and when the extra effort is unneeded.

• Developing a balance in the markup between potentially fragile cascades and more robust and verbose containments.

• overflow: hidden, and when it should be used to preserve aesthetic integrity.

• CSS2 and CSS3 selectors, and when they can be used versus when a more compatible fallback should be used.

• HTML5. Should at least be familiar with the goal, if not the nitty gritty.

• Embeddings fonts into pages via sifr, custom image replacement, and browser-support font mechanisms.

Terms, browser bugs, and patterns

A majority of cross-platform bugs are caused by a minority of fundamental browser issues. Additionally, certain fixes have been accepted into the standard language of front-end development. The intermediate candidate should have an understanding of most of these. The ideal candidate should know all of these well.

• clearfix

• IE double margin

• IE peek-a-boo

• IE select z-index

• z-index and position: relative

• Unclickable anchors and position: relative

• hasLayout, zoom: 1

• box model differences

• min-height

• expanding box problem

Resources and sites

Good candidates are familiar with most of these.

• A List Apart

• QuirksBlog

• Position is Everything

• 24ways

• Smashing Magazine

• StackOverflow