#css
8 tutoriels
HTML : créer un tableau de données (table) lisible et accessible
Construire un tableau HTML correct : table, caption, thead, tbody, th avec scope, fusion de cellules, mise en forme CSS en bandes, et défilement horizontal sur mobile.
CSS : variables (custom properties) et mode sombre automatique
Définir des variables CSS dans :root, les réutiliser avec var(), et ajouter un mode sombre automatique avec prefers-color-scheme, plus un bouton pour forcer le thème.
CSS : un site adapté aux téléphones (responsive, media queries)
Rendre un site responsive : balise viewport, approche mobile d'abord, media queries min-width, images fluides, unités relatives et clamp() pour les tailles de texte, et tester avec les outils du navigateur.
CSS : utiliser une belle police (Google Fonts, @font-face)
Changer la police d'un site : piles de polices système, Google Fonts, auto-hébergement avec @font-face et WOFF2, font-display swap, et bonnes pratiques de lisibilité.
CSS Grid : créer une grille et une mise en page complète
Utiliser CSS Grid : définir colonnes et lignes avec grid-template-columns, l'unité fr, repeat et minmax pour une galerie responsive sans media query, et les zones nommées pour une mise en page.
CSS Flexbox : aligner et répartir des éléments facilement
Utiliser Flexbox pour aligner des éléments en ligne ou en colonne : display flex, justify-content, align-items, gap, flex-wrap et flex: 1, avec l'exemple d'une barre de navigation.
CSS : les bases (sélecteurs, couleurs, polices, marges)
Relier une feuille de style CSS à sa page, cibler les éléments avec les sélecteurs (balise, classe, id), régler couleurs, polices, tailles, et comprendre le modèle de boîte (margin, padding, border).
CSS : transitions et animations (sans JavaScript)
Animer une page en CSS : transitions au survol, transformations (translate, scale, rotate), animations avec @keyframes, et respecter prefers-reduced-motion pour l'accessibilité.