Frontend Interview

I know a frontend interview has gone fake when the candidate gives the textbook answer and I nod as if either of us learned something.

The room becomes useful again when they tell me what they’d do in a real codebase with a teammate waiting for the fix. I keep returning to two ways of getting there:

• CSS fundamentals, because CSS exposes whether someone understands the browser or only memorised utility classes.
• React pair coding, using this challenge template, because implementation choices get much clearer when we’re looking at the same screen.

The question isn’t really whether they know CSS specificity. It’s whether they can explain it to somebody who is already stuck and annoyed.

Questions that make the browser appear

How would you explain CSS specificity to a teammate who is stuck and annoyed?

Then I ask which units they actually use in production, and what they avoid unless there is a good reason:

• %
• px
• em
• rem
• vh

How would they make a div truly full-page height without accidentally creating a mobile Safari bug?

In an LTR/RTL layout, how would they set a 1em margin at the end of text correctly?

How would they build a footer with predictable margins across breakpoints, then stop the next change from breaking it?

Which positioning modes do they trust, and when?

• static (default)
• initial
• absolute
• fixed
• relative
• sticky

Finally, explain absolute positioning without reciting a definition. What happens with inset: 10px, and what does it position itself against?

Tell me about the z-index bug

I can ask for the definition of a stacking context. I learn more by asking what bug they have personally seen because of one.

• Setting opacity to a value less than 1
• Setting position to fixed or sticky
• Applying a mix-blend-mode other than normal
• Adding a z-index to a child inside a display: flex or display: grid container
• Using transform, filter, clip-path, or perspective
• Explicitly creating a context with isolation: isolate

Then a small practical problem: make a container scroll on y but not x.

The pattern I tend to reach for is an outer wrapper for clipping and border radius, with an inner wrapper handling the scroll. If they choose something else, good. Now we have a decision to discuss.

By then, this is the scorecard in my head:

• Can they explain the browser’s behaviour without sounding like MDN pasted into a human?
• Can they name a bug they have actually fought?
• Can they turn a visual layout problem into constraints?
• Can they pair without either disappearing or taking over?

The formal definition can be looked up. The story about the modal that stayed behind the header despite a z-index of 9999 tells me they have met the browser in person.