Implement Bootstrap-like responsive utility classes

Quick Overview

This question evaluates proficiency in front-end engineering, including CSS utility system design, responsive grid layout, semantic HTML, accessibility (ARIA and focus management), form validation, asynchronous submission patterns, and lightweight JavaScript for interactivity and telemetry.

Implement Bootstrap-like responsive utility classes

Company: DoorDash

Role: Software Engineer

Category: Software Engineering Fundamentals

Difficulty: hard

Interview Round: Onsite

Implement a responsive grid layout and form using a Bootstrap-like utility-class approach without importing any external CSS frameworks. Define your own reusable CSS utility classes (e.g., container, row, col-*, spacing, typography) with mobile-first breakpoints, support nesting and gutters, and build accessible components such as a navbar, buttons, inputs, and validation messages. Provide the HTML/CSS (and minimal JavaScript if needed) to demonstrate responsiveness and semantic accessibility. As a follow-up, design robust error handling for invalid inputs and asynchronous form submission failures, including user-facing states (loading, success, retryable error, non-retryable error) and telemetry.

Quick Answer: This question evaluates proficiency in front-end engineering, including CSS utility system design, responsive grid layout, semantic HTML, accessibility (ARIA and focus management), form validation, asynchronous submission patterns, and lightweight JavaScript for interactivity and telemetry.

|Home/Software Engineering Fundamentals/DoorDash
DoorDash logo
DoorDash
Sep 6, 2025, 12:00 AM
hardSoftware EngineerOnsiteSoftware Engineering Fundamentals
6
0

Build a Bootstrap-like Utility System and Accessible Responsive Form (No External CSS)

Context

You are asked to create a minimal, reusable CSS utility system inspired by Bootstrap (grid, spacing, typography, components) without importing any external frameworks. Demonstrate it with an accessible, responsive page that includes a navbar, a layout using a grid, and a form with strong validation and error handling. Include minimal JavaScript to manage interactivity, validation, async submission, and telemetry.

Requirements

  1. Utility classes (mobile-first):
    • Container, rows, columns with gutters and support for nesting
    • Breakpoints (e.g., sm, md, lg)
    • Spacing utilities (m- , p- , directional variants)
    • Typography helpers (e.g., text-center, text-muted)
  2. Components:
    • Accessible navbar with mobile toggle
    • Buttons
    • Form inputs with labels, helper text, and validation messages
  3. Responsive grid:
    • col- , col-sm- , col-md- , col-lg- (common fractions are acceptable)
    • Gutters adjustable via utilities
    • Show nesting
  4. Accessibility:
    • Proper semantics (nav, main, form)
    • Label–control association
    • aria-* for errors, aria-live for status
    • Focus management and keyboard operability
  5. Async form submission with robust error handling:
    • Client-side validation (required fields, email format)
    • User-facing states: loading, success, retryable error (e.g., network/5xx), non-retryable error (e.g., 4xx)
    • Retry flow
    • Telemetry for key events (start, success, failure, retry), using sendBeacon when possible
  6. Deliverables:
    • Provide the HTML, CSS, and minimal JavaScript in a single example that demonstrates responsiveness, accessibility, and error handling.
Loading comments...