Frontend & UI
La catégorie frontend et UI concerne la couche que les utilisateurs touchent réellement : architecture CSS, animations et transitions, accessibilité, design responsive et performance navigateur. Qu'une interface « donne une bonne sensation » n'a rien d'un hasard — c'est la somme de décisions mesurables : quelle propriété on anime, combien de millisecondes dure une transition, et si une personne naviguant au clavier voit bien l'anneau de focus. Les articles réunis ici traitent à la fois de ces détails et de la vue d'ensemble : comment éviter les décalages de mise en page, où un effet WebGL ou coûteux doit commencer et s'arrêter sur mobile, et comment intégrer l'accessibilité dès le départ plutôt que la rafistoler après coup. La plupart des exemples viennent de l'interface de ce site.
Audit de performance frontend avec Lighthouse
Comment lire un rapport Lighthouse et corriger les goulots LCP, CLS et TBT étape par étape pour accélérer votre site.
Typographie fluide avec CSS clamp() : guide pratique
Apprenez à créer des tailles de police fluides selon l'écran avec CSS clamp(), la formule et les pièges d'accessibilité.
Sticky Header : barre fixe et masquée au défilement
Comment créer un sticky header qui se fige au défilement, se masque vers le bas et réapparaît vers le haut, avec du CSS et du JavaScript propres.
Glassmorphism CSS : effet verre dépoli avec backdrop-filter
Apprenez à créer l'effet glassmorphism CSS pas à pas avec backdrop-filter, des fonds translucides et des bordures fines, performant et accessible.
Optimisation des polices web : font-display et FOUT/FOIT
Guide d'optimisation des polices web : maîtrisez FOUT/FOIT et accélérez le chargement avec font-display, preload, WOFF2 et le subsetting.
CSS Transform : guide des effets 2D et 3D
Apprenez à utiliser CSS transform avec translate, rotate et scale pour des effets 2D et 3D fluides et accélérés par le GPU.
Menu Hamburger : une navigation mobile accessible
Créez une navigation mobile accessible et fluide à partir de zéro avec un menu hamburger en CSS et JavaScript pur, étape par étape.
CSS Specificity : quelle règle l'emporte ?
Comment se calcule la CSS specificity, comment la cascade décide et comment !important et les styles inline cassent l'ordre, avec des exemples.
Animation au Scroll : Effets Performants avec Intersection Observer
La méthode moderne pour créer une animation au scroll : des effets fluides et performants déclenchés via Intersection Observer.
CSS position : relative, absolute, sticky et fixed
Un guide pratique qui clarifie chaque valeur de CSS position (static, relative, absolute, fixed, sticky) avec des exemples concrets.
Vitesse des pages web : guide pratique pour accélérer
Améliorez la vitesse des pages web avec lazy load, minification et cache ; optimisez les Core Web Vitals et réduisez le temps de chargement.
CSS Dark Mode : guide prefers-color-scheme et toggle
Comment créer un CSS dark mode avec variables CSS, prefers-color-scheme et un petit toggle. Un thème persistant sans flicker.
Animation Three.js : créer une scène 3D vivante
Bases de l'animation Three.js : scène, caméra, boucle de rendu et maillages animés pour une scène 3D vivante.
Introduction à Three.js : votre première scène 3D
Une introduction à Three.js : comprenez le WebGL et créez votre premier cube 3D animé dans le navigateur.
Accessibilité web : clavier, ARIA et contraste
Les bases de l'accessibilité web : navigation clavier, ARIA correct et ratios de contraste WCAG pour des interfaces utilisables par tous.
Variables CSS : guide pratique pour thèmes et réutilisation
Apprenez à créer des thèmes, gérer les couleurs depuis un seul endroit et réduire la répétition avec les variables CSS.
Guide CSS Media Query : design responsive
Apprenez une stratégie de points de rupture mobile-first avec CSS media query, évitez les erreurs et appliquez des techniques responsive modernes.
Animation CSS : guide transition et keyframes
Les bases de l'animation CSS : transitions fluides, mouvement avec @keyframes, conseils de performance et exemples concrets.
CSS Grid : guide pratique des mises en page modernes
Apprenez à créer des mises en page bidimensionnelles et flexibles avec CSS Grid grâce aux modèles de lignes et de colonnes.
Alignement et mise en page avec CSS Flexbox
Apprenez les bases de CSS Flexbox : axe principal et axe transversal, justify-content, align-items, gap, flex-grow/shrink/basis et des modèles de mise en page réels.