CSS & HTML Assessment Test for Hiring

1. You are building a site header with a logo, primary navigation, a search form, and a “Start Free Trial” action. Which markup choice is strongest?

• A.Wrap everything in nested div elements because CSS classes are enough for structure.
• B.Use a <header> containing a <nav>, a properly labeled search <form>, and a real <a> or <button> for the primary action depending on behavior.
• C.Use a <section> for the whole header and add ARIA roles to every child element regardless of native semantics.
• D.Use a table because alignment is easier for mixed content.

2. A product card grid should show 4 columns on desktop, 2 on tablet, and 1 on mobile while handling variable card heights cleanly. Which approach is strongest?

• A.Use CSS Grid with responsive columns such as repeat(auto-fit, minmax(...)) and let cards flow naturally.
• B.Use absolute positioning for each card at every breakpoint.
• C.Use floats and clearfix utilities because they are simpler to debug.
• D.Use a single-row Flexbox container and force fixed heights on every card.

3. A button looks visually prominent, but keyboard users cannot tell when it is focused because the outline was removed. What is the best fix?

• A.Leave it as-is because mouse users do not need a focus ring.
• B.Add JavaScript that briefly flashes the border on click.
• C.Restore a visible :focus or :focus-visible style with sufficient contrast and preserve keyboard discoverability.
• D.Replace the button with a styled div.

4. Two selectors conflict: .card .title and #pricing .card .title. The page is becoming hard to maintain because new overrides keep appearing. What is the best long-term move?

• A.Keep adding IDs because higher specificity solves the issue quickly.
• B.Move toward lower-specificity, reusable classes or component-scoped conventions so styles are easier to predict and override intentionally.
• C.Use !important on all title styles.
• D.Inline every style in the HTML.

5. An image-heavy landing page has layout shift during load. Which HTML/CSS improvement helps most directly?

• A.Increase box-shadow on hero images.
• B.Add explicit width and height or aspect-ratio handling so the browser reserves space before the image loads.
• C.Hide images until the page fully loads with display:none.
• D.Move all CSS into inline style attributes.

6. A custom dropdown was built from div elements and needs keyboard support, labeling, and screen-reader clarity. What is usually the best recommendation?

• A.Keep the custom widget and add random tabindex values until it feels usable.
• B.Replace it with a native <select> if the interaction requirements allow, because native controls provide accessibility and behavior for free.
• C.Turn it into a paragraph with onclick events.
• D.Remove labels to reduce screen-reader noise.