Search IOCombats

Search challenges, guides, questions and articles

Interview Prep

Frontend Interview Questions

Scenario-based questions that test how you think, not what you memorised. Every topic is graded beginner to advanced, so you can start where you are and work upward.

178Questions
3Categories
31Topics
Type:
Sort:
Difficulty:

178 questions matched

Compare state-change interpolation with keyframe-driven playback, and learn which one each real interaction actually needs.

beginneranimations transitionscsstransitionanimation

Learn the Block Element Modifier convention, why flat single-class selectors keep specificity constant, and where BEM still applies in a component-framework world.

beginnerarchitecturecssbemarchitecture

Learn the three-column specificity calculation, where inline styles and !important sit in the cascade, and why specificity is only one tiebreaker among several.

beginnercascade specificitycssspecificitycascade

Learn how flex-direction defines the two axes and why every alignment property in Flexbox is meaningless until you know which axis it targets.

beginnerflexboxcssflexboxlayout

Compare the two core Flexbox alignment properties by axis, by what they distribute, and by how their values differ.

beginnerflexboxcssflexboxjustify-content

Centre with Flexbox in two declarations, then compare Grid place-items and absolute positioning with transform on tradeoffs that actually matter.

beginnerflexboxcssflexboxcentering

See exactly how border-box redefines the width property, why it makes layouts composable, and where it can still bite you.

beginnerfundamentalscssbox-sizingborder-box

Understand the four layers every element renders as, and how the two box-sizing modes change what width means.

beginnerfundamentalscssbox-modellayout

Learn where each lives in the box model, how their behaviour diverges, and the concrete cases where swapping them breaks a layout.

beginnerfundamentalscssmarginpadding

Compare the one-dimensional and two-dimensional layout models, then apply a concrete decision rule based on who controls the sizing.

beginnergridcssgridflexbox

Compare all five position values by whether they stay in flow, what they are offset from, and what each one is actually good for.

beginnerpositioningcsspositionlayout

Compare absolute and relative CSS units by what they resolve against, and learn the accessibility and compounding consequences of each choice.

beginnerresponsive designcssunitsrem

Compare min-width and max-width strategies by their base styles, override direction, and what each one does to specificity and performance.

beginnerresponsive designcssmedia-queriesmobile-first

One selects existing elements in a particular state, the other creates a sub-part that is not in the DOM. Learn the syntax, specificity, and limits of each.

beginnerselectors pseudocsspseudo-classpseudo-element

Understand the anatomy of a React function component, how JSX compiles, and the rules that make a valid component.

beginnerfundamentalsreactcomponentsjsx

Understand the key differences between functional and class components, why hooks changed everything, and why functional components are now the standard.

beginnerfundamentalsreactfunctional componentsclass components

Understand the difference between props and state in React, when to use each, and how they interact to drive rendering.

beginnerstate lifecyclereactpropsstate

Understand what JSX compiles to, why it exists, and the rules that govern how you write it correctly.

beginnerfundamentalsreactjsxbabel

Understand React as a UI library, how its declarative model and virtual DOM work, and why it became the dominant choice for frontend development.

beginnerfundamentalsreactvirtual domdeclarative

Understand the differences in scope, this binding, and syntax between arrow and traditional functions.

beginnerfundamentalsjavascriptarrow functionsthis
...
How to use this

Stop scrolling random lists. Build real confidence.

Whether you are preparing for your first frontend role or a senior interview, the goal is the same: explain, implement, and optimise under questioning. Three habits make that happen faster.

  • Read the walkthrough before the code, so the code confirms a model you already hold
  • Say the answer out loud — the readiness checklist is the test, not the prose
  • Work a category beginner to advanced rather than cherry-picking hard questions