Recently, I was asked to conduct a series of interviews and I would like to share my experience on this with you. Some of the guys were interviewed at Binary Studio Academy, which means that they are not even juniors yet while some even aimed for a senior position. That’s why the questions differed, but many of these have stayed the same.
1. How to vertically align a block with unknown height in the center of another block with known height?
Those who have done some CSS work in their lives know that this is one of the most painful questions CSS cannot answer directly. The current trend of division markup is defeated by the table one. The trick is that table cells could have such property as:
which will align the content in it vertically. In order to make divs work with this you need to create another one wrapper, give it
and give the large div
and then set constant height to it.
More graceful solutions are possible when utilizing flexbox but they may not fit each project as they still have limited support.
2. How to center several blocks standing side-by-side horizontally with unknown width within another block with known width.
There are two basic ways of putting blocks side-by-side: using float with either left or right value or display: inline-block. Without a doubt the second one behaves better, since it allows you to set on the parent block text-align: center, so that the task is done. But the problem is that this solution will not work in the older versions of Internet Explorer browser. Fortunately, Microsoft has plans to deprecate IE, which is why most of us no longer have to worry about it.
For projects which still tend to support IE, let’s try a more bulletproof float:left instead. It allows you to put block side-by-side at once, but it also sets the width 0 to their parent block so that they cannot be centered properly.
To solve this drawback you should implement a fallback for display block in older browsers via a hasLayout property used under the hood of rendering engines.
This construction allows us to mimic an inline-block within IE8-, * sign affects only those browsers and zoom sets the hasLayout to true.
3. Which actions may cause a reflow in a browser?
This is one of my favorites because first of all it checks if a candidate has ever heard about a reflow, and if he has, most likely he also knows what a repaint is. So reflow is an action which a browser performs in order to know how the elements you described in your html should be placed on the page according to your screen - they are basically geometrical calculations.
There are several ways of causing a reflow and you should first of all know the ways of forcing it, which may seem harmless on the first glance:
clientHeight, clientLeft, clientTop, clientWidth, focus(), offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, etc.
This was just a small extract from all the methods, which could cause a reflow in your browser.
4. Describe the difference between fixed, fluid, responsive and adaptive design. Name the pros and cons.
There are four main types of layout - fixed, fluid, responsive and adaptive.
Fixed layout is static and has persistent size. It is very easy and cheap to create it, because you don’t need to think about mobile or tablet view but your app will look identical on every device.
Fluid layout uses percentage values instead of pixels. It is more flexible than a fixed layout. It stretches and provides good user experience on different desktop screen sizes. But such layout is still bad for mobile and tablet users or contrariwise - larger screens such as iMacs.
Responsive design uses a fluid grid system and CSS media queries to control a layout. It provides optimal user experience on all devices and is easily manageable. At the same time it requires more efforts and time as well as design.
Adaptive design uses media queries to define device size and then depending on that information displays your page. Just like a responsive approach it provides a good user experience on multiple devices. Adaptive design implies that you use the same layout for different devices, but adapt it for each device. The bad news is that you will have problems with unique resolutions devices.
Why do I find this question interesting to ask? First of all, you need to know if the person is familiar with modern CSS layouts as they are applied to any present-day web project. If fixed layout design is something well known and a person can guess this by name, then fluid, adaptive and responsive may sound like they are similar.
5. How to implement a menu with 5 items using flexbox? The first three items should float to the left, the other two - to the right.
At first glance this seems very easy to do. In flexbox there’s a property called “align-self” for child elements. It allows you to override global alignment and make an element independent. But you will get stuck if you try using it - why? Flexbox has two axis - main (horizontal) and cross (vertical). The problem is that the “align-self” property works only for cross axis. That means an element can only be aligned vertically.
So there are two possible ways to solve that.
The first solution that comes to mind is to make parent wrappers for those elements you need to separate and apply “justify-content: space-between” for their parent. You’ll get something like this:
This solution has some disadvantages. If you need two elements at the beginning of the menu and three at the end, you need to change your layout, delete an element from the first wrapper and move it to the second. I consider that it requires too many moves on your part for such a simple thing.
So there is another way to implement that. You can use auto-margins to make elements independent on the main axis.
In this case the last two elements will move to the right. They are still flexible and you have more control over them. If you need to change the number of elements floated to the right you should only change a number in your css code without affecting the HTML at all.
This question requires deep knowledge of flexbox properties and its behavior, though it can show you if the candidate can think out of the box.
6. Create a tooltip for an element without affecting HTML code
First, you should think about the UX purpose of a tooltip - it is some additional info shown while the pointer is placed over an element. It means that first off all you need to use is :hover pseudoclass. The easiest solution would be to add an element to the layout and show/display it on hover. But you will realize that you can only use CSS. To cope with this you need to use pseudo-elements such as :before or :after. They provide you a possibility to create a manageable element using only css.
You can set the text for your tooltip in the CSS content property or, you can pass it to the attr() value of the same “content” property if you have it in the element's attribute. The decoration and positioning only depends on your imagination.
7. What is wrong with the following snippet?
<p class="text">Text <span>Some other text to show</span></p>
This question allows me to determine if a person has good knowledge of the CSS block system. It is a very important question, because the block system is as fundamental for CSS as an alphabet is for a language.
There are two main types of elements - inline and block. Inline elements’ width depends on the inner content. Block elements take the full width until you define them a size and make them floating or define them as inline blocks. Also there is another not so obvious difference between these elements. According to the CSS box-model, each element has paddings and margins, both of which can be applied to any element, but they will affect only the left and right side of the inline element. In the example above we have a span element. It is displayed inline, so applying a margin or padding won’t affect its height.
If an interviewee got stuck with the question, you can ask more specific questions to see if he will catch up.
Can we reset the default behavior of an inline element? How?
What will be shown if I will add padding:5px to an inline element?
The questions described in this article are covering only CSS / layout part of frontend development, but they are great indicator in discovering whether a developer is really striving to know more in his domain.
Enjoyed this article?
you might want to subscribe for our newsletter to get more content like this: