HTML & CSS Interview Question #150

How would you build a production-quality HTML and CSS page from scratch?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Start with the content and document structure. Use semantic HTML for landmarks, headings, navigation, lists, forms, tables, buttons, links, and media. Establish accessibility at the markup level with language information, labels, alternative text, keyboard-operable native controls, and a logical heading hierarchy.

Detailed Explanation

Start with the content and document structure. Use semantic HTML for landmarks, headings, navigation, lists, forms, tables, buttons, links, and media. Establish accessibility at the markup level with language information, labels, alternative text, keyboard-operable native controls, and a logical heading hierarchy.

Create a small CSS foundation with box sizing, typography, design tokens, spacing, colors, and container rules. Use normal flow first, then Flexbox and Grid for layout. Build components with low-specificity selectors, flexible sizing, gap, responsive media, and content-driven breakpoints. Prefer logical properties and test components with long content and narrow containers.

Add responsive behavior, focus states, contrast, reduced-motion handling, themes, and other enhancements deliberately. Optimize fonts and stylesheets based on measurements, and use browser developer tools to test the cascade, overflow, rendering, and performance.

Finally, test across representative browsers and viewport sizes, keyboard navigation, zoom, screen-reader-relevant semantics, slow networks, and real content. Production-quality HTML and CSS is not just visually correct; it should remain semantic, accessible, responsive, maintainable, and performant as the application evolves.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Interview Preparation</title>
    <link rel="stylesheet" href="/css/site.css">
</head>
<body>
    <header class="site-header">
        <nav aria-label="Main navigation">
            <a href="/">Home</a>
            <a href="/interview">Interview</a>
        </nav>
    </header>

    <main class="page">
        <h1>HTML & CSS Interview Questions</h1>

        <section class="question-grid"
                 aria-label="Interview questions">
            <!-- Semantic question cards -->
        </section>
    </main>
</body>
</html>

/* site.css */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.page {
    width: min(100% - 2rem, 75rem);
    margin-inline: auto;
}

.question-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}