Frontend
450 bites tagged Frontend: interview questions with model answers, and 60-second explainers.
Test yourself: Top 30 Frontend interview questions →Multiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.Using personas to drive technical decisions
Derive constraints like device, network, accessibility from personas; let them shape framework, payload shape, performance budgets.
SVG icons versus icon fonts: technical trade-offs
SVG is vector markup, crisp, multicolor, accessible, and tree-shakeable; icon fonts ship as glyphs, risk anti-aliasing blur, accessibility hacks, and load-failure boxes. Advocate SVG for modern apps.
Limitations of Figma Dev Mode generated code
Dev Mode output is static, absolute-positioned, non-semantic, and ignores responsiveness, state, and your component system; use it for values and structure, then refactor to semantic, tokenized…
What is JSX and how does the browser run it?
JSX is XML-like syntax compiled to React.createElement calls; it differs from HTML via className and camelCase; browsers never see JSX, only transpiled JS.
Front-end performance budgets
A performance budget is an enforced limit on metrics like Core Web Vitals and bundle size, checked in CI to fail builds that regress.
Structuring Storybook stories for visual states
One named story per state with explicit args, plus argTypes and controls.
Clickable card: div onClick versus anchor tag
Use an a tag for navigation; it is focusable, keyboard-activatable, announced as a link, and supports open-in-new-tab; a div onClick loses all of that without manual ARIA work.
Styling a parent with the :has() selector
:has() matches an element that contains or relates to a given selector, enabling upward styling; figure:has(figcaption) targets captioned figures.
Native CSS nesting and the parent selector
Nest rules inside a block, descendant selectors combine implicitly, & references the parent and is required for compound or pseudo-class joins.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally.
Purpose of a design system for developers
A single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility.
Sass @mixin versus @extend
@mixin copies declarations into each caller, accepts arguments, and can duplicate code; @extend groups selectors sharing one rule via a comma list, reducing duplication but coupling selectors.
What is nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming.
What is a CSS pre-processor?
A pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser.
Using :is() and :where() to manage specificity
:is() groups selectors and takes its most specific argument's specificity, :where() does the same grouping but contributes zero specificity, ideal for easily overridable defaults.
How custom properties enable dynamic theming
Custom properties cascade and resolve live, so redefining them on a scope or data attribute reskins everything via var().
What are the two principles of OOCSS?
Separate structure from skin, and separate container from content; this lets visual themes and layout be mixed and reused independently.
Explain the BEM naming convention
Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat.
What are CSS variable fonts?
One file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings.
What is a CSS containing block?
Containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport.
Pseudo-class versus pseudo-element in CSS
Pseudo-classes target an element in a state, pseudo-elements style a generated or sub-part using double colons, and ::before injects decorative content.
Nuxt 4.4 Adds Custom Fetch Factories and Router v5
Nuxt 4.4 ships createUseFetch factories, Vue Router v5, and 28x faster dev route updates. Custom fetch instances with typed defaults cut API boilerplate, while the router upgrade drops unplugin-vue-router and clears the path for stable typed routes.
SvelteKit 2.56 overhauls remote functions, adds TypeScript 6.0
SvelteKit 2.56 overhauls remote functions with breaking changes to query refreshes, caching, and a new run() method, plus TypeScript 6.0 support. The Svelte CLI adds experimental community plugins. Audit your remote function calls before upgrading.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.