Sémantique, accessibilité, flexbox, grid, responsive, variables, animations, dark mode.
Avant de démarrer, on fait un test technique de 1 min — micro, bruit, connexion. Si ton matériel ne convient pas, le test est remboursé intégralement.
Prouve que tu maîtrises vraiment HTML & CSS — sémantique, grid, accessibilité, variables custom — avec un oral de 15 minutes évalué par IA, pas un QCM.
Le badge HTML & CSS de Plume teste ta capacité à raisonner sur la structuration du balisage, la cascade, la spécificité et les outils de mise en page modernes : Flexbox, CSS Grid, container queries, :has(), subgrid et les variables custom. L'IA examinatrice t'interroge sur des situations réelles — reprendre une base CSS legacy truffée de !important, choisir entre Flexbox et Grid pour un layout complexe, construire un design system maintenable sans framework — et évalue ta profondeur technique, pas ta capacité à réciter une définition.
Là où un simple test QCM ou une ligne sur LinkedIn ne prouve rien, l'oral Plume oblige à argumenter, à nuancer et à montrer que tu comprends les tradeoffs. Un recruteur ou un client peut écouter la façon dont tu parles de cascade layers, de contrastes WCAG ou d'intégration PostCSS. Le score 0-100 et le niveau (Novice à Expert) sont produits par Claude Opus après lecture du transcript complet : pas de hasard, pas de mémorisation de réponses.
Ce badge s'adresse aux développeurs front-end, intégrateurs, designers qui codent et à toute personne qui veut prouver qu'elle sait écrire du HTML & CSS de production — pas du copier-coller de Stack Overflow. Que tu prépares une candidature, que tu veuilles valider ton niveau avant une montée en compétences ou que tu cherches à te différencier sur le marché freelance, ce badge apporte une preuve concrète là où les mots ne suffisent plus.
Voici les dimensions concrètes que l'IA examine pendant les 15 minutes d'oral.
Choix des balises structurantes (article, section, nav, main, aside), attributs ARIA, rôles implicites, navigation clavier et tests avec lecteurs d'écran (NVDA, VoiceOver). Respect des critères WCAG 2.1 AA sur les contrastes et l'ordre de lecture.
Maîtrise des axes principaux, alignement, wrapping, auto-placement, subgrid et combinaison des deux modèles de mise en page pour répondre à des layouts complexes : navigation, galeries, dashboards multi-colonnes.
Utilisation de @layer pour organiser la cascade, des container queries pour un responsive véritablement composant-centrique, de :has() comme sélecteur parent et de color-mix() pour la gestion thématique des couleurs.
Variables custom (--token), :root, thèmes sombre/clair via prefers-color-scheme et data-theme, typo fluide avec clamp(), tokens d'espacement et stratégie de naming pour rester maintenable sans Tailwind ni CSS-in-JS.
Diagnostic et assainissement d'une base de code avec spécificité incontrôlée, !important en cascade et z-index incohérents. Stratégies de refactoring progressif : BEM, ITCSS, CSS Modules ou migration vers @layer.
Positionnement de CSS dans un projet front : PostCSS, Sass/SCSS, CSS Modules, Tailwind, CSS-in-JS (Styled Components, Emotion). Critères de choix selon l'équipe, le contexte de projet et les contraintes de bundle size.
Stratégie mobile-first, breakpoints logiques, fluid typography, containment, will-change, chargement critique du CSS above-the-fold et impact des sélecteurs sur le recalcul de style dans le navigateur.
Animations CSS (keyframes, timing functions, animation-fill-mode), transitions interactives performantes (transform/opacity sur le GPU), prefers-reduced-motion pour l'accessibilité et view transitions API pour les changements de page.
L'évaluation finale est faite par Claude (Anthropic) qui relit la transcription complète et applique cette grille de critères pondérés.
Capacité à expliquer les mécanismes sous-jacents — cascade, spécificité, stacking context, formatting contexts (BFC, IFC) — et pas seulement le résultat visuel. L'IA vérifie que tu sais pourquoi quelque chose fonctionne, pas uniquement comment.
Aptitude à choisir entre Flexbox et Grid, entre Tailwind et CSS pur, entre une animation JS et une animation CSS, en argumentant selon le contexte du projet, la taille de l'équipe et les contraintes de performance ou d'accessibilité.
Connaissance des standards WCAG 2.1, des attributs ARIA, de la navigation clavier et des balises sémantiques. L'IA évalue si tu intègres l'accessibilité dès la conception ou si tu la traites comme une afterthought.
Connaissance des features récentes — container queries, :has(), cascade layers, subgrid, color-mix(), view transitions — et capacité à expliquer ce qu'elles changent concrètement dans ta façon de coder par rapport aux anciennes approches.
Qualité de l'expression orale : structuration des réponses, exemples concrets, vocabulaire technique précis sans jargon inutile. Un développeur qui sait expliquer clairement l'impact de z-index ou de display: contents est plus crédible qu'un qui récite la spec.
Une session Plume tient en environ 20 minutes, du test technique à la délivrance du badge.
L'IA vérifie que ton micro fonctionne et que la connexion est stable. Tu confirmes que tu es prêt(e) à commencer. Aucune question technique n'est posée à cette étape — c'est uniquement pour s'assurer que l'oral sera enregistré correctement.
Tu te présentes brièvement et tu décris ton projet HTML/CSS le plus récent ou le plus significatif : le contexte, les contraintes techniques, le type d'interface. L'IA adapte ensuite la suite de l'oral à ton profil et à ce projet de référence.
L'IA t'interroge sur les thèmes calibrés : gestion de la cascade et de la spécificité, Flexbox vs Grid, accessibilité, design system en CSS pur, intégration dans une stack moderne et CSS features récentes. Elle creuse sur tes réponses avec des questions de relance spécifiques.
L'IA te demande de prendre position sur un cas concret — par exemple : choisirais-tu Tailwind ou du CSS pur pour un design system d'entreprise utilisé par 5 équipes ? Tu dois argumenter et anticiper les objections.
Claude Opus analyse le transcript complet et produit un score 0-100, un niveau (Novice / Confirmé / Avancé / Expert), un rapport détaillé et l'URL de ton badge public. Tu reçois aussi l'enregistrement audio de ton oral.
Le score sur 100 se traduit en un niveau lisible d'un coup d'œil par un recruteur.
Tu écris du HTML/CSS pour des pages simples : structure de base, balises courantes, quelques règles de style. Tu connais les sélecteurs de classe et d'id, tu utilises Flexbox pour des layouts élémentaires, mais la cascade et la spécificité te réservent encore des surprises. Tu t'appuies souvent sur des copier-coller ou des frameworks sans en comprendre le fond.
Tu produis des interfaces responsive avec Flexbox et Grid, tu utilises des variables CSS et tu sais déboguer un conflit de spécificité. Tu connais les bases de l'accessibilité (balises sémantiques, contrastes) et tu sais intégrer un projet dans une stack avec Sass ou PostCSS. Les animations CSS et le responsive mobile-first font partie de ton quotidien.
Tu maîtrises les outils modernes — container queries, :has(), cascade layers, subgrid — et tu sais construire un design system en CSS pur avec des tokens maintenables. Tu testes avec des lecteurs d'écran, tu argumentes les tradeoffs Tailwind vs CSS pur selon le projet, et tu sais refactorer une base legacy sans tout casser. Ton CSS est performant, organisé et documenté.
Tu as une vision systémique du CSS : tu définis les conventions d'architecture (ITCSS, @layer, CSS Modules), tu anticipes l'impact de chaque règle sur la performance de rendu et tu fais des choix d'outillage justifiés pour des équipes entières. Tu suis la spec CSS en direct (CSSWG), tu contribues ou tu formes, et tu sais expliquer n'importe quel comportement du navigateur à partir des principes fondamentaux.
Pas besoin d'années d'expérience ou de diplôme pour passer le badge. Voici les profils pour qui il fait sens.
Tu veux prouver que ta maîtrise de Flexbox, Grid et l'accessibilité va au-delà des tutoriels. Le badge te donne une preuve orale crédible pour tes candidatures, là où ton GitHub ne montre que le résultat final.
Tu intègres tes maquettes toi-même et tu veux valoriser ta double compétence design + code. Le badge atteste que ton CSS n'est pas du bricolage mais une pratique professionnelle structurée.
Tes clients ne peuvent pas voir ta qualité de code directement. Un badge avec score et rapport détaillé est un argument commercial concret que tu peux partager sur ton site ou en proposition commerciale.
Tu codes surtout côté back et tu veux savoir où tu en es vraiment en HTML/CSS. Le score 0-100 avec le rapport te donne un bilan honnête et des pistes d'amélioration précises sur ce que tu maîtrises moins.
Tu sors d'une formation et tu n'as pas encore d'expérience pro à montrer. Le badge Plume est un signal différenciant sur ton CV qui prouve ta maîtrise orale — pas uniquement ce que tu as appris en cours.
Où et comment ton badge HTML & CSS va te servir au quotidien.
Tu postules à un poste de développeur front-end. Tu partages l'URL de ton badge dans ta lettre de motivation. Le recruteur voit ton score 78/100 niveau Avancé et peut écouter comment tu parles de cascade layers et de container queries — sans avoir à te faire passer un test maison.
Un client hésite entre toi et un autre freelance. Tu ajoutes le lien de ton badge dans ton devis. Le rapport détaillé montre que tu maîtrises l'accessibilité WCAG et la performance CSS — deux points critiques pour son projet e-commerce.
Un lead tech veut connaître le niveau CSS réel de son équipe avant de migrer vers un design system maison. Chaque développeur passe le badge en 15 minutes. Le score moyen et les rapports individuels permettent de cibler les formations nécessaires.
Tu as suivi des tutoriels sur les container queries et :has(). Tu passes le badge pour tester si tu as vraiment intégré ces concepts ou si tu les récites sans les comprendre. Le rapport pointe exactement ce qui manque dans ton raisonnement.
Tu ajoutes le badge HTML & CSS à la section Licences et certifications de ton profil LinkedIn avec le lien vérifiable. Contrairement à un cours en ligne, l'oral IA prouve que tu sais articuler tes choix techniques, pas seulement regarder des vidéos.
Tu viens d'un autre domaine et tu te reconvertis vers le développement web. Le badge te donne un premier signal crédible de compétence pour des employeurs qui ne connaissent pas ton parcours et qui cherchent une preuve concrète au-delà du portfolio.
Quelques minutes pour vérifier que tu as bien tout ce qu'il faut.
À la fin de ta session, tu ne reçois pas juste un score : voici tout ce qui t'attend.
Tu reçois un score précis et un niveau (Novice / Confirmé / Avancé / Expert) basés sur l'analyse complète de ton oral par Claude Opus. Pas une auto-évaluation, pas un QCM — une note sur ta capacité à raisonner en HTML & CSS.
Le rapport décompose ton score sur chaque critère : profondeur technique, tradeoffs, accessibilité, maîtrise du CSS moderne et clarté. Tu sais exactement ce qui t'a coûté des points et ce que tu devrais approfondir en priorité.
L'enregistrement de tes 15 minutes d'oral reste accessible dans ton espace Plume. Tu peux réécouter comment tu as répondu aux questions sur Flexbox, les container queries ou la gestion d'une CSS legacy — une matière précieuse pour progresser.
Tu reçois une URL unique et vérifiable qui affiche ton score, ton niveau et la date de passage. Tu peux la coller sur LinkedIn, dans ton portfolio ou dans un email de candidature — n'importe qui peut vérifier l'authenticité du badge.
Découvre d'autres compétences proches que tu peux faire valider avec Plume.
15 minutes d'oral avec une IA, un badge partageable pour tes recruteurs.
Choisir ce badge · 19,99 €
