Frontend Fundamentals: HTML, CSS, and Responsive Styling Questions

Trade-offs:

• Performance: webfonts add bytes and can cause FOIT/ FOUT; slow networks amplify delay.
• UX: invisible or sudden font swaps harm readability and layout.
• Licensing: fonts may have restrictive EULAs, require proper hosting or subsetting.
  Mitigations:
• Subset fonts to needed glyphs and weights; deliver WOFF2 and use variable fonts where appropriate.
• Loading strategy: preload critical fonts, use font-display: swap or optional depending on importance; consider FOIT for hero text only.
• Metric matching: choose system fallback with similar metrics and use CSS adjustments (font-size-adjust, letter-spacing) to reduce layout shift.
• Caching & CDN: host fonts on CDN with long TTL and proper CORS headers.
• Accessibility: test reading flow; support prefers-reduced-motion and system fonts when necessary.
  Trade-off rationale: balance brand fidelity with performance by prioritizing only critical brand glyphs/weights and graceful fallbacks.

Definition: box-sizing controls how width/height are calculated. content-box (default) measures width/height of content only; padding and border add on. border-box includes padding and border within the specified width/height.
Why prefer border-box in a design system: predictable sizing—elements keep intended layout when padding/border change; easier to compose components and avoid layout shifts across browsers.
Example surprise with content-box:
A card styled as width:200px; padding:20px; border:2px solid. With content-box the rendered total width becomes 200 + 40 + 4 = 244px, which can break grid layouts and cause overflow. Using box-sizing: border-box keeps the visual width exactly 200px regardless of padding/border, simplifying responsive and nested components. Set: * { box-sizing: border-box; } in base styles for consistency.

FLIP = First, Last, Invert, Play. It avoids layout thrashing by animating only transforms.

How to apply to reorder list items:

1. First: record each element's current bounding rect (getBoundingClientRect) before DOM change.
2. Last: apply the DOM reorder (e.g., move nodes) and record new bounding rects.
3. Invert: compute delta for each item: dx = first.left - last.left; dy = first.top - last.top; apply transform: translate(dx,dy) to visually place item back where it started.
4. Play: remove transform over a transition to translate(0,0) so the browser animates the item to its new position using transform (GPU-composite only).

Why it improves performance: transforms are composited and avoid layout/paint of other elements; the browser can run them on the compositor thread at 60 FPS. FLIP minimizes reflow and expensive paints, resulting in smooth reordering animations even with many elements. Use requestAnimationFrame to batch reads/writes and cancel layout thrashing.

Checklist for interactive components (buttons, inputs, dialogs):

1. Keyboard focus order & visible focus styles — Ensure logical tab order and clear focus indicator (not removed). Important so keyboard-only users can navigate and know current focus.

2. ARIA roles & attributes — Use role="button"/role="dialog", aria-expanded, aria-controls, aria-labelledby. Provides semantic meaning to assistive tech.

3. Contrast & hit target size — Text/icon contrast >=4.5:1, interactive targets >=44x44px. Improves readability and tap accuracy for low vision and motor-impaired users.

4. Labeling & instructions — Provide visible labels and aria-label/aria-describedby for extra context (errors, helper text). Prevents ambiguity for screen reader users.

5. Announcements for dynamic changes — Use aria-live or role=alert for status updates and opened/closed dialogs. Ensures assistive tech users receive state changes.

6. Focus management for dialogs & menus — Trap focus when open, return focus to triggering control on close. Prevents focus loss and disorientation.

7. Avoid relying on color/hover — Don’t use color alone to convey state; provide text or icon indicators and ensure hover-only interactions have keyboard alternatives.

8. Motion preferences — Respect prefers-reduced-motion: reduce/disable non-essential animations to avoid vestibular issues.

Each item maps directly to common accessibility failures and should be included in the design spec with examples and acceptance criteria.

Option 1: CSS Grid — define grid-template-columns: repeat(3, 1fr); and a media query @media(max-width: 768px){grid-template-columns: 1fr;} Trade-off: precise two-dimensional control and gap handling, but older browser quirks and more verbose for simple linear flows. Option 2: Flexbox — .container {display:flex; flex-wrap:wrap;} .card{flex:1 1 calc(33.333% - 16px);} and media query set flex-basis:100% on mobile. Trade-off: simpler for single-row wrapping but less control over row/column alignment and equal-height rows. Both should be mobile-first; choose Grid for complex gaps/layout, Flex for linear, content-driven lists.