Frontend Developer English Essentials

Components & state

component

A reusable, self-contained piece of UI with its own markup and logic.

props

Read-only inputs passed from a parent component into a child.

state

Data a component owns and can change over time, triggering re-renders.

hook

A function (useState, useEffect) that lets a component use state and side effects.

re-render

When a component runs again to update the UI after its state or props change.

prop drilling

Passing props down through many layers just to reach a deep child.

lifting state up

Moving shared state to a common parent so siblings can use it.

controlled input

A form field whose value is driven by state, not the DOM.

lifecycle

The phases a component goes through — mount, update, unmount.

side effect

Work outside rendering — fetching data, timers, subscriptions.

memoization

Caching a computed value or component so it isn’t recomputed needlessly.

virtual DOM

An in-memory tree the framework diffs to make minimal real DOM updates.

reconciliation

The diffing process that decides what actually changes in the DOM.

context

A way to share values across the tree without prop drilling.

render prop

A prop that is a function returning what to render — a reuse pattern.

CSS & layout

flexbox

A one-dimensional layout system for arranging items in a row or column.

grid

A two-dimensional layout system for rows and columns at once.

specificity

The weighting that decides which conflicting CSS rule wins.

cascade

The order in which CSS rules are applied when several match.

box model

How content, padding, border and margin combine to size an element.

responsive design

Layouts that adapt to different screen sizes.

breakpoint

A screen width where the layout changes, set with a media query.

media query

A CSS rule that applies styles only under conditions like a min-width.

viewport

The visible area of the page in the browser window.

z-index

Stacking order — which overlapping element appears in front.

rem / em

Relative font-size units; rem is relative to the root, em to the parent.

design token

A named, reusable value (a colour, a spacing) shared across the design system.

utility class

A small single-purpose class like `mt-4`, used by Tailwind-style CSS.

overflow

How content that exceeds a box is handled — clipped, scrolled, or visible.

Performance

LCP

Largest Contentful Paint — when the main content becomes visible. A Core Web Vital.

CLS

Cumulative Layout Shift — how much the page jumps around as it loads.

INP

Interaction to Next Paint — how quickly the page responds to user input.

lazy load

Loading images or code only when they’re actually needed.

code splitting

Breaking the JS bundle into chunks loaded on demand.

bundle

The packaged, minified JS/CSS the browser downloads.

tree shaking

Removing unused code from the bundle at build time.

hydration

Attaching JavaScript behaviour to server-rendered HTML in the browser.

SSR

Server-Side Rendering — generating HTML on the server per request.

SSG

Static Site Generation — building HTML at build time.

critical CSS

The minimal CSS needed to render what’s above the fold first.

debounce

Delaying a handler until input stops, to avoid running it on every keystroke.

reflow

The browser recalculating layout — expensive if triggered repeatedly.

Accessibility

ARIA

Attributes that describe roles and states to assistive tech when HTML alone can’t.

semantic HTML

Using the right element (button, nav, header) for its meaning, not just divs.

screen reader

Software that reads the page aloud for blind or low-vision users.

focus

The element currently receiving keyboard input.

focus trap

Keeping keyboard focus inside an open dialog until it’s closed.

tab order

The sequence focus moves through with the Tab key.

alt text

A text description of an image for users who can’t see it.

contrast ratio

How distinguishable text is from its background; WCAG sets minimums.

WCAG

The Web Content Accessibility Guidelines, the standard for accessible web content.

landmark

A region (main, nav, footer) screen readers let users jump between.

Key phrases frontend developers use at work

• The Figma handoff looks great — quick question on the spacing between the cards.
• Can you export this icon as an SVG and share the hover state?
• This only reproduces in Safari — looks like a flexbox gap bug.
• It works on my machine but breaks on mobile — let me check the breakpoint.
• We’ve got a layout shift on load; I’ll reserve space for the image to fix the CLS.
• The bundle grew by 40 KB — let’s code-split this route.
• There’s a re-render loop here; the effect is updating state it also depends on.
• We’re prop drilling three levels deep — let’s move this into context.
• Nit: this should be a button, not a div with a click handler — it’s not keyboard accessible.
• The contrast ratio fails WCAG AA; can we darken the text slightly?
• Screen readers skip this because there’s no alt text on the image.
• Let me lift this state up to the parent so both panels stay in sync.
• The hydration mismatch warning means the server and client rendered different HTML.
• LGTM — clean component, nice use of memoization.
• I’d pull this into a reusable component rather than copy-pasting the markup.
• Heads up: this CSS override only works because of specificity — it’s fragile.
• Could we lazy-load the chart library? It’s not needed above the fold.
• The focus isn’t trapped in the modal, so Tab escapes behind it.
• Yesterday: shipped the responsive nav. Today: fixing the LCP regression. No blockers.
• Is this design final, or should I build it behind a feature flag for now?