The frontend half of the engineering set: HTML semantics and accessibility, CSS layout and the cascade, JavaScript core semantics, the event loop, and React. Useful both for interviews and for day-to-day work.
You’re reading a free preview. Sign up to see every topic and question — and to play this deck as games.
How boxes are sized and placed, and choosing between one-dimensional flex and two-dimensional grid.
37 total questions
Card #1
What is the CSS box model, from the inside out?
Card #2
What does box-sizing: border-box change?
Card #3
What is margin collapsing?
1. With box-sizing: content-box, an element has width: 200px, padding: 20px and a 2px border. How wide is its border box?
2. In a flex container with flex-direction: row, align-items aligns items along:
3. flex: 1 is shorthand for which three values?
1. Setting box-sizing to ___ makes the declared width include padding and border.
Hint: The opposite of content-box.
2. In a row-direction flex container, justify-content aligns items along the ___ axis.
Hint: The other one is the cross axis.
3. The shorthand flex: 1 expands to grow 1, shrink 1 and a flex-basis of ___.
Hint: Not auto.
