Layout interview questions
Practice 10 questions on layout. Each runs in a real in-browser editor with Jest tests and a worked, diagram-backed solution.
10 questions
- EASY
Avatar Group
Build a row of overlapping avatars that collapses the overflow into a plus-N badge.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Holy Grail
Build the classic holy grail page layout with a header, footer, and three columns of content.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Tweet
Build a static tweet component that mirrors the layout of a single post on Twitter.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Birth Year Histogram
Build a widget that fetches birth year data from an API and renders it as a histogram of bucketed counts.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Heatmap Calendar
Build a contribution-style heatmap calendar that colors each day cell by its activity value.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Reading Order
Implement a function that sorts positioned canvas elements into natural left-to-right, top-to-bottom reading order.
25 minAlgorithms - MEDIUM
Resizable Split Pane
Build two panes split by a draggable divider that resizes them within min and max bounds.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Calendar Scheduler
PREMIUMBuild a week-view scheduler where events render in time slots and can be added by clicking a slot.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Gantt Chart
PREMIUMBuild a Gantt chart that renders tasks as bars positioned across a timeline by start and duration.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Image Cropper
PREMIUMBuild an image cropper with a draggable, resizable crop region over an image.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue