Frontend Interview

Things I typically like to ask during a frontend dev interview

1. CSS (see below)

2. React pair coding (https://codesandbox.io/s/coding-challenge-template-7gkem1)

Can you explain CSS Specificity?

const appliedStyles = {
  ...inheritedStyles,
  ...tagStyles,
  ...classStyles,
  ...idStyles,
  ...inlineStyles,
  ...importantStyles
}

Which measures do you know? When would you use which one?

• %:

• px:

• em:

• rem:

• vh:

Let’s talk about height - style a div so that it’s the full page height:

<div class="wrapper">
  <p>
    I fill the viewport now!
  </p>
</div>

//if nextJS, add below
#__next, 
html, body, {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  border: solid;
}

Talk about internationalisation - LTR - style a paragraph with a 1em margin at the “end” of the text?

p {
  ...
  margin-inline-end: 0px;
} 

Talk about margins - style a footer

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
footer {
  margin-top: auto;
}

<div class="wrapper">
  <p>
    I fill the viewport!
  </p>
  <footer>I'm at the bottom</footer>
</div>

Can you name different positioning “algorithms”? How do they “work”?

• default: static

• initial

• absolute

• fixed

• relative

• sticky

Explain the logic of an absolute element? How will it be positioned (imagine inset: 10px)?

What is a stacking context? What are different ways to create a stacking context?

• Setting opacity to a value less than 1

• Setting position to fixed or sticky (No z-index needed for these values!)

• 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 

How do you achieve a container that can overflow on the y-Axis but not on x-Axis?

overflow-x: clip;