How to assess · For hiring teams
How to Assess HTML & CSS Skills When Hiring
The test formats that actually work for HTML & CSS, what a strong answer looks like, sample questions and a scoring rubric you can use as-is.
The short answer
Assess HTML & CSS with a task, not a conversation: build a component from a design, fix an inaccessible, brittle page, ai-scored assessment (e.g. cohesyve) or code review. Score it against written criteria you fix before you see any submissions, and weight the criteria that the role actually depends on.
- Uses semantic elements — buttons, links, headings, lists, landmarks — and can explain what each gives users and assistive technology
- Builds layouts with flexbox and grid by default, and can explain when each fits
- Designs for a range of widths and content lengths, not for one screenshot
- Writes CSS with a system: consistent spacing and type scales, custom properties, low specificity
Paste a job description; Cohesyve generates a role-specific assessment and rubric. Ten candidates free, no card.
HTML and CSS are the skills everyone claims and few are tested on, which is how teams end up with interfaces that look right in one browser at one width and fall apart everywhere else. The gap between someone who can reproduce a design and someone who can build a layout that is semantic, accessible, responsive and maintainable is large, and it does not show on a résumé or in a conversation. This page covers how to assess HTML and CSS for frontend and design-engineering roles: semantics and accessibility, layout, responsive behaviour, and the judgement to write styles that survive the next redesign.
Why HTML & CSS is worth testing
Bad markup and CSS are quiet debts. Divs where there should be buttons break keyboard users; absolute positioning that works at one width breaks at every other; styles that fight each other with `!important` make every change a gamble. Testing shows whether a candidate builds interfaces that hold up, and it takes an hour rather than a year of bug reports.
What strong HTML & CSS looks like
- Uses semantic elements — buttons, links, headings, lists, landmarks — and can explain what each gives users and assistive technology
- Builds layouts with flexbox and grid by default, and can explain when each fits
- Designs for a range of widths and content lengths, not for one screenshot
- Writes CSS with a system: consistent spacing and type scales, custom properties, low specificity
- Handles focus states, colour contrast and reduced motion as part of the work
- Knows how the cascade and specificity work and does not fight them with `!important`
- Can debug layout with the browser tools rather than by trial and error
Ways to assess HTML & CSS
Build a component from a design
Provide a design for a card or form with two breakpoints and states (hover, focus, error). Ask for semantic HTML and CSS that matches it and holds up when the content is twice as long. Sixty minutes.
Pros
Cons
Best for Any level; scale via the design.
Fix an inaccessible, brittle page
Provide a page with clickable divs, a heading hierarchy that skips levels, fixed widths and a specificity war. Ask the candidate to fix and explain.
Pros
Cons
Best for Mid and senior frontend roles.
AI-scored assessment (e.g. Cohesyve)
Generate an HTML/CSS task from the job description — a layout problem, an accessibility review, a responsive design question — with a rubric. Each candidate receives a different variant; reasoning is scored with the code.
Pros
Cons
Best for Screening a large pool.
Code review
Provide a diff with a div-button, an unlabelled input, a magic number and a `!important`. Ask for review comments.
Pros
Cons
Best for Senior and lead frontend developers.
Cohesyve
Run a HTML & CSS assessment on your next opening
Cohesyve generates a unique HTML & CSS task per candidate from your job description, with the scoring rubric attached. Questions are different for every applicant, so they cannot be shared or looked up.
What to test
Semantics and accessibility
Whether the markup means what it shows.
Layout
Whether layouts are built with the right tools.
Responsive behaviour
Whether it survives real widths and real content.
Maintainable CSS
Whether styles are a system.
Sample HTML & CSS questions
Why should a clickable element be a button rather than a div with a click handler?
EntryLook for Keyboard operability, focus, semantics for assistive technology, default behaviour; the div needs several things added to match.
When would you use grid rather than flexbox?
EntryLook for Two-dimensional layout versus one-dimensional flow; examples of each.
This layout breaks when a title is three lines long. What is wrong and how do you fix it?
MidLook for Fixed heights or absolute positioning; let content drive size, use min-height, handle overflow deliberately.
How would you set up spacing and type so that a team stays consistent?
MidLook for Custom properties on a scale, utility or component conventions, documentation, and a rule against magic numbers.
A stylesheet has hundreds of `!important` rules. How do you recover?
SeniorLook for Audit specificity, introduce layers or a lower-specificity system, migrate component by component, measure with the browser tools.
Red flags
- Divs and spans for everything
- Fixed pixel widths and heights
- Cannot explain specificity
- Removes focus outlines and does not replace them
- Has never used the browser layout inspector
Scoring rubric
| Criterion | Weight | What strong looks like |
|---|---|---|
| Semantics and accessibility | 30% | Correct elements, labels, focus and contrast by habit. |
| Layout | 25% | Modern layout tools used with reasons. |
| Responsive robustness | 25% | Survives widths and content lengths. |
| Maintainability | 20% | Systematic, low-specificity, documented. |
Mistakes hiring teams make
- Scoring pixel-perfection over structure
- Testing at one viewport width
- Skipping accessibility because the design did not mention it
- Accepting a component that breaks with longer content
- Assuming a JavaScript developer has these fundamentals
Roles that need HTML & CSS
Common questions
Should I test HTML and CSS if the role uses a component library?
Yes. Component libraries are built from these fundamentals and break when used by people who do not have them. A short layout-and-accessibility task is enough.
What is the fastest HTML/CSS screening question?
Show a clickable div and ask what is wrong with it. The answer covers semantics, keyboard access and focus in one go.
How do I assess CSS without a design tool?
Describe the component in words with two breakpoints and states. The result matters less than whether the structure is right and holds up with more content.
Do I need to test Tailwind or Sass specifically?
Only if the role requires it. The judgement — systems, specificity, responsiveness — is the same underneath; syntax is learnable in days.
Cohesyve · Skill assessments for hiring
Test HTML & CSS before the first interview
Generate a role-specific HTML & CSS assessment from your job description and see who can do the work before you spend interview time on them.
1,500+
assessments completed
50%
faster time-to-hire
90%
completion rate
5 min
from JD to assessment
No credit card · 10 free candidates · Plans sized to your hiring volume
From the blog