CSS Modules

Semantic HTML means using HTML elements that clearly describe their meaning and purpose, such as `<article>`, `<nav>`, `<header>`, and `<section>`, instead of generic `<div>` tags. This practice improves accessibility for screen readers, boosts SEO by helping search engines understand page structure, and makes code far more readable for other developers. It's considered a foundational best practice in modern web development.

Infinite scroll is a UX pattern where new content loads automatically as the user scrolls toward the bottom of the page, eliminating traditional pagination. It's commonly used in social media feeds and content discovery interfaces. While it increases engagement and feels seamless, it can hurt performance without virtualization and makes it difficult for users to reach footer content or bookmark specific positions.

The View Transitions API is a browser-native way to create animated transitions between different DOM states or page navigations, previously only possible with complex JavaScript animation libraries. It captures a snapshot of the current state, applies the DOM update, then animates between the old and new snapshots using CSS. This API works for both single-page app state changes and multi-page navigations, enabling smooth page transitions with minimal code that feels native to the platform.

CSS Animation uses `@keyframes` rules and the `animation` property to create complex, multi-step animations entirely in CSS without JavaScript. Combined with CSS transitions for simple state changes, these tools handle most UI animation needs performantly since browsers can optimize them on the GPU compositor thread. Properties like `transform` and `opacity` are particularly efficient to animate because they don't trigger layout recalculations or repaints.

Flexbox (Flexible Box Layout) is a one-dimensional CSS layout model designed for distributing space and aligning items within a container along a single axis — either horizontal or vertical. It excels at handling dynamic content sizes, centering elements, and creating flexible navigation bars, card rows, and form layouts. Properties like `justify-content`, `align-items`, and `flex-grow` give you fine-grained control over how items share available space.

Drag and drop is an interaction pattern that lets users move, reorder, or transfer UI elements by clicking (or touching), holding, and dragging them to a new position. It's used for file uploads, kanban boards, sortable lists, and layout builders. The HTML Drag and Drop API provides native browser support, while libraries like dnd-kit and react-beautiful-dnd offer more polished, accessible, and touch-friendly implementations.