Easy everything in Frontend Dev, page 8
Where and how to import global stylesheets in Next.js
This tests Next.js style entry points. In the App Router, import global CSS in the root layout.js; in the Pages Router, import it in _app.js. Never import global styles inside pages or components, since Next.js restricts global CSS to root-level files.
How do CSS Modules solve global scope conflicts in React?
This tests build-time hashing and local scope. An answer explains that CSS Modules compile classes into unique hashes, scoping styles to the component, and shows the React import pattern styles.primary.
What is a custom hook? Write a simple useToggle example.
What it tests: Whether you see hooks as stateful logic extraction. Outline: Define a use-prefixed function calling hooks; write useToggle with useState and callback; explain extraction vs duplication. Red flag: Helpers without hooks or missing use prefix.
How does children work, and why is it fundamental to composition?
Tests React composition knowledge. Good answer: children is a prop holding nested JSX; a Card wrapper renders {children} to let parents inject markup; contrast with prop-driven text. Red flag: calling children magic syntax instead of a standard prop.
What is prop drilling in React?
Define it as threading props through middle layers; give a three-layer example like a theme toggle; cite useContext.
![Explain useEffect dependency array behavior for [], [deps], and omitted](/_next/image?url=https%3A%2F%2Freact.dev%2Fimages%2Fog-reference.png&w=1600&q=75)
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
How do you use useState to track user input?
Initialize with useState at top level, bind input value to state, and update via onChange using setter.
What are the two main ways to define a component in React?
Tests fluency in function and class syntax. Outline: show a function returning an h1; show a class with render() returning an h1; note functions are the React 19 default. Red flag: offering arrow vs function declaration as the two ways, or omitting render().
Explain props in React and how parent components pass data to children
Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
How do you trigger a CSS transition? Provide two methods.
Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.
Make an image scale fluidly without exceeding its original size
Tests intrinsic sizing awareness. Good answer: max-width: 100% scales the image down with its container but never stretches it beyond intrinsic size; add height: auto to preserve aspect ratio. Red flag: width: 100% or omitting height, causing distortion.
Explain the mobile-first approach and how it differs from desktop-first
Mobile-first starts small, layers up with min-width; desktop-first starts large, overrides down with max-width.
What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?
This tests mobile viewport behavior and CSS pixels. The tag instructs browsers how to size the viewport; width=device-width sets width to screen CSS pixels; initial-scale=1.0 sets a 1:1 zoom ratio. A red flag is confusing viewport width with physical pixels.
CSS Grid: difference between 1fr and auto column sizing?
Tests fractional vs intrinsic sizing. 1fr divides leftover space; auto shrinks to content. Note that 1fr minimums default to auto, causing overflow with unbreakable content, unlike auto tracks. Red flag: claiming they are identical or auto always fills space.
Explain em, rem, px and why rem is preferred for font sizing
This tests CSS unit semantics and accessibility. px is absolute; em compounds against its parent; rem is root-relative and predictable. rem respects user browser font settings without nesting issues.
How do you declare a custom font and apply it to headings?
This tests @font-face usage for custom web fonts. A good answer declares a font-family name and src URL inside @font-face, then applies that family to heading selectors.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue.
How do class and ID selectors differ in specificity and use case?
IDs are 1-0-0 and meant for unique elements; classes are 0-1-0 and reusable.
What color wins when an ID and class rule conflict?
Red wins; an ID scores 1-0-0 while a class scores 0-1-0, so the ID rule beats the class rule.
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles