Semantics, accessibility, flexbox, grid, responsive, variables, animations, dark mode.
Before starting, we run a 1-minute tech check — microphone, ambient noise, connection. If your setup isn't good enough, the test is fully refunded.
Prove you actually know HTML & CSS — semantics, grid, accessibility, custom properties — with a 15-minute AI oral exam, not a multiple-choice quiz.
The Plume HTML & CSS badge tests how well you reason about markup structure, the cascade, specificity, and modern layout tools: Flexbox, CSS Grid, container queries, :has(), subgrid, and custom properties. The AI examiner puts you through real-world scenarios — inheriting a legacy CSS codebase littered with !important, choosing between Flexbox and Grid for a complex layout, building a maintainable design system without a framework — and evaluates the depth of your thinking, not your ability to recite definitions.
Unlike a QCM or a self-declared LinkedIn skill, a Plume oral forces you to reason out loud, justify tradeoffs, and show that you genuinely understand why something works in CSS — not just what to type. A hiring manager or client can hear how you talk about cascade layers, WCAG contrast ratios, or PostCSS configuration. The 0-100 score and level (Novice to Expert) are generated by Claude Opus from a full transcript analysis — no luck, no answer memorization.
This badge is built for front-end developers, integrators, UI designers who code, and anyone who wants to prove they write production-grade HTML & CSS — not just copy-paste from Stack Overflow. Whether you're job hunting, benchmarking yourself before upskilling, or trying to stand out in a competitive freelance market, the badge gives you a concrete, verifiable proof of skill where words alone no longer cut it.
Here are the concrete dimensions the AI examines during the 15-minute oral.
Correct use of structural elements (article, section, nav, main, aside), ARIA attributes and implicit roles, keyboard navigation patterns, and screen reader testing (NVDA, VoiceOver). Meeting WCAG 2.1 AA on contrast and reading order.
Mastery of main and cross axes, alignment, wrapping, auto-placement, subgrid, and combining both layout models to handle complex UIs: navigation bars, image galleries, multi-column dashboards.
Using @layer to control cascade order, container queries for truly component-centric responsive design, :has() as a parent selector, color-mix() for theme-aware color management, and view transitions for page-level animations.
Custom properties (--tokens), :root, light/dark theming via prefers-color-scheme and data-theme, fluid typography with clamp(), spacing scales, and a naming strategy that stays maintainable without Tailwind or CSS-in-JS.
Diagnosing and cleaning up codebases with uncontrolled specificity, cascading !important, and inconsistent z-index stacking contexts. Incremental refactoring strategies: BEM, ITCSS, CSS Modules, or migrating to @layer.
Positioning CSS tooling in a front-end project: PostCSS, Sass/SCSS, CSS Modules, Tailwind, CSS-in-JS (Styled Components, Emotion). Choosing based on team size, project constraints, and bundle size impact.
Mobile-first strategy, logical breakpoints, fluid typography, CSS containment, will-change, critical CSS for above-the-fold rendering, and the impact of selector complexity on style recalculation.
CSS keyframe animations, timing functions, animation-fill-mode, GPU-friendly transitions (transform/opacity), prefers-reduced-motion for accessible motion, and the view transitions API for page-level state changes.
Final scoring is performed by Claude (Anthropic), which reads back the full transcript and applies this weighted criteria grid.
Ability to explain the underlying mechanisms — cascade, specificity, stacking contexts, formatting contexts (BFC, IFC) — not just the visual outcome. The AI checks that you know why something works in CSS, not only how to make it work.
Ability to choose between Flexbox and Grid, between Tailwind and raw CSS, between a JS animation and a CSS animation, with arguments grounded in project context, team size, and performance or accessibility constraints.
Knowledge of WCAG 2.1 standards, ARIA attributes, keyboard navigation patterns, and semantic elements. The AI evaluates whether you build in accessibility from the start or treat it as an afterthought.
Familiarity with recent features — container queries, :has(), cascade layers, subgrid, color-mix(), view transitions — and the ability to explain what they actually change in your workflow compared to older approaches.
Quality of verbal explanation: structured answers, concrete examples, precise technical vocabulary without unnecessary jargon. A developer who can clearly explain the impact of z-index or display: contents is more credible than one who recites the spec.
A Plume session takes about 20 minutes, from tech check to badge delivery.
The AI confirms your microphone is working and your connection is stable. You confirm you're ready to start. No technical questions at this stage — it's purely to make sure the oral gets recorded cleanly.
You give a quick intro and describe your most recent or most significant HTML/CSS project: the context, the technical constraints, the type of interface. The AI uses this to tailor the rest of the exam to your profile and reference project.
The AI works through the calibrated themes: cascade and specificity management, Flexbox vs Grid, accessibility, pure-CSS design systems, CSS tooling choices, and recent CSS features. It follows up on your answers with specific probing questions to test the depth of your reasoning.
The AI asks you to take a position on a concrete scenario — for example: would you use Tailwind or raw CSS for an enterprise design system used by 5 teams? You need to argue your case and anticipate objections.
Claude Opus analyzes the full transcript and produces a 0-100 score, a level (Novice / Proficient / Advanced / Expert), a detailed report, and the URL of your public badge. You also get the audio recording of your oral.
Your score out of 100 translates into a level a recruiter can grasp at a glance.
You write HTML/CSS for simple pages: basic structure, common tags, a handful of style rules. You know class and id selectors, you use Flexbox for basic layouts, but the cascade and specificity still catch you off guard. You often rely on copy-paste or frameworks without understanding what's happening underneath.
You build responsive interfaces with Flexbox and Grid, you use CSS custom properties, and you can debug a specificity conflict. You know the basics of accessibility (semantic tags, contrast ratios) and can integrate a project into a stack with Sass or PostCSS. CSS animations and mobile-first responsive are part of your daily workflow.
You're fluent in modern tools — container queries, :has(), cascade layers, subgrid — and can build a pure-CSS design system with maintainable tokens. You test with screen readers, argue Tailwind vs raw CSS tradeoffs by project context, and can refactor a legacy codebase without breaking everything. Your CSS is performant, organized, and documented.
You have a systemic view of CSS: you define architectural conventions (@layer, ITCSS, CSS Modules), you anticipate the rendering performance impact of every rule, and you make tooling decisions for entire teams. You follow the CSS spec live (CSSWG), contribute or teach, and can explain any browser behavior from first principles.
No degree or years of experience required to take the badge. Here are the profiles it makes the most sense for.
You want to prove your Flexbox, Grid, and accessibility skills go beyond tutorials. The badge gives you a credible oral proof for job applications, where your GitHub only shows the final result — not how you reasoned through it.
You integrate your own designs and want to show your dual design-plus-code skill. The badge proves your CSS is structured professional practice, not improvised tinkering.
Your clients can't see your code quality directly. A badge with a score and detailed report is a concrete commercial argument you can share on your website or in a proposal — before you even get on a call.
You mostly work backend and want an honest read on where your HTML/CSS actually stands. The 0-100 score and report give you a clear benchmark and precise improvement targets on the areas you're less solid on.
You just finished training and don't have professional experience to point to yet. The Plume badge is a differentiating signal on your CV that proves oral mastery — not just what was covered in your curriculum.
Where and how your HTML & CSS badge will help you day to day.
You're applying for a front-end developer role. You drop your badge URL in your cover letter. The recruiter sees your 78/100 Advanced score and can listen to how you talk about cascade layers and container queries — without needing to run their own technical test.
A client is choosing between you and another freelancer. You add your badge link to your quote. The detailed report shows you're solid on WCAG accessibility and CSS performance — two things that matter a lot for their e-commerce project.
A lead dev wants a real picture of her team's CSS level before migrating to a homegrown design system. Each developer takes the badge in 15 minutes. The individual reports pinpoint exactly where training investment is needed most.
You've been learning container queries and :has() through tutorials. You take the badge to test whether you've really internalized the concepts or just memorized the syntax. The report flags exactly where your reasoning breaks down.
You add the HTML & CSS badge to the Licenses and certifications section of your LinkedIn profile with the verifiable link. Unlike an online course certificate, the AI oral proves you can articulate your technical choices — not just watch videos.
You're switching from a different field into web development. The badge gives you a first credible proof of skill for employers who don't know your background and need something concrete beyond a portfolio of personal projects.
A few minutes to check you have everything you need.
At the end of your session you don't just get a score — here's everything that awaits you.
You get a precise score and a level (Novice / Proficient / Advanced / Expert) based on Claude Opus's full analysis of your oral. Not a self-assessment, not a quiz — a grade on your ability to reason through HTML & CSS problems out loud.
The report breaks your score down across every criterion: technical depth, tradeoff reasoning, accessibility, modern CSS fluency, and clarity. You know exactly what cost you points and what to work on before your next attempt or next project.
The recording of your 15-minute oral stays in your Plume account. You can replay how you answered questions on Flexbox, container queries, or legacy CSS refactoring — valuable raw material for identifying your own blind spots.
You get a unique, verifiable URL showing your score, level, and exam date. Paste it on LinkedIn, your portfolio, or in a job application email — anyone can verify the badge is authentic without taking your word for it.
Discover related skills you can validate with Plume.
A 15-min oral exam with an AI, a shareable badge for your recruiters.
Choose this badge · €19.99
