Un jeu interactif pour apprendre CSS Grid en arrosant des carottes. 28 niveaux progressifs qui couvrent toutes les propriétés essentielles de Grid Layout.
CSS Diner
Un jeu interactif pour apprendre les sélecteurs CSS en sélectionnant des plats sur une table. 32 niveaux qui couvrent tous les sélecteurs, des plus simples aux plus avancés.
1 min de lecture
Apprentissage
CSS Diner rend les sélecteurs CSS amusants. 32 niveaux pour passer des sélecteurs de base aux pseudo-classes avancées, avec un rendu visuel immédiat à chaque fois.
Qu’est-ce que CSS Diner ?
Un jeu éducatif où tu dois sélectionner des éléments sur une table de restaurant en écrivant des sélecteurs CSS. Chaque niveau introduit un nouveau type de sélecteur, des plus courants aux plus pointus.
Sélecteurs couverts : balises, classes, IDs, descendants, enfants directs, siblings, pseudo-classes (:first-child, :nth-child, :not…), attributs…
Points forts
- Couverture complète des sélecteurs CSS
- Rendu visuel clair, tu vois ce que tu sélectionnes en temps réel
- Référence du sélecteur affichée à chaque niveau
- Aucune installation, tout dans le navigateur
- Gratuit et open-source
Limites
- Pas de sélecteurs CSS récents (
:is(),:where(),:has()) - Interface un peu datée
Tarifs
Gratuit.
Alternatives
- CSS-Tricks : Almanac - référence complète des sélecteurs
Catégories
Commentaires
Connexion via GitHub, gratuite et sans collecte de données par ce site.
Outils connexes
Un jeu interactif pour apprendre Flexbox en guidant des grenouilles vers leurs nénuphars. 24 niveaux progressifs qui couvrent toutes les propriétés Flexbox essentielles.
Des défis CSS où l’objectif est de reproduire une cible visuelle avec le moins de code possible. Un excellent terrain d’entraînement pour maîtriser CSS en profondeur.