Log in Start freeSign up
Free test template · Front-end roles

HTML and CSS skills test for hiring

Frameworks change every few years; HTML and CSS do not. Check that front-end candidates understand the layer everything else is built on.

Use this template free Try a live demo test

12 ready-made questions · Edit everything · Free plan, no card needed

Sample questions from this template

  1. Question 1 · Single choice
    Which element is the most appropriate for the main navigation links of a site?
    <div>
    <nav>
    <section>
    <span>
  2. Question 2 · Single choice
    Why should every meaningful <img> have an alt attribute?
    It makes images load faster
    It describes the image for screen readers and when the image fails to load
    It is required for CSS to work
    It sets the image title in search results only
  3. Question 3 · Single choice
    An element has width: 200px; padding: 20px; border: 5px solid; and the default box-sizing: content-box. What is its total rendered width?
    200px
    225px
    245px
    250px

Answer keys and explanations are included when you import the pack into your question bank.

Why test HTML and CSS before you hire?

Many front-end candidates learnt a framework first and the platform second. That shows up later as inaccessible forms, layouts held together with fixed widths and CSS that nobody wants to touch. A short test on the fundamentals tells you whether someone can build a page that works for keyboard users, adapts to a phone screen and doesn't break when another rule is added.

What this template covers

How to run it well

Twelve questions in 12 to 15 minutes is a fair screen. Candidates will want to picture the result of some rules, so do not cut the time too short. A pass mark around 65% suits junior roles and web designers; for senior front-end engineers, set 75% and add questions on custom properties, stacking contexts and performance.

Shuffle questions and options to make sharing answers pointless. The template mixes single-choice items with a select-all accessibility question, a true/false and a short answer. In results, compare the box model and specificity answers. Candidates who get these right usually write CSS that is easier for the rest of the team to maintain.

Who this test is for

Use it for front-end developers, web designers who code, email and landing page developers, WordPress and CMS developers and graduates from web development courses. Agencies can use it to check freelancers before giving them access to client sites. It is also useful for back-end developers who will be expected to touch templates, and for designers moving into code. Their results show whether they can work on markup and styles without help or need a front-end colleague to review every change.

Make it yours

Add questions about the tools and conventions you use, such as Tailwind, Sass, BEM naming or your design system's spacing rules. A screenshot of a layout with a question like "which CSS produced this?" makes a strong practical item. You can ask the AI generator for more accessibility questions and check each one before it goes into your test. Keep code snippets short so they stay readable on small screens.

Frequently asked questions

How long should an HTML and CSS test be?

Twelve questions in about 15 minutes is enough for a first screen. For later stages, a small layout task shows real coding style.

Can candidates cheat?

You can give each candidate a random set of questions, shuffled options, a timer and a full-screen lock. Leaving the test is recorded and answers never reach the browser, so they cannot be found with developer tools.

Does the test include accessibility?

Yes. Several questions cover alt text, labels, buttons and contrast, because accessible markup is part of basic front-end skill, not an extra.

Send your first html and css test today.

Import all 12 questions, set a timer and pass mark, and share a link in about two minutes.

Use this template free

More test templates

JavaScript skills test for developer interviewsCore language knowledge for front-end and Node.js developers.Cyber security awareness quiz for employeesPhishing, passwords and safe habits for every employee.Python developer test for hiringFor Python developer hiring: data types, functions, errors, comprehensions and common pitfalls.SQL skills test for hiringFor analyst and developer hiring: SELECT, filtering, joins, GROUP BY, HAVING and NULL handling.IT support and helpdesk test for hiringFor helpdesk hiring: troubleshooting, tickets, accounts, basic networking, security and user care.Network administrator skills test for hiringFor network administrator hiring: OSI, IP addressing, subnets, DNS, DHCP, VLANs and troubleshooting.QA and software tester test for hiringFor QA tester hiring: test design, bug reports, test types, priorities and automation basics.React developer test for hiringFor React developer hiring: components, props, state, hooks, effects, keys and rendering.

All 60 test templates