Les API HTML et CSS modernes offrent aux développeurs des capacités avancées directement dans le navigateur : graphiques vectoriels et 3D, communications temps réel, stockage local, multithreading, applications installables et hors-ligne. Cette formation vous apprend à exploiter concrètement fetch, WebSocket et WebTransport, Canvas et WebGPU, Web Workers et Service Workers, IndexedDB et la File System Access API, ainsi que les Web Components et CSS Houdini. Vous repartirez avec les compétences pour créer des interfaces riches, accessibles et installables sans dépendre de plugins externes.

Public visé

Développeurs, architectes et chefs de projets techniques.

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Identifier les API HTML et CSS modernes et leurs cas d’usage
Construire des interfaces accessibles avec HTML sémantique et formulaires natifs
Communiquer efficacement avec un serveur — fetch, SSE, WebSocket, WebTransport
Exploiter Canvas, SVG, WebGL et WebGPU pour le rendu graphique
Paralléliser les traitements avec Web Workers et OffscreenCanvas
Bâtir une PWA — Service Workers, Cache API, manifest
Gérer le stockage local moderne — IndexedDB, File System Access, Cache API
Concevoir des composants réutilisables avec Web Components
Intégrer les Device APIs et le modèle de permissions
Sécuriser une application Web — Web Crypto, CSP, Trusted Types
Utiliser un assistant IA pour concevoir et relire du code HTML/CSS

Programme

Jour 1 - Matin

Socle HTML moderne

HTML moderne et accessibilité

structurer une page avec les balises sémantiques modernes
comprendre l’arbre d’accessibilité et les rôles ARIA implicites
enrichir avec ARIA quand HTML ne suffit pas
gérer la navigation clavier et le focus

Travaux pratiques :

Auditer une page existante avec axe-core et corriger les défauts d’accessibilité

Formulaires natifs

exploiter les types de champs modernes
valider côté client avec Constraint Validation API
styliser les états — :user-valid, :user-invalid
piloter la validation en JavaScript avec setCustomValidity

Travaux pratiques :

Construire un formulaire d’inscription validé sans framework

Jour 1 - Après-midi

Communication moderne avec le serveur

fetch et requêtes HTTP

remplacer XHR par fetch
annuler une requête avec AbortController
traiter les réponses en flux avec ReadableStream
envoyer des données binaires et des fichiers via FormData et Blob

Travaux pratiques :

Implémenter un upload avec barre de progression et annulation

CORS

comprendre le modèle Same-Origin
gérer les preflights et les credentials

Travaux pratiques :

Configurer CORS sur une mini API et son client

Server-Sent Events

recevoir des événements en flux unidirectionnel avec EventSource
gérer reconnexion automatique et identifiants d’événements
comparer SSE et WebSocket selon le cas d’usage

Travaux pratiques :

Afficher en temps réel un flux de notifications via SSE

WebSocket et WebTransport

établir une connexion bidirectionnelle WebSocket
gérer messages, erreurs et reconnexion
découvrir WebTransport sur HTTP/3

Travaux pratiques :

Construire un mini-chat WebSocket avec gestion robuste de reconnexion

Jour 2 - Matin

Multimédia, 2D et 3D

Audio et vidéo

intégrer media via les balises et leurs API
contrôler la lecture en JavaScript
gérer pistes texte et sous-titres avec <track> et TextTrack

Travaux pratiques :

Construire un lecteur vidéo personnalisé avec sous-titres et raccourcis clavier

Canvas et OffscreenCanvas

dessiner en 2D
déporter le rendu hors du thread principal avec OffscreenCanvas
composer Canvas et CSS

Travaux pratiques :

Implémenter un graphique animé piloté en OffscreenCanvas dans un Worker

SVG programmable

manipuler le DOM SVG depuis JavaScript
animer en SMIL ou via Web Animations API
combiner SVG et CSS avec masques et filtres

Travaux pratiques :

Construire un graphique interactif en SVG avec animations Web Animations API

WebGL et WebGPU

situer WebGL dans l’écosystème actuel
découvrir WebGPU et ses compute shaders
choisir entre WebGL, WebGPU et des bibliothèques comme Three.js

