Media Queries

Accessibility (often abbreviated a11y) is the practice of designing and building websites and apps so they can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. This involves proper semantic markup, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Beyond being an ethical responsibility, accessibility is increasingly a legal requirement in many jurisdictions.

Figma is a browser-based collaborative design tool used for creating UI designs, prototypes, and design systems. Its real-time multiplayer editing, component system, auto layout, and dev mode have made it the industry standard for product design. Developers use Figma to inspect designs, extract CSS values, export assets, and — through plugins and APIs — automate the design-to-code workflow.

JSX (JavaScript XML) is a syntax extension for JavaScript used primarily in React that lets you write HTML-like markup directly within your JavaScript code. It gets transpiled by tools like Babel or SWC into regular `React.createElement()` calls before reaching the browser. JSX supports embedding dynamic expressions with curly braces, conditional rendering, and mapping over arrays, making it a powerful and intuitive way to describe UI structures declaratively.

Breadcrumb navigation is a secondary navigation pattern that shows the user's current location within a site hierarchy as a trail of links (e.g., Home > Products > Shoes). It helps users understand where they are and quickly navigate back to parent pages without relying on the browser's back button. Proper implementation uses an ordered list within a `<nav>` element with `aria-label="Breadcrumb"` for accessibility.

Flutter is Google's open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single Dart codebase. Unlike React Native which maps to platform-native UI components, Flutter renders everything with its own high-performance Skia/Impeller rendering engine, giving developers pixel-perfect control over every element on screen. This approach ensures identical visual output across platforms but means Flutter widgets don't automatically adopt platform-specific design conventions.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes like `flex`, `pt-4`, `text-center`, and `bg-blue-500` to build designs directly in your markup. Instead of writing custom CSS, you compose pre-built classes to create any design, which results in smaller final CSS bundles thanks to automatic purging of unused styles. Its configuration file allows full customization of the design system including colors, spacing, breakpoints, and typography.