Breakpoint
beginnerDefinition
A particular screen width at which a webpage changes its layout to suit the new size. Below the breakpoint the page might show a single column for phones; above it, the same content might rearrange into a multi-column layout for tablets or desktops.
In the wild
A news site shows one big column of articles when viewed on a phone. As you slowly resize the window wider, you cross a breakpoint and suddenly the layout snaps into two columns to take advantage of the extra space. And again into three columns on a wide desktop.
More from Frontend & Responsive Design
Accessibility (a11y)
Building websites and apps so that everyone can use them: including people who can't see well, can't use a mouse, are color-blind, or rely on a screen reader to read pages aloud. Accessibility is partly thoughtful design and partly small technical details done correctly.
ARIA (Accessible Rich Internet Applications)
A set of small labels you can add to webpage elements to tell screen readers and other assistive tools what each piece of the page is and what it's doing. ARIA is useful when the standard tags can't fully explain a custom widget on their own.
Box Model
The mental picture of how every element on a webpage is laid out. Each element is a rectangle made of four nested layers: the actual content in the middle, padding around it (the inner cushion), then a border, then margin (the outer breathing room before the next element starts).
CSS Grid
A way of arranging things on a webpage into neat rows and columns at the same time: like a spreadsheet you can place items into. It's the right tool for page layouts, photo galleries, and anything that needs to line up in a tidy grid.
CSS Specificity
The way a webpage decides which style wins when several styling rules try to apply to the same element. The more precise a rule is, naming a particular item by ID rather than a whole group, the higher its priority. It's why a designer's careful tweak sometimes loses to an older, more specific rule they forgot existed.
CSS Variables (Custom Properties)
Named values you can define once and reuse all over a website's styles: like a brand color, a corner roundness, or a default spacing. Change the value in one place and every spot that uses the variable updates automatically.