Travaux pratiques :

Afficher une scène 3D simple en WebGPU avec un shader minimal

Jour 2 - Après-midi

Workers, CSS Houdini, PWA et WebAssembly

Web Workers

comprendre le modèle mono-thread du JavaScript
déléguer des traitements lourds à un Worker dédié
communiquer via postMessage et Transferable Objects
partager des données avec Shared Workers et SharedArrayBuffer

Travaux pratiques :

Paralléliser un calcul scientifique sur plusieurs Workers et mesurer le gain

CSS Houdini et APIs CSS programmables

étendre CSS via les Worklets — Paint API, Layout API
déclarer des propriétés typées avec @property
construire dynamiquement une feuille de style avec Constructable Stylesheets
manipuler les styles avec CSS Typed OM

Travaux pratiques :

Créer un effet visuel personnalisé via Paint API et l’utiliser sur un composant

Service Workers et PWA

enregistrer un Service Worker et gérer son cycle de vie
mettre en cache et servir hors-ligne — stratégies cache-first / network-first
déclarer une PWA installable avec manifest.json
gérer notifications push et synchronisation en arrière-plan

Travaux pratiques :

Transformer une application existante en PWA installable et fonctionnelle hors-ligne

WebAssembly

comprendre le modèle Wasm
charger et instancier un module Wasm depuis JavaScript
identifier les cas d’usage de calcul intensif et de portage de code natif

Travaux pratiques :

Exécuter une bibliothèque Wasm depuis une page Web et mesurer la perf vs JS

Jour 3 - Matin

Stockage, observation et composants

Stockage local moderne

choisir l’API adaptée — localStorage, IndexedDB, Cache API
modéliser des données dans IndexedDB avec object stores et transactions
accéder au système de fichiers utilisateur via File System Access API
mesurer les quotas avec Storage Estimate API

Travaux pratiques :

Construire une application de notes hors-ligne avec IndexedDB et File System Access

Observers

détecter l’apparition d’éléments avec IntersectionObserver
réagir aux changements de taille avec ResizeObserver
suivre les mutations DOM avec MutationObserver
détecter visibilité et focus avec Page Visibility API

Travaux pratiques :

Implémenter du lazy loading d’images et un infinite scroll via IntersectionObserver

Web Components

créer un Custom Element autonome
isoler le style avec Shadow DOM
composer avec <slot> et <template>
distribuer un composant réutilisable indépendamment du framework

Travaux pratiques :

Développer un composant carte produit autonome utilisable sans framework

Jour 3 - Après-midi

Device APIs, sécurité et IA

Permissions et Device APIs

comprendre le modèle de permissions du navigateur — Permissions API
exploiter la géolocalisation et l’orientation
accéder à la caméra et au micro avec getUserMedia
établir des flux pair-à-pair avec WebRTC
déclencher des notifications système
partager du contenu avec Web Share API
accéder au presse-papier avec Clipboard API

Travaux pratiques :

Intégrer caméra, géolocalisation et notifications dans une application existante

Sécurité côté client

chiffrer et signer avec Web Crypto API
durcir avec Content Security Policy et Trusted Types
comprendre les implications HTTPS, COOP, COEP
isoler des contextes avec iframe sandbox

Travaux pratiques :

Ajouter chiffrement local et CSP stricte à une application existante

IA et conception de pages Web

situer les assistants disponibles — ChatGPT, Claude, Copilot, Gemini, modèles locaux
formuler des prompts efficaces pour HTML et CSS
repérer les pièges spécifiques — sélecteurs hallucinés, ARIA mal posé, anti-patterns d’accessibilité, code legacy
vérifier le code généré — DevTools, Lighthouse, axe-core

Travaux pratiques :

Générer un composant accessible avec un assistant IA, le faire auditer par axe-core et corriger les défauts détectés

Modalités d’évaluation des acquis

En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-WEB-310 — Les API de HTML et CSS. Domaine : Développement. Niveau : Avancé. Durée : 3 jours (21 heures). Mots-clés : html5, css3, api, web, responsive, javascript. Cylian Formation, Dijon.