Frontend & Responsive Design

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.

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.

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).

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.

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.

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.

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.

A modern way to arrange a row (or column) of items on a webpage and easily control how they line up, how much space each one takes, and what to do with the leftover space. Perfect for things like a navigation bar with a logo on the left and menu items on the right.

A way to tell a webpage 'apply these styles only when the screen looks like this.' It's how the same site can show one layout on a phone, another on a tablet, and another on a desktop: without needing to be three separate websites.

A way of designing a website where you start by making it work beautifully on a small phone screen, and only then add the extra touches that make sense on bigger screens. Starting small forces you to decide what really matters and cut everything else.

Three different units for sizing things on a webpage. 'px' is a fixed measurement that never changes. 'em' is relative to the size of whatever it's nested inside. 'rem' is relative to the page's overall base size: which makes it predictable and friendly to people who change their browser's text size for readability.

Offering several sizes of the same picture and letting the visitor's browser pick whichever one fits their screen best. A phone on a slow connection grabs a small lightweight version, while a wide retina laptop grabs a bigger crisp one. Same picture; right size every time.

Using webpage tags that describe what each piece actually is, a navigation menu, an article, a button, a heading, instead of just generic boxes. Search engines and screen readers use those labels to make sense of the page; without them, everything looks the same to the machines.

The slice of a webpage you can actually see in the browser window. On a phone, the viewport is small; on a wide monitor, it's large. Designers think carefully about the viewport because the same page has to look right at every possible size.