<\/figure>\nExercises To Do<\/h3>\n
Seeing people’s actual work is just as important as what they say. Seeing people work their through exercises live might be even more important. These are some exercises that aren’t particularly difficult and anybody with CSS experience should be able to do. Watching\/listening to them do it could be invaluable. Collab Mode<\/a> on CodePen is kinda perfect for that (just saying). <\/p>\n I saw this idea<\/a> on Mobify’s CodePen account<\/a>. Give people an image of a button, and tell them:<\/p>\n Using CSS properties alone, recreate this button:<\/p><\/blockquote>\n This would be a great test of the candidate’s CSS3 skills. This button is loaded with that kind of stuff. Things I would look for:<\/p>\n I hope I didn’t ruin Mobify’s hiring process! But honestly, I think this stuff is hard to fake. You can either do it and talk about it, or you can’t.<\/p>\n The right sidebar here has fallen down below the content. Show me<\/a> some different ways you could fix that.<\/p>\n Even though the two columns are 75% and 25% wide and floated opposite ways, the sidebar has fallen. The reason is because the columns don’t actually add up to 100% – they add up to more than that due to the padding. There is a number of ways to fix it:<\/p>\n There are other ways. The more solutions they can think of, the more creative and versatile a problem solver they are.<\/p>\n Here’s a design.<\/a> It’s a fixed 800px wide. Do your best at making it fit the screen more appropriately at any screen size. <\/p>\n This is just one ingredient to responsive design (which they should probably at least be familiar with) but it’s an important one. It can help prove they can think spatially and make reasoned choices about layout. I’d look for:<\/p>\n Accessible and semantic image replacement has been a CSS topic for a lot of years and the “best way” has morphed over the years<\/a>. Asking them to show you how it could be done a number of ways would be a way to get insight into how long they’ve really been working with CSS. Not only is it directly an important thing to know how to do, knowing how to do it multiple ways demonstrates the depth of their internal toolbox.<\/p>\n Being able to Google something quickly and efficiently is a huge part of any developers job. Are they deft at it? Did they find the right answer? Did they go to a specific trusted source in the results page? <\/p>\n Perhaps phrase the question without “Google” and see which search engine they use. No particular bias here, but if it’s not Google, are they as efficient as you would expect them to be with whatever other search engine that is?<\/p>\n Darcy Clarke got the ball rolling<\/a> with this a few years ago. I’m going to update some of those, and add some of my own, and elaborate a bit.<\/p>\n The CSS box model<\/a> is fundamental to understanding layout and sizing and such. It’s made up of:<\/p>\n Margin is related but not technically a part of it. I would give extra points for knowing\/mentioning that, but not take away and points for including it.<\/p>\n They are CSS preprocessors. They are an abstraction layer on top of CSS. They are a special syntax\/language that compile down into CSS. They make managing CSS easier, with things like variables and mixins to handle vendor prefixes (among other things). They make doing best practices easier, like concatenating and compressing CSS.<\/p>\n Bonus points for knowing how they differ and\/or having experience using them. More bonus points for knowing what things like Compass, Bourbon, LESSHat, Nib, etc are and how they relate.<\/p>\n Being good at googling problems you are having is a valuable job skill. There isn’t any shame in it. There is shame in spinning your wheels because “you should know this.” If you don’t have time to do the Googling exercise above, just asking about resources can be telling. <\/p>\n Google is a pretty good answer (since it’s true and we all know it). But being able to name some specific sites is a good indicator they have done it a bunch and are familiar with the places they land and know their favorites. Stuff like MDN (Mozilla Developer Network) is a good answer.<\/p>\n Resets are so wildly common in CSS that anyone who is a front end developer type has surely used them. Do they do so blindly or do they know why? The reason is essentially that different browsers have different default styling for elements, and if you don’t deal with that at all, you risk designers looking unnecessarily different in different browsers and possibly more dramatic breaking problems. <\/p>\n Normalize<\/a> you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn’t unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements. <\/p>\n Floats<\/a> are still incredibly common. As this is published, still probably the most cross-browser consistent way to build layout and grids. Anyone who has worked with them is aware of float collapsing. That is, floated element do not add to the height of a parent element. So for example if a parent element contained only floated elements, it would collapse to zero height. You can deal with that like:<\/p>\n Bonus points for “create a new block formatting context<\/a>“. Possibly negative points for something like As a bonus question, you could ask them to compare using inline-block and floats for building a grid. Good answer: there are problems either way. With inline-block you need to deal with the whitespace issue. With floats you need to deal with clearing.<\/p>\n Sprites are<\/a> essentially multiple images combined into one. Performance is the reason that they are used. Generally speaking, the slowest thing a website can do is request a resource. The fewer requests a site needs to make, the faster it is. Fast = good. Combining what would be many requests into one = good.<\/p>\n Asking how they make sprites would just seal the deal that they are actually very familiar with them. Manually creating sprites is certainly a possibility but it isn’t very efficent. There are helper tools like SpriteCow<\/a> and SpriteMe<\/a>, Spriting with Compass<\/a>, or Grunticon<\/a>. It’s always interesting to hear a real workflow approach.<\/p>\n Sprites are raster images. When asking about alternatives, good answers might be related to the fact that sprites are often for icons and icons often don’t need to be raster. SVG Stacks<\/a>, Icon Fonts<\/a>, Unicode<\/a>…<\/p>\n Hidden content<\/a> is a big one here. It’s only acceptable to use CSS controls colors so color accessibility<\/a> is relevant. Focus styles<\/a> are also important and directly controlled by CSS.<\/p>\n There is a lot more accessibility stuff that is related to HTML and JavaScript, so mentioning that stuff is great, but I think it’s interesting to target the question solely on CSS to force focused thinking.<\/p>\n Bonus points for bringing up specific details like the fact that you can’t transform inline elements.<\/p>\n They should have some kind of strategy. Perhaps a web-based tool like BrowserStack<\/a>. Perhaps a VM based tool like Virtual Box<\/a>. Perhaps different actual computers. <\/p>\n Part of the job of front end design is making sure things work everywhere they can (based on decided-upon support). You don’t have to love it, but you can’t hate it. \u201cThis right here, this is the job. What kind of work were you expecting?\u201d<\/em><\/a><\/p>\n What code editor to they like? Where do they go for inspiration? What experience with version control do they have? What was QA like where they have worked? Support? What different deployment methods have they worked with? Do they know Photoshop or another visual design software alternative? Are the comfortable with the terminal? <\/p>\n Those are just some examples, it’s interesting to hear about any software they use to get the jobs done. Getting a sense of the tools they use (and better, the tools they like<\/em>) is interesting. Bonus points: a sense of excitement about some of the tools.<\/p>\n This would be an alternative question to asking generally about cross browser testing. More specific. Perhaps a more difficult alternative question would be to replace IE 8 with something like “A Google Nexus running Android 2.3.” Would they find a simulator? Would they seek out a design lab? Would they ask the company for an allowance for devices for testing, with some kind of smart plan? Would they find a friend with one?<\/p>\n It’s about making websites work wherever the web is. Different devices with different sizes and different capabilities. Responsive design is about taking one code base and making it work for all of them. Part of that is media queries and different visuals. Part of that is different resources (e.g. different JavaScript to handle touch vs click or different images to accommodate the screen). <\/p>\n Why did they need a grid? How did they build the grid? Was it home grown or did they use a grid tool? Did they like the grid tool? What kind of class names did they use? Did they go mobile-first or desktop-first? Was a help or a hinderance? Do they reach for the grid automatically on any project?<\/p>\nCreate This Button<\/h4>\n
<\/figure>\n\n
box-shadow<\/code> is probably the best way here.<\/li>\ntext-transform: uppercase;<\/code> for the text? That would be best.<\/li>\ntext-shadow<\/code>?<\/li>\nlinear-gradient<\/code> with no fade would be a good technique there. Or box-shadow<\/code>.<\/li>\nFix The Sidebar<\/h4>\n
<\/figure>\n\n
box-sizing: border-box;<\/code> on the appropriate elements is the most efficient fix.<\/li>\ncalc()<\/code> on the widths to remove the 1rem padding is another way.<\/li>\nMake this fixed width design fluid.<\/h4>\n
\n
Replace this logo markup with an image.<\/h4>\n
<a href=\"\/\" class=\"logo\">Company<\/a><\/code><\/pre>\nGoogle how you would find out what the default value for
backface-visibility<\/code> is.<\/h4>\nQuestions to Ask<\/h3>\n
What is the “Box Model” in CSS? Which CSS properties are a part of it?<\/h4>\n
\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/thebox.png?resize=570%2C248\" "\\"\\"")
<\/figure>\nWhat are Sass, Less, and Stylus? Why do people use them? How does something like Compass relate to Sass?<\/h4>\n
Name some online resources that you reference when having CSS issues.<\/h4>\n
Describe what a \u201creset\u201d CSS file does and how it\u2019s useful. Are you familiar with normalize.css? Do you understand how they differ?<\/h4>\n
What are the various techniques for clearing floats?<\/h4>\n
\n
<br style=\"clear: both;\"><\/code><\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/directionalclearing.png?resize=540%2C226\" "\\"\\""){kind=spacer}
What are sprites and why would use them? How do you go about creating them? What are possible alternatives to sprites?<\/h4>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/1454282699-lhn-sprite.png?resize=96%2C96\" "\\"\\""){kind=icon}
<\/figure>\nWhat are some accessibility concerns that come up in CSS?<\/h4>\n
display: none;<\/code> if you’re both trying to hide things visually and the content itself.<\/p>\nWhat is the difference between inline, inline-block, and block?<\/h4>\n
What tools do you use for cross-browser testing?<\/h4>\n
What are some of your favorite web design workflow tools?<\/h4>\n
Say you found a rendering problem on one of your sites in Internet Explorer 8, which you have decided you are supporting. How would you approach fixing it?<\/h4>\n
What is responsive design all about?<\/h4>\n
Have you ever worked with a grid layout? What are your thoughts on that?<\/h4>\n
What are the benefits of SVG?<\/h4>\n