Separating the wheat from the chaff when hiring a Web Designer

November 27, 2012 12:53 PM

What would be a good FizzBuzz question for a web designer?

For those who don't know what FizzBuzz is, it's a simple question (no trickery) that proves you know how to code the simplest of functions. I'm looking for the web designer equivalent to FizzBuzz.

So far I've got:

• Explain to me how the box model works in CSS
* Explain what the difference between a div and a span are

Circumstantial details: I'm hiring a web designer who should be adept in HTML, CSS, and JS. One of my main concerns is that I'll inadvertently hire someone who has only ever modified Wordpress templates.

posted by furtive to computers & internet (13 answers total)

My favorite: In as much detail as you like, explain what stuff happens when you type "zombo.com" into your browser, the end result being a web page visible on your screen.

(Substitute your favorite website in place of zombo.com -- for bonus points, an HTTPS page.)
posted by value of information at 1:15 PM on November 27, 2012 [1 favorite]

What selector would you use to select the first and last paragraphs in an article?
posted by Jairus at 1:16 PM on November 27, 2012

Maybe, "Lay out, in one .html file, one .css file, and one .js file, a two column page with a form in the left column which lets me set the text content of the right column. Include whatever libraries you want." That's a bit bigger than FizzBuzz but it covers all the bases you list. Do they lay out using nice divs and CSS instead of tables? Do they go it alone or do they use Prototype or jQuery? Can they hook some simple JS up to a simple form? Is their CSS well organized? Do they style the page nicely or give you black and white barebones? Do they ask intelligent followup questions?

I would expect a top shelf web designer to knock this out in a couple minutes and your hypothetical PHP template guy to have no idea what you're talking about.
posted by mindsound at 1:16 PM on November 27, 2012 [2 favorites]

The idea behind FizzBuzz is that you actually have to produce something. Write code. Lots of people can talk a good game but are, remarkably, unable to actually produce working code.

The questions that have been suggested are (I assume) decent questions to find basic knowledge of the subject, but if you want a FizzBuzz equivalent then you need to find a simple task for them to do and have them do it.

If they know JavaScript then have them write a simple page with a text box and a button. Enter text, press the button, and you go to a page that says "Hello ".

Warning: My last experience writing HTML was back in the days where you did all this stuff by hand, so my example may not be any good any more.
posted by It's Never Lurgi at 1:19 PM on November 27, 2012 [3 favorites]

Are you expecting just javascript, or do you assume jQuery knowledge as well? The one I've asked for people proclaiming jQuery knowledge was to to get them to explain the difference between bind(), live(), delegate() and on(). (First google hit here.)
posted by cgg at 1:19 PM on November 27, 2012

I would, truthfully, give them a printed out mock of a website. Just something simple: banner/logo, menu, article and side bar. Maybe give them 30-60 minutes to complete it. If it's important, ask them to stray away from table-focused design.

It would maybe take 4-5 div's, and you could check to see if they know how to align columns with CSS.

tell them to use lorem ipsum if they're looking like they want to type out the text you give them. (If they don't know how to google for lorem ipsum text, don't hire them.)

I'm a web designer, I can't answer either of your questions. So YMMV with those.
posted by royalsong at 1:21 PM on November 27, 2012

I think that drawn out examples are good here, because most of the job for this person is taking comps and making them into real pages. My favorite is a div or link with some text in it, that when you hover upon it, shows a hidden div or tooltip. JS version and css only version, explain benefits of both.
posted by shownomercy at 1:28 PM on November 27, 2012 [1 favorite]

Your two questions - about the box model and about block versus line-level elements - are spot on. Definitely go with those. But have them do a bog-standard fizzbuzz in javascript, too.
posted by colin_l at 2:08 PM on November 27, 2012

Why not stick with FizzBuzz? Anyone adept at JS can complete FizzBuzz. Add some web design components to the problem to assess each candidate's HTML and CSS knowledge. Here are two possible ideas that incorporate FizzBuzz:

1. Require the output of FizzBuzz to be presented in a (pageable and/or sortable) table. The columns of the table would be 'Input' and 'Output.'

2. Create a form for entering a number (you can check for user input validation here; the input must be a number and between 1-100). When a user enters a number, the proper response to FizzBuzz should be displayed.
posted by trueluk at 2:13 PM on November 27, 2012

My example should actually have been

... and you go to a page that says "Hello, <yourname>"

Stupid HTML markup.

I also like trueluk's idea of having them do FizzBuzz. Simple and direct.
posted by It's Never Lurgi at 2:40 PM on November 27, 2012

A simple "to do"-app using a specific layout (e.g.: the new Metro-UI without using a Bootstrap-mod) should do the trick.

You could add bonus questions/tasks in form of using semantic HTML5 tags only or persistent data (cookies or any of the new HTML5 databases) vs transient data. Ask how to make the form more accessible. Let it be responsive and insist on a web-font, to see if the applicants knowledge is up to date. Last but not least add some CSS-transisitions for fun.

If you want to be mean, ask for all this working in a single-digit version of IE ;-)

Most of this can be done in some sort of ask/walk-through.
posted by KMB at 3:12 PM on November 27, 2012

Someone once asked me to write a Javascript function to validate a (US, or other country) postal code. I thought that was pretty good and simple, and involved some simple HTML as well.
posted by iamscott at 5:43 PM on November 27, 2012

Too test for css knowledge, add a criteria like "FizzBuzz" should be green by adding "Fizz" and "Buzz" as css classes to the table-row.

And "Fizz" without "Buzz" should be in italic, still only by using css classes.
posted by flif at 6:21 PM on November 27, 2012