Guide complet INF-301 — Pearson
Information Technology Specialist HTML and CSS · Programme, plan de révision, ressources, examen blanc gratuit.
La certification INF-301 Information Technology Specialist HTML and CSS de Pearson valide les competences fondamentales en developpement web front-end. Destinee aux etudiants, debutants en developpement et professionnels en reconversion, elle se passe en QCM de 38 questions sur 50 minutes. Aucun prerequis formel n'est exige. Elle ouvre la voie aux metiers d'integrateur web, developpeur front-end junior, webmaster et UI developer. Reconnue mondialement, elle constitue une premiere brique solide avant des certifications JavaScript, React ou full-stack plus avancees.
Pourquoi passer la certification INF-301 ?
Passer INF-301 en 2026 reste pertinent car HTML5 et CSS3 demeurent les fondations incontournables du web moderne, malgre l'essor des frameworks JavaScript. Le marche francais et europeen connait une penurie chronique de developpeurs front-end maitrisant reellement les fondamentaux : accessibilite WCAG 2.2, responsive design, performance Core Web Vitals et semantique HTML. Cette certification edited by Pearson (ex-Certiport) beneficie d'une reconnaissance internationale notamment dans les ecosystemes Microsoft et chez les recruteurs anglophones. Le ROI est rapide : environ 130 euros d'investissement pour un differentiateur CV concret, valide par un organisme tiers. Pour un debutant, elle credibilise une reconversion (bootcamp, autoformation) face a un recruteur qui ne sait pas evaluer le niveau reel. Pour un etudiant en BTS SIO, BUT MMI ou Bachelor numerique, elle valorise le portfolio et facilite l'obtention d'un premier stage ou alternance. En 2026, avec l'arrivee massive des outils IA generatifs comme GitHub Copilot, maitriser les bases reste decisif : un developpeur qui ne comprend pas le box model, la cascade CSS ou la specificite sera incapable de corriger les hallucinations de l'IA. La certification objective ce socle.
Caractéristiques de l'examen
| Format | QCM 38 questions et exercices pratiques |
|---|---|
| Duree | 50 minutes |
| Score requis | 70% |
| Prix officiel | 130 EUR |
| Langues | Anglais (francais disponible selon centres) |
| Validite | A vie (pas de recertification) |
| Prerequis | Aucun prerequis formel, niveau debutant accepte |
Programme détaillé par domaine
Domain 1 : HTML Fundamentals and Document Structure 25%
- Objectifs
- Ce domaine evalue la maitrise de la structure d'un document HTML5 valide. Le candidat doit savoir construire une page complete avec le doctype, les balises html, head et body, ainsi que les metadonnees essentielles (charset UTF-8, viewport, description, keywords). Il faut comprendre la difference entre elements block et inline, savoir imbriquer correctement les balises et respecter la hierarchie des titres h1 a h6. Les questions portent egalement sur la validation W3C et le debogage d'erreurs de structure courantes.
- Concepts clés
- Maitriser le DOCTYPE html5, les balises semantiques header, nav, main, article, section, aside, footer, figure et figcaption. Comprendre la difference entre attributs globaux (id, class, lang, dir, title, data-*) et attributs specifiques. Savoir utiliser correctement les commentaires, les entites HTML (amp, lt, gt, nbsp) et les caracteres speciaux. Connaitre les regles d'imbrication, la notion d'element vide (br, hr, img, input, meta) et les balises auto-fermantes. La specificite XHTML par rapport au HTML5 peut etre evoquee.
- Services / outils
- Outils essentiels : validateur W3C (validator.w3.org), DevTools Chrome/Firefox, extension HTMLHint pour VS Code, Emmet pour l'autocompletion. Connaitre MDN Web Docs comme reference officielle.
- Temps estimé
- 8-10h
Domain 2 : HTML Content, Forms and Media 20%
- Objectifs
- Le candidat doit savoir integrer du contenu riche : texte formate, listes ordonnees et non ordonnees, listes de definition, tableaux complexes avec thead, tbody, tfoot, colspan et rowspan. La gestion des formulaires est centrale : creation de champs varies, validation cote client HTML5, accessibilite des labels. L'integration multimedia (images responsives, audio, video, iframe) est egalement testee, avec un focus sur les attributs alt et les bonnes pratiques d'accessibilite.
- Concepts clés
- Formulaires : balise form avec action et method (GET vs POST), inputs types HTML5 (email, tel, url, number, date, color, range, search), attributs required, pattern, min, max, placeholder, autocomplete. Maitriser fieldset, legend, label (association explicite via for), select, optgroup, textarea, datalist. Images : srcset et sizes pour le responsive, balise picture, formats modernes (WebP, AVIF). Video et audio : controls, autoplay, muted, loop, poster, sous-titres via track.
- Services / outils
- Outils : Formspree pour tests de soumission, ImageOptim, Squoosh pour optimisation images, FFmpeg pour conversion video.
- Temps estimé
- 10-12h
Domain 3 : CSS Fundamentals and Selectors 20%
- Objectifs
- Ce domaine couvre les fondamentaux CSS3 : syntaxe, integration (inline, interne, externe via link), cascade, heritage et specificite. Le candidat doit calculer la specificite d'un selecteur (a-b-c-d), comprendre l'ordre de cascade et l'usage raisonne de !important. La maitrise des selecteurs avances est essentielle, ainsi que la comprehension du box model standard et alternatif (box-sizing border-box).
- Concepts clés
- Selecteurs : type, classe, id, attribut, descendant, enfant direct (>), frere adjacent (+), frere general (~). Pseudo-classes : hover, focus, active, visited, nth-child, nth-of-type, first-child, last-child, not, is, where, has. Pseudo-elements : before, after, first-line, first-letter, placeholder, selection. Box model : content, padding, border, margin, comprendre margin collapsing. Unites : px, em, rem, %, vw, vh, vmin, vmax, ch, fr. Couleurs : hex, rgb, rgba, hsl, hsla, named colors, custom properties (--variable).
- Services / outils
- Outils : Specificity Calculator, CSS Stats, PurgeCSS pour audit, Stylelint pour linting.
- Temps estimé
- 12-15h
Domain 4 : CSS Layout and Responsive Design 20%
- Objectifs
- Le candidat doit maitriser les techniques de mise en page modernes : Flexbox et CSS Grid, ainsi que le positionnement classique (static, relative, absolute, fixed, sticky). Le responsive design via media queries est central, avec une approche mobile-first. Comprendre les unites flexibles et la fluidite des grilles est indispensable pour reussir les questions pratiques sur les layouts adaptatifs.
- Concepts clés
- Flexbox : display flex, flex-direction, justify-content, align-items, align-content, flex-wrap, gap, flex-grow, flex-shrink, flex-basis, order. CSS Grid : grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column, grid-row, repeat, minmax, auto-fit, auto-fill, fr unit. Media queries : min-width, max-width, orientation, prefers-color-scheme, prefers-reduced-motion. Breakpoints standards (320, 768, 1024, 1440). Float et clear (heritage). Display values : block, inline, inline-block, none, contents.
- Services / outils
- Outils : Chrome DevTools Device Mode, Responsively App, Firefox Grid Inspector, BrowserStack pour tests cross-device.
- Temps estimé
- 12-15h
Domain 5 : CSS Styling, Effects and Best Practices 15%
- Objectifs
- Ce dernier domaine couvre les effets visuels avances et les bonnes pratiques de production. Le candidat doit savoir appliquer transitions, animations keyframes, transformations 2D/3D et filtres. Les regles d'accessibilite (contraste WCAG, focus visible, prefers-reduced-motion) sont testees, ainsi que les conventions d'ecriture maintenables (BEM, organisation des fichiers).
- Concepts clés
- Typographie : font-family, font-weight, font-style, font-size, line-height, letter-spacing, text-align, text-decoration, text-transform, web fonts via @font-face et Google Fonts, font-display swap. Transitions : property, duration, timing-function (ease, linear, cubic-bezier), delay. Animations : @keyframes, animation-name, duration, iteration-count, direction, fill-mode. Transformations : translate, rotate, scale, skew, matrix. Effets : box-shadow, text-shadow, border-radius, opacity, filter (blur, brightness, contrast), backdrop-filter, gradients (linear, radial, conic).
- Services / outils
- Outils : Animista pour animations, Cubic-bezier.com, WAVE pour audit accessibilite, Lighthouse pour performance.
- Temps estimé
- 8-10h
Plan de révision hebdomadaire
Planning recommande sur 6 semaines a raison de 8 a 10 heures hebdomadaires. Semaine 1 : immersion HTML fondamental. Lire la documentation MDN sur HTML, reproduire 5 pages statiques (CV, blog, landing page, page produit, page contact) sans regarder de tutoriel. Valider chaque page sur validator.w3.org. Semaine 2 : formulaires et media. Construire un formulaire complet d'inscription avec tous les types d'inputs HTML5, integrer images responsives via srcset et picture, embarquer une video avec sous-titres. Realiser un premier examen blanc HTML sur la plateforme officielle Certiport. Semaine 3 : CSS fondamental et selecteurs. Refaire toutes les pages de la semaine 1 en stylant uniquement avec CSS externe. Exercices quotidiens sur CSS Diner et Flukeout pour automatiser les selecteurs. Calculer manuellement la specificite de 20 selecteurs differents. Semaine 4 : layout moderne. Completer Flexbox Froggy et CSS Grid Garden integralement. Reproduire 3 layouts complexes (dashboard, magazine, galerie) en Grid et Flexbox combines. Coder un site responsive mobile-first avec 4 breakpoints. Semaine 5 : effets, animations et accessibilite. Realiser 10 micro-interactions (boutons, cartes, menus). Auditer un site existant avec Lighthouse et WAVE, corriger les erreurs d'accessibilite. Reviser la specificite et la cascade. Semaine 6 : revision finale et examens blancs. Passer 3 examens blancs chronometres en conditions reelles (50 minutes). Analyser chaque erreur et revoir le domaine correspondant. Relire le glossaire complet HTML/CSS. Reserver l'examen au centre Certiport le plus proche.
Besoin d'un planning sur mesure ? 30 jours · 60 jours · 90 jours
Ressources recommandées
Page officielle de la certification avec objectifs detailles, prix et reservation
Reference absolue HTML/CSS, en francais, mise a jour par Mozilla
Cours gratuit complet avec projets pratiques aligne sur les objectifs INF-301
Articles techniques, exemples de code et communaute active pour questions
5 erreurs classiques à éviter
- Erreur 1 : Negliger la semantique HTML en utilisant des div partout. Comment l'eviter : memoriser les 8 balises semantiques principales (header, nav, main, article, section, aside, footer, figure) et leur usage contextuel.
- Erreur 2 : Confondre id et class et abuser de l'attribut id pour le style. Comment l'eviter : reserver id pour l'ancrage et le JavaScript, utiliser class pour le style. Maximum un id par valeur sur une page.
- Erreur 3 : Mal calculer la specificite CSS et abuser de !important. Comment l'eviter : s'entrainer au calcul a-b-c-d (inline-id-class-element) et restructurer le CSS plutot que de forcer avec !important.
- Erreur 4 : Oublier la balise meta viewport pour le responsive. Comment l'eviter : integrer systematiquement width=device-width, initial-scale=1.0 dans toute page HTML5.
- Erreur 5 : Confondre Flexbox (1D) et Grid (2D). Comment l'eviter : retenir la regle simple, Flexbox pour aligner des elements sur un axe (barre de navigation, carte), Grid pour structurer en lignes ET colonnes (layout de page).
5 questions types corrigées
Carrière & salaire après INF-301
INF-301 ouvre des postes d'integrateur HTML/CSS, developpeur front-end junior, webmaster et UI developer. En France 2026, un integrateur junior demarre entre 28 000 et 34 000 euros bruts annuels, un developpeur front-end confirme atteint 42 000 a 55 000 euros, et un senior maitrisant React ou Vue depasse 60 000 euros en region parisienne. En Europe (Allemagne, Pays-Bas, Luxembourg), comptez 15 a 25 pour cent de plus. Cette certification est une porte d'entree : pour evoluer, enchainez avec INF-302 JavaScript, puis des certifications frameworks (React, Vue, Angular) ou un parcours full-stack avec Node.js. Les certifications complementaires recommandees : Microsoft MTA 98-383, Google UX Design Certificate, Meta Front-End Developer.
FAQ — INF-301
Combien de temps faut-il pour preparer INF-301 ?
Comptez 50 a 80 heures pour un debutant complet, reparties sur 6 a 8 semaines. Un developpeur ayant deja pratique HTML/CSS peut reduire a 20-30 heures de revision ciblee sur les objectifs officiels.
Cette certification est-elle reconnue en France ?
Oui, Pearson Certiport est reconnu mondialement et l'INF-301 figure sur de nombreuses offres d'emploi front-end. Elle n'est pas enregistree au RNCP mais sert de preuve de competences complementaire au diplome.
Quel est le taux de reussite a INF-301 ?
Le taux de reussite officiel n'est pas publie par Pearson, mais les estimations communautaires le situent autour de 65 a 75 pour cent pour les candidats ayant suivi une preparation structuree d'au moins 40 heures.
Quel est le salaire apres INF-301 ?
En France, un integrateur junior certifie demarre entre 28 000 et 34 000 euros bruts annuels. Combinee a un portfolio solide et JavaScript, la remuneration peut atteindre 38 000 a 42 000 euros des la premiere annee.
Faut-il une experience prealable ?
Non, INF-301 est de niveau foundation et n'exige aucun prerequis formel. Elle s'adresse aux debutants, etudiants, autodidactes et professionnels en reconversion vers le developpement web.
INF-301 ou cert concurrente : laquelle choisir ?
Face a freeCodeCamp (gratuit mais moins reconnu) ou Meta Front-End Certificate (plus complet mais plus long), INF-301 est ideale pour valider rapidement les bases HTML/CSS avec un examen surveille par un tiers reconnu.
Combien coute l'examen INF-301 ?
Le tarif officiel 2026 en France est d'environ 130 euros, parfois reduit a 100 euros pour les etudiants via les centres Certiport scolaires et universitaires partenaires.
Combien de fois peut-on repasser INF-301 ?
En cas d'echec, un delai de 24 heures est impose avant la deuxieme tentative. Apres deux echecs, un delai de 14 jours s'applique. Chaque nouvelle tentative est payante au tarif plein.
Prêt à passer à la pratique ?
Lancez votre examen blanc gratuit ou faites le test d'orientation pour valider votre choix.
Démarrer l'examen blanc INF-301 → Test d'orientation