HTML and CSS: practice, test and prove it

Semantic HTML, accessible forms, the box model, specificity, flexbox, grid and responsive CSS.

FreeNo sign-up to testNo attempts yet

Start the html and css test Read the first lesson

HTML and CSS screenings rarely ask you to recite tag lists. They show a short snippet and ask what the browser will actually do: how wide a box ends up, which rule wins, why a label is not linked, or where a flex item lands. Some add a small live task, such as fixing a broken form or making a card layout work on a phone.

This page lets you practise those predictions, then explains the rules behind them. The lessons cover semantic, accessible markup and the layout maths that trips up most candidates.

Benchmark: The pass mark is 80%, and this skill is commonly screened for front-end developer, web designer, email developer and junior full-stack roles. Requirements vary by employer.

Lessons

Semantic HTML and accessible formsChoose elements for their meaning, link every label, and write alt text that helps rather than adds noise.Lesson 1

Box model, specificity and modern layoutPredict box sizes, work out which CSS rule wins, and choose flexbox, grid and media queries with confidence.Lesson 2

Positioning, z-index and stacking contextsPlace elements with relative, absolute, fixed and sticky, and understand why z-index sometimes does nothing.Lesson 3

Units, custom properties and responsive imagesPick px, rem, em, percent and vw correctly, reuse values with CSS variables, and serve images that fit each screen.Lesson 4

Interview prep

HTML and CSS interview questionsQuestions interviewers commonly use to see whether you understand how the browser lays out and styles a page.6 questions

Certificate

Free with an accountA PDF with your name, best score and date. Records this site's tests only.

Common questions

Do I need to know a CSS framework to pass?

No. The questions test plain HTML and CSS, which every framework sits on top of. Knowing the fundamentals also makes framework classes much easier to debug.

Should I use flexbox or grid?

Use flexbox when items flow in one direction, like a toolbar or a row of buttons. Use grid when you need rows and columns to line up together, like a card gallery or a page layout.

Is accessibility really tested in screenings?

Many front-end screenings include at least a few questions on labels, alt text, headings and keyboard use. It is also one of the first things reviewers check in a take-home task.

HTML and CSS test for interviewWhat the screening round looks like, with a 5-question sample.