Sorry if this is the wrong place... I'm interviewing a few people tomorrow for a junior web designer/developer role. They need to be able to handcode HTML/CSS/Javascript. I'm going to get them to design a banner using provided design elements - but i also want to give them a written test to prove their HTML/CSS/Javascript skills. So far the only things I can think of doing are: 1) Write the basic structure of a HTML page including referencing a stylesheet and javascript file 2) Find the errors in a javascript script 3) describe what the css style would show and ask then to change it Any other ideas for questions would be great! Thanks. Josh
thats one of the issues i'm having - trying to get the right level. i want a junior that has experience but will also be able to follow my style of coding etc. another thing is i'm having a discussion with a college about whether we should be looking for a coder with design skills or a designer with coding skills - has anyone had experiences with this? Thanks. Josh
To be honest I'd say your better getting a coder than a designer. Coders can bring traffic to your website, make your website have good SEO to best your chances of getting a lot of people through search engines. Designers make your target market stay on the site though, so it's a hard choice. Although It would be best to have a dedicated designer and a dedicated coder.
we hope to get more juniors in as we expand so whatever way we lean this time we can lean the opposite for the next one! Thanks for your help. J
Since it's a position for a junior developer you should ask the basic questions. I'm not a strong believing in on the fly quizzes because I usually don't memorize how to do everything. If you asked me now how to setup an HTML page with links to css and javascript files I would be hard pressed to get the sytax 100% because I'm so used to copying a template. I think general questions like, "If this is wrong...how do I fix it", or "what if ______, what should I do?". If you do give them a quiz give them access to the Internet at least.
If anyone is interested the test i wrote is below. Maybe someone else will find it helpful. ----------------------------------------- Look at the HTML code below. There are a number of errors. Please explain and fix as many as possible. Think about Web Standards, Accessibility and Best Practises when looking at the code. <html> <title>Test Page</title> <style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica font-size:8px } p { colour:red } Footer { font-size: "tiny" } --> </style> <body> <table width="100%"> <tr> <td><a href="/"><image src="images/logo.gif"></a></td> <td style="text-align:right"><a href="contact.html">Contact</a></td> </tr> <tr> <td colspan="3"><p> Nullam tincidunt rhoncus libero. Maecenas ut risus a massa rhoncus aliquam. Maecenas et lectus. Pellentesque pellentesque tortor eget lacus. In feugiat interdum dolor. Mauris vel risus.</p> <p>Praesent vulputate justo a mauris. Vestibulum facilisis est in eros. Aliquam imperdiet purus eu nisi. Nullam egestas, diam et suscipit viverra, nibh nulla accumsan lacus, condimentum interdum massa arcu at ante. </p> <p>Integer varius lacinia nulla. Fusce pulvinar pharetra augue. Ut nulla purus, fringilla ut, rhoncus at, tincidunt nec, enim. Cras leo.</p></td> </tr> <tr> <td colspan="2" class=".footer">©2007 Test Site</td> </tr> <tr> </table> </body> </html> Code (markup):
missing doctype missing head open close Footer should be lowercase(or upper case at the bottom, either way) does coulour work? Thought only color did body font-size 8px...ouch (valid but ouch) all styles should be in an external document table width should be in a stylesheet using tables for layout...bad boy no alt tag on image no closing tag for image /> td alignment should be in stylesheet td colspan 3 but there are only two columns above class name should be footer not .footer encode © That's what I got first scan...what did I miss?
Let them pass if they can turn that into this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Fun Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin: 0; padding: 0; } body { font: normal 12px/14px Verdana, Arial, Helvetica, Sans-serif; } #wrap { padding: 20px; } h1 { float: left; position: relative; height: 50px; font-size: 25px; line-height: 50px; } h1 a span { width: 200px; height: 50px; background: url(images/logo.gif) center no-repeat; position: absolute; top: 0; left: 0; cursor: pointer; } #extra { float: right; line-height: 50px; } #content { padding-top: 15px; clear: both; text-align: justify; } #content p { color: #F00; padding-bottom: 15px; } #footer { font-size: 10px; text-align: center; } </style> </head> <body> <div id="wrap"> <h1><a href="./">Fun Page<span></span></a></h1> <div id="extra"> <a href="contact.html">Contact</a> </div> <div id="content"> <p>Nullam tincidunt rhoncus libero. Maecenas ut risus a massa rhoncus aliquam. Maecenas et lectus. Pellentesque pellentesque tortor eget lacus. In feugiat interdum dolor. Mauris vel risus.</p> <p>Praesent vulputate justo a mauris. Vestibulum facilisis est in eros. Aliquam imperdiet purus eu nisi. Nullam egestas, diam et suscipit viverra, nibh nulla accumsan lacus, condimentum interdum massa arcu at ante.</p> <p>Integer varius lacinia nulla. Fusce pulvinar pharetra augue. Ut nulla purus, fringilla ut, rhoncus at, tincidunt nec, enim. Cras leo.</p> </div> <div id="footer"> © 2007 Fun Site </div> </div> </body> </html> Code (markup):
That was the idea - you know its actually quite hard to write bad html - especially when dreamweaver keeps trying to correct it!!! Josh
make a template using tables, and tell them to converted it to tableless using html and css. maybe throw some images in there and have that handcoded into the css. (aah, good 'ol css) possibly have them make a style stylesheet (catchy isnt it) you give a list of colors, font weights, font sizes, font faces, exc..
If your looking for design questions then you could give them an example and ask them what they like about the design, what they dislike, what should be changed, etc. For example you could make a page with the menu on the very bottom of the page (easy to see that this is bad design). Probably think of better design questions later.
At the very least ask them what style of design that they usually do. ie. Professional, abstract, grundgy, etc.
I personally would have kept the image in the header, and then moved the level one heading to the top of the content block (since the image is the site's title, and the topmost heading is the page title).