These past couple of weeks, we have been interviewing candidates for a front-end position, and -among other things- I was the person asking about styling and CSS.
So I came up with a tongue-in-cheek snippet of the CSS joke with the text "CSS is Awesome" overflowing a box:
The idea was to have some open questions that could be answered in a few minutes (no more than 15), and that could have different solutions to trigger a conversation and see the candidate's thought-process.
Some of the questions would be:
- How would you avoid the text overflow?
- How would you center the box on the screen?
- Could you have different colors for each line of text?
- What does
box-sizing: border-boxdo? - Do you know what the
vminunit represents?
So for example, if the candidate avoided the text overflow by making the box wider or changing the font size, I could add the restriction that the width and the font had to be fixed, so an alternative had to be found.
Or to the question about centering the box on the screen -one of the most popular CSS questions in StackOverflow-, if they used positioning, I could ask for a solution using FlexBox or similar.
They could change HTML and CSS, but not add JavaScript. Again, the idea was to see how they thought more than the solution in itself (there are many ways of solving each of them).
With this test, I tried to cover some major CSS features: positioning, FlexBox/Grid, transformations, box model, text properties, and some units.
This was the first time that I actually came up with an exercise like this (in the past I just asked generic questions), and since then, I decided to move to something more "practical": develop a small component and style it, which combines is not so specific to CSS but it allows testing multiple disciplines.
The thing is that I don't know how complex my original test could be considered... and that's why I come to you (thanks in advance for your help).
If you got the questions above:
- Would you think it is too easy or too complicated?
- Is it missing important things? (e.g. not much room for pseudo-elements)
- What would you add/remove to improve it?