HTML and CSS skills
employers test in 2027

Every web interface, however it's built, ends as HTML and CSS in the browser. Semantic HTML determines whether assistive technology and search engines understand a page; CSS determines whether layouts are responsive, consistent and maintainable. That is why front-end, UI and web roles test them directly — and why HTML/CSS sits near the top of technologies used by professional developers in Stack Overflow's 2025 survey.⁶

These skills are the entry point to the largest group of web jobs in India: AmbitionBox lists about 68,600 front-end developer salaries, with typical pay of ₹6.1–6.7 lakh in October 2026.⁷

Professional developers using HTML/CSS (Stack Overflow, 2025)

~63%

Typical front-end developer pay in India (AmbitionBox, Oct 2026)

₹6.1–6.7 lakh

The accessibility standard markup is judged against

WCAG 2.2

Layout systems to master: flexbox and grid

2

Table: How HTML and CSS are tested in interviews (editorial summary)

MDN's learning area and web.dev's Learn CSS course are excellent free references,¹³ and web.dev's Baseline tells you which modern CSS features are safe to use across browsers.⁵

<form>
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-hint">
  <p id="email-hint">We'll send your invoice here.</p>

  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="plan" value="yearly"> Yearly</label>
  </fieldset>

  <button type="submit">Start free trial</button>
</form>

Why it passes: every input has a real label, the hint is linked with aria-describedby, the email type gives mobile keyboards and validation, autocomplete helps users, radio buttons are grouped with a legend, and a real button submits the form — keyboard and screen-reader support come free.

"Explain the box model."

Each element is content plus padding, border and margin. With box-sizing: border-box, width includes padding and border, which makes layouts easier to reason about.

"Why isn't my z-index working?"

z-index only works within a stacking context and on positioned (or flex/grid) items; a parent with its own stacking context (for example, opacity or transform) can trap the child.

"Flexbox or grid for a card layout?"

Grid for the overall rows and columns of cards; flexbox inside each card to align content.

"How do you center something?"

For most cases, display: grid with place-items: center on the parent, or flexbox with justify-content and align-items.

"em vs rem vs px?"

px is absolute; em is relative to the element's font size; rem to the root font size — rem keeps sizing consistent and respects user preferences.

"Button or link?"

Links navigate to a URL; buttons perform actions. Using the right one gives correct keyboard behaviour and meaning.

"How do you make images responsive?"

max-width: 100% and height: auto, plus srcset and sizes so the browser picks the right file.

"What's the difference between display: none and visibility: hidden?"

display: none removes the element from layout and the accessibility tree; visibility: hidden keeps its space but hides it.

Table: How HTML and CSS expectations have changed (editorial summary)

1. Rebuild three real pages — A pricing page, a blog article and a dashboard shell, with no CSS framework.
2. Keyboard-only test — Navigate each page with Tab, Enter and Space; fix anything you can't reach.
3. Grid layouts — Build a responsive card grid with grid-template-columns: repeat(auto-fill, minmax(...)).
4. Specificity puzzles — Predict which rule wins in ten conflicting examples, then check.
5. Container query card — Make one component adapt to its container width, not the viewport.

Table: Roles that rely on HTML and CSS and typical pay in India (AmbitionBox, October 2026; indicative)

1. Week 1: Semantic HTML and forms — Landmarks, headings, labels, buttons vs links.
2. Week 2: CSS core — Box model, cascade, specificity, units.
3. Week 3: Layout — Flexbox, grid, responsive and container queries.
4. Week 4: Accessibility and proof — Keyboard and contrast checks; take the HTML and CSS Fundamentals Certification.

Next: JavaScript Fundamentals, Responsive Web Design and Accessibility. Our JavaScript interview guide is the natural next read.

• Implementing designs — turning Figma screens into responsive layouts that match spacing and type scales.
• Component styling — building buttons, cards and forms in a design system with consistent tokens.
• Accessibility fixes — adding labels, focus styles and landmarks after an audit.
• Cross-browser checks — testing layouts on mobile Safari, Chrome and older Android browsers.
• Performance — reducing layout shifts and unused CSS.
• Email and CMS work — writing robust HTML for email clients or content templates.

"What is the difference between relative, absolute, fixed and sticky positioning?"

Relative offsets an element from its normal position; absolute positions it relative to the nearest positioned ancestor and removes it from flow; fixed positions it relative to the viewport; sticky behaves relatively until a scroll threshold, then sticks.

"How do CSS custom properties help?"

They store reusable values (colours, spacing) that cascade and can change at runtime — the basis of themes and design tokens.

"What does the alt attribute do, and when should it be empty?"

It describes an image for screen readers and when images fail to load; decorative images get alt="" so assistive technology skips them.

"How do you make a site work for users who zoom to 200%?"

Use relative units, flexible layouts and avoid fixed heights so content reflows instead of overlapping or requiring horizontal scrolling.

• Div soup with clickable divs.
• Missing labels on form fields.
• Fixed pixel widths that break on phones.
• !important to win specificity fights.
• Removing focus outlines without a replacement.

Technical references are MDN (HTML, CSS and specificity), web.dev (Learn CSS and Baseline) and W3C's WCAG 2.2; usage data from Stack Overflow's 2025 survey; pay from AmbitionBox (read October 2026). Test formats and the history table are editorial summaries. Science of Apps publishes the free certification linked here. Last reviewed October 2026.

• Semantic HTML — markup that describes meaning, such as nav or button.
• Box model — content, padding, border and margin around every element.
• Specificity — the weight that decides which CSS rule wins.
• Flexbox / grid — CSS layout systems for one and two dimensions.
• Container query — CSS that responds to a component's container size.
• Stacking context — a layer in which z-index values are compared.