Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Utility-First CSS: Style Directly in Your Markup
Utility-first CSS styles elements with many small, single-purpose classes directly in your HTML. It's used for rapid prototyping and component-based systems. The footgun is creating verbose, repetitive markup by not extracting common patterns into components.
CSS Custom Properties: Variables for Your Stylesheet
CSS Custom Properties are variables for your stylesheet. Define a value like `--primary-color` once on `:root` and reuse it with `var()`, making global theme changes easy. The main footgun: they only work for property values, not names or selectors.
CSS Transitions: Animating State Changes
CSS transitions turn abrupt style changes into smooth animations. Instead of a button's color snapping on hover, it fades gracefully. Use this for visual feedback on state changes like `:hover` or when adding classes with JavaScript.
Media Queries: CSS That Adapts to the User's Device
Instead of one-size-fits-all CSS, media queries let your styles react to the user's device. They are used to change layouts for different screen widths, orientations, or display resolutions. The footgun is only testing for width, ignoring other factors.
Relative CSS Units: rem vs. em
Relative CSS units like `rem` and `em` tie element sizes to font size for scalable UIs. `rem` is relative to the root font size, providing consistency. `em` is relative to the parent, causing sizes to compound. The footgun is accidentally nesting `em` units.
CSS Logical Properties: Layout That Speaks Every Language
Think 'start/end' not 'left/right'. CSS Logical Properties adapt your layout to the user's writing direction, from English to Arabic. Use `padding-inline-start` instead of `padding-left` for robust, internationalized sites.
CSS Grid: Placing Items on the Grid
Think of CSS Grid as a coordinate system for your layout. You can explicitly place items using line numbers or named areas, or let the browser auto-place them. This is key for page scaffolds and galleries. Footgun: Grid lines are numbered from 1, not 0.
CSS Color Values: From Keywords to Functions
CSS offers multiple ways to define colors, from simple names like `red` to functions like `rgb()`. Use keywords for mockups, hex for design handoffs, and HSL for intuitive manipulation. The main footgun: colors can look different across uncalibrated devices.
CSS Positioning: Taking Elements Out of Normal Flow
CSS `position` lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to `top`/`left` coordinates instead. Use it for overlays, modals, and sticky headers.
CSS 'display': How Elements Occupy Space
The CSS `display` property defines an element's layout role: does it demand its own line (`block`) or share space (`inline`)? It's essential for everything from text flow to complex layouts with `flex` and `grid`.
CSS Selectors: How to Target HTML for Styling
CSS selectors are like addresses for your HTML, telling the browser which elements to style. They're used to apply everything from colors to layouts. The main footgun is specificity: an overly specific selector can be difficult to override later.
CSS Box Model: Every Element is a Box
Every HTML element is a box with layers: content, padding, border, and margin. This model dictates how elements take up space and align, forming the basis of all CSS layout. The footgun is the default sizing, which adds padding *outside* the set width.
CSS Specificity: The Browser's Tie-Breaking Rule
CSS Specificity is the browser's tie-breaking system for conflicting styles. Think of it as a score: an ID is worth more than any number of classes, and a class is worth more than any number of elements. The footgun: using `!important` to win.
CSS Cascade: How Browsers Resolve Style Conflicts
The CSS Cascade is a tie-breaking algorithm that decides which style rule applies when multiple rules target the same element. It resolves conflicts between browser defaults, user styles, and your CSS.
WCAG: The Technical Standard for Web Accessibility
WCAG is the technical rulebook for making web content usable by people with disabilities. It provides testable criteria for websites and apps, often required by law. The footgun is aiming too low; Level AA is the standard target, not just Level A.
Real User Monitoring (RUM): See Your App Through Users' Eyes
Real User Monitoring (RUM) is like a flight recorder for your app, capturing real user clicks, load times, and errors. It's used to measure actual performance and diagnose slowdowns, revealing issues that lab testing misses.
Tag Management Systems: Control Your Analytics Snippets
A Tag Management System (TMS) is a single container for all the analytics and marketing scripts you'd otherwise hardcode. Instead of asking engineers to add new scripts, you add them via a web UI.
Event Autocapture: Low-Effort Frontend Analytics
Event autocapture is like a security camera for your UI, recording all user interactions automatically. It's used in web analytics to capture clicks and page views with minimal setup, letting you analyze behavior without manually instrumenting every button.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.