Accessibility

Accessible Skip-to-Content Link

A skip-to-content link lets keyboard and screen-reader users jump past the navigation straight to the main content. Most sites get the markup right but hide it permanently with `display: none`, which screen readers also skip. This snippet covers the visually-hidden-until-focus pattern, the matching CSS to keep it usable, and the required `<main>` target so the link actually works.

Accessible Semantic Form Markup

A login or signup form is the highest-traffic interaction on most apps, and getting the semantic markup right pays dividends in screen-reader support, autofill quality, and form validation. This snippet covers a labelled email-and-password form, a form-with-error-summary using `aria-describedby`, and a multi-step fieldset pattern for grouped inputs.

CSS Utility Tricks: Invisible Text and Filters

Two utility recipes that come up over and over: hiding content correctly (visually-hidden but readable to screen readers, plus a decision matrix for the four ways to make something disappear) and using `filter` for cheap visual effects like blur, grayscale, and drop-shadow. Both are short on their own but easy to get wrong, so they live together as a quick reference.

CSS Theming and Custom Properties Quiz

Three drills on theming with CSS custom properties: declaring a token set, switching themes at runtime, and respecting the OS prefers-color-scheme setting.

HTML Semantic Tags and Accessibility Quiz

Quick drills on semantic HTML: why it matters, document outline with sectioning elements, figure/figcaption, and ARIA landmark roles for accessibility.

HTML Forms and Validation Quiz

Four drills on HTML5 forms: building accessible forms with constraint validation, `<datalist>` autocomplete, the `<output>` element for live calculations, and ARIA roles for error reporting.

Behavioral for Frontend Engineers

Frontend behavioral rounds grade for a specific cluster of signals that the rest of engineering does not weight as heavily: substantive collaboration with designers and PMs, performance-and-accessibility judgement under real numbers, browser-and-device variation experience, and the discipline of treating the user-facing surface as the artefact. The behavioral signal is often woven into the system-design and UX-deep-dive rounds rather than concentrated in a dedicated People round. This lesson defines the cross-cutting frontend signals interviewers grade, walks through how the loop folds the behavioral signal into the technical rounds, maps the signals to the questions interviewers actually ask, and shows two model answers tailored to the design-collaboration and performance-investigation story shapes.