This content originally appeared on Level Up Coding - Medium and was authored by Alvaro Montoro
A set of questions for HTML+CSS interviews… and why I stopped asking them.
One of the tasks in my previous position was to interview candidates for Web Development positions. In particular, I focused on HTML, CSS, and Web Accessibility, as I knew that a different interviewer specialized in JavaScript and algorithms.
Our project focused on styling (and accessibility), and CSS was an essential tool. Therefore, advanced knowledge of this language would make the candidate ideal for the role.
Before moving to a more wholesome (and, in my opinion, complex) set of interview questions for web development, I used to have a battery of questions based on this code (a tongue-in-cheek snippet of the CSS joke with the text “CSS is Awesome” overflowing a box):
<div>
CSS
IS
AWESOME
</div>
<style>
div {
border: 1vmin solid;
box-sizing: border-box;
font-family: Arial, sans-serif;
font-size: 15vmin;
min-height: 51vmin;
line-height: 15vmin;
padding: 2vmin;
width: 51vmin;
}
</style>
That you can run on this CodePen demo:
After sharing the code, I would start with the question, “How would you avoid the horizontal overflow?” Notice that it is an open-ended question with multiple possibilities. Candidates can opt for many different ways of answering it:
- Extend the width of the box;
- Extend the height of the box;
- Break the word “awesome”;
- Make the text size smaller;
- Hide overflow;
- Hide overflow using ellipses, etc.
There is no right or wrong answer, and depending on how it goes, we can ask some follow-up questions about the others:
- If the candidate extends the box horizontally, I will follow with, “That’s great! We want to keep the width the same and only allow vertical overflow.”
- If they extend the box vertically: “That’s great! But, what if we cannot overflow vertically, but we could horizontally or not at all?”
- If they hide the overflow or use ellipsis: “That’s great, can you think of a method in which all the text would be visible?”
This way, we would cover multiple topics at once, and as there is no wrong answer, it could boost the candidate’s morale, who could approach the following questions more confidently.
And the following question is a classic that every person working with CSS should be able to answer quickly: How would you center the box on the screen? Again, another open question. Candidates can add as much CSS/HTML as they want. I let them center it vertically, horizontally, or both, but I asked for both anyway.
…and then come the follow-up questions:
- Suppose the candidate added more HTML: “Good! Can you imagine a way to do it without adding more HTML?”
- And if they used absolute positioning: “Nice. How would you do it using FlexBox or Grid?”
- If the candidate used Flex (or Grid): “Nice! Have you worked with Grid (or FlexBox)? How would it be using Grid (or Flex)?”
- Or the more generic: “Great. Can you imagine a different way of doing it?”
Most people I showed the centering content question agreed that it should be something “basic” at this point. But interestingly enough, only one candidate got it right without guidance. Nothing terrible, though. Most of them were able to apply the standard Flexbox solution available everywhere online. Still, then they got stuck because that solution requires the container to have a height (something that usually those online posts don’t mention.) A little push made them realize that, and they solved the problem in the end.
Finally, if there was time, I asked some general CSS questions:
- What is the box model? This question leads to other box-model questions like margin, border, padding, etc.
- What is the box-sizing property? And what other values do you know?
- What is vmin? Do you know other CSS viewport units? (notice that the demo uses the vmin unit.)
This battery of questions was the first time that I came up with an exercise like this, and I thought it was complete as it reviewed many critical parts of CSS, which should be basic knowledge for any Web Developer:
- Positioning
- FlexBox and Grid
- Transformations
- The box model
- Text properties
- CSS units
But, as I shared the exercise with more people through a blog post or on Twitter, many reviewers highlighted that the questions were too complicated. Something that I didn’t fully agree with but that, as mentioned above, ended up with me moving from this battery of questions to something more complete (“code a simple search box component”).
Considering this was an interview question for candidates with 2–5 years of web development experience, what is your opinion? Would you think it was too easy or too complicated? What would you have added/removed to make it better?
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in Level Up Coding
- 🔔 Follow us: Twitter | LinkedIn
- 🚀👉 Top jobs for software engineers
CSS Interview Exercise was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Alvaro Montoro
Alvaro Montoro | Sciencx (2022-07-19T14:58:07+00:00) CSS Interview Exercise. Retrieved from https://www.scien.cx/2022/07/19/css-interview-exercise/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.