Tutoriel
Tous les tutoriels
Chaque tutoriel est écrit pour être terminé en une seule séance. Court, testé, sans remplissage.
01Déployez un site Next.js statique sur Netlify en 10 minutesTrois fichiers, une commande de build, aucun serveur à surveiller. La façon très intéressante de publier Next.js au format HTML brut.02Intégrez votre nouveau site Web à Google (sans astuces)Qu'est-ce qui fait réellement que Googlebot trouve et indexe un tout nouveau site en quelques jours, et pourquoi le classement dès le premier jour est une promesse que personne d'honnête ne peut faire.03Ajouter du hreflang à un site Web avec plus d'une langueUne page portugaise en concurrence avec sa propre page jumelle anglaise est un très bon moyen de perdre du trafic. Corrigez-le avec trois lignes de métadonnées.047 recettes de CSS très cool avec :has() qui remplacent le JavaScriptLe sélecteur relationnel a transformé 95 % des visiteurs en personnes qui n'ont plus besoin de votre script DOM.05Accordéons sans JavaScript avec <details name>Les accordéons exclusifs sont désormais un attribut HTML. Le clavier, la recherche et l'impression fonctionnent tous sans gestionnaire ni bundle.06Requêtes de conteneur vs requêtes multimédia : quand utiliser lesquellesLes requêtes des médias regardent l’écran. Les requêtes de conteneur surveillent la boîte. Savoir lequel atteindre est tout le truc.07Correction de LCP et INP lents sans installer une seule bibliothèqueLes pages les plus lentes que vous rencontrez attendent trois choses connues. Vous pouvez réparer les trois en un après-midi, gratuitement.08Ajoutez une vraie recherche à un site statique avec PagefindUn index de recherche fourni sous forme de fichiers statiques, pèse moins d’un logo et ne nécessite aucun serveur. Très génial.09Validité du formulaire de style sans ligne de JavaScriptLe navigateur valide déjà ; CSS peut peindre cette machinerie. Quatre états, un formulaire, zéro gestionnaire.10De très belles transitions de pages avec l'API View Transitions en 20 lignesCertains navigateurs vous proposeront des classes d'animation sur plusieurs pages pour une seule ligne d'attribut. Disponible dans 92,9 pour cent de la navigation.11Le système de thèmes pour lequel personne n'a besoin d'un outil de conception : color-mix()Dérivez des surfaces survolées, muettes et grisées à partir de deux propriétés personnalisées. Le mode sombre devient un bloc, pas une refonte.12Modales et toasts de la plateforme : <dialog> et popoverLe focus trapping, la couche supérieure et la gestion Escape sont intégrés. Un modal roulé à la main oublie généralement deux des trois.13Une barre de progression de lecture en CSS puranimation-timeline : scroll() lie un élément au défilement du document. Pas de boucle rAF, pas d'écouteur, rien à étrangler.14text-wrap : équilibre et joli, deux valeurs qui corrigent le texte irrégulierUne déclaration pour les titres et les paragraphes. Pas de points d'arrêt, pas de JavaScript, pas de changements de vernis orphelins.15Un audit de données structurées de 10 minutes que vous pouvez exécuter manuellementLe balisage Schema.org gagne ses octets uniquement s'il analyse, fait correspondre la page et valide. Trois outils, une liste de contrôle.16robots.txt vs noindex : la table de décisionBloquer un robot et refuser un index sont des questions différentes. Les échanger masque les pages pour toujours.17srcset et tailles, le guide d'une pageDeux attributs déterminent le nombre de pixels téléchargés par le navigateur. La moitié des tailles est celle que la plupart des sites ignorent.18Formatez les prix et les dates avec le navigateur, pas avec une bibliothèqueIntl.NumberFormat et Intl.DateTimeFormat fournissent des roupies, des dates et des heures relatives adaptées aux paramètres régionaux, sans aucune dépendance.