HTML & CSS Certification
One paper across the whole foundation: document structure and semantic HTML, forms and accessibility, the box model and the cascade, flexbox and grid layout, and responsive, polished visual design. Sat in one sitting a little over two hours.
- Sitting
- 140 minutes
- Questions
- 60
- Pass mark
- 70%
- Price
- ₹199$9.99
Sit this when you can do these without looking them up
This is not a certificate of attendance. It is 60 questions in 140 minutes at 70% with no partial credit and one attempt, and roughly a third of the paper is foundations — the certificate is for the whole language, not the parts you enjoyed.
- Explain what alt text is for, and write one that would actually help someone using a screen reader
- Say which HTML element is right for a given piece of content — nav vs div, article vs section — and justify it
- Predict which of two conflicting CSS rules wins, using specificity and source order
- Draw the box model for a given box-sizing value, and say what margin collapsing does to two stacked paragraphs
- Build a header bar with flexbox and a page layout with grid, without checking a reference
- Write a media query that reflows a layout at a real breakpoint, and say why mobile-first changes which direction it points
- Debug a flex child that won't shrink below its content width, or an absolutely positioned element that ignores its intended parent
If you'd rather find out than guess, the free 5-question readiness check reports a predicted band in two minutes. If several readiness points are unfamiliar, the free course covers everything on the syllabus.
Syllabus
Every paper is drawn to this mix, so the weights are a promise rather than a guide. The bars show each area's share of the 60 questions.
Document structure and the browser
4 Q·7%Doctype and standards mode, the head/body split, meta charset and viewport, and what HTML, CSS and JS each do.
Text, headings and lists
3 Q·5%Heading hierarchy, paragraphs, emphasis versus styling, and ordered, unordered and description lists.
Links, images and media
4 Q·7%Anchor paths and targets, rel=noopener, alt text, intrinsic width/height and layout shift, figure/figcaption, audio and video.
Semantic HTML and tables
4 Q·7%Landmark elements and their implicit ARIA roles, article versus section, and accessible tables with scope.
Forms
5 Q·8%Labels and association, input types, button type defaults, and built-in validation attributes.
Accessibility fundamentals
4 Q·7%Contrast ratios, keyboard focus, tabindex, skip links, and when ARIA is and isn't appropriate.
Selectors, specificity and the cascade
5 Q·8%Selector types and combinators, specificity ordering, source order, and inheritance.
The box model and sizing units
5 Q·8%Content/padding/border/margin, box-sizing, margin collapsing, and px versus em versus rem versus viewport units.
Flexbox
5 Q·8%The main and cross axes, justify-content and align-items, wrapping, and the flex shorthand.
Grid and positioning
5 Q·8%Grid tracks and areas, placing items by line, and the position values including sticky.
Responsive design
5 Q·8%Media queries, mobile-first methodology, responsive images, and touch target sizing.
Colour, backgrounds and typography
4 Q·7%Colour formats, gradients, font stacks, and line-height for readability.
Custom properties, shadows and gradients
3 Q·5%CSS variables and their scoping, box-shadow, and radial gradients.
Transitions, animation and transforms
3 Q·5%The transition and animation shorthands, prefers-reduced-motion, and why transform and opacity animate smoothly.
Devtools and debugging
1 Q·2%Inspecting and editing live styles, the computed tab, and common layout bugs and their fixes.
Three questions from the bank
Representative of the mix and difficulty — answer visible, shown here to calibrate expectations rather than test you.
- Sample 1Document structure and the browser
A page is missing `<!DOCTYPE html>` at the very top of the file. What actually happens in the browser?
- Nothing changes, because the doctype is only a formality in HTML5
- The browser refuses to render the page at all
- The browser renders in quirks mode, which changes box-model and other legacy layout behaviour
- CSS rules are ignored until a doctype is added
Why: A missing or malformed doctype is the trigger browsers use to fall back to quirks mode, a compatibility mode that reproduces some very old rendering behaviour (including a different box model on certain elements). The doctype is a switch the parser checks, not decoration — leaving it out is not harmless.
- Sample 2Text, headings and lists
A page's content jumps from an `<h1>` straight to an `<h3>`, with no `<h2>` anywhere. Why is this considered a real accessibility problem, not just a style nitpick?
- Screen reader users often navigate by heading level to build a mental outline of the page, and a skipped level breaks that outline
- Browsers refuse to render an `<h3>` that follows an `<h1>` directly
- Search engines will not index a page with a skipped heading level
- It causes the page to fail HTML validation and stop rendering
Why: Many screen reader users jump between headings to get an overview of a page's structure before reading it in detail, and a heading level that appears to vanish reads as a missing section rather than as a stylistic choice. It is a rendering non-issue and a navigation issue.
- Sample 3Links, images and media
Why is `target="_blank"` without `rel="noopener"` considered a security risk?
- The newly opened page can access the original tab through `window.opener` and redirect it, a technique called reverse tabnabbing
- It allows the new tab to be blocked by pop-up blockers
- It prevents the new tab from loading HTTPS pages
- It causes the browser to leak the visitor's cookies to the new page
Why: Without `noopener`, the page opened in the new tab keeps a live reference to the original tab via `window.opener`, and a malicious page can use that to silently navigate the original tab to a phishing page while the visitor is looking at the new one. `rel="noopener"` severs that reference.
What this does NOT replace
An honest comparison, because overclaiming cert value helps nobody and gets caught by anyone who hires.
- This is not an AWS / Google / Microsoft vendor certification — those cover a proprietary platform, carry employer discounts, and some recruiters filter resumes against them. If a role explicitly names those, this doesn't substitute.
- This is not a replacement for a degree, a bootcamp with job placement, or shipping real work. Those produce different evidence. A certificate is a focused signal, not a career.
- This is a focused, honest signal that you can hold the full syllabus in your head under a clock. Pair it with a résumé that shows what you've built — that's the combination that lands interviews.
Everything on this syllabus is taught free
The HTML & CSS course covers the whole syllabus above across 37 lessons, with a playground in each one. Work through it first — the exam is the same material under a clock.
Open the HTML & CSS courseWhat sitting it is like
The exam opens full screen with a countdown, a question at a time, and a grid showing what you have answered and what you have flagged to come back to. Nothing is submitted until you say so, or the clock reaches zero.
Every answer saves to the server as you give it. If your laptop dies at question forty, sign back in and you will find question forty exactly as you left it — with however much time was left still ticking, because the clock does not pause.
Leaving full screen or switching tabs is noted but does not end your exam. It is a record, not a trap: nobody is auto-failed for a notification stealing focus.
When it ends you get your mark, a topic-by-topic breakdown, and every question with the right answer and an explanation — whether you passed or not. Passing also produces a certificate with a link anyone can verify.