L'apprentissage du CSS peut parfois être une expérience frustrante. L'une des meilleures choses à propos de l'apprentissage du code est que les personnes qui sont douées pour le codage ont également les compétences nécessaires pour créer des jeux qui apprennent à d'autres personnes à coder.

Voici quelques jeux qui vous aident à maîtriser le CSS.

1. Flexbox Froggy

Ce jeu concerne Flexbox et couvre les propriétés de flex comme align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow et order dans 24 niveaux différents.

Ouais, le dernier niveau est un peu difficile 😉

2. Flexbox Zombies

Ici, nous utilisons Flexbox pour positionner l'arbalète du héros et frapper les zombies et survivre tout au long du jeu. Chaque section dévoile une partie de l'intrigue, vous donne une expertise sur un nouveau concept de boîte flexible flexbox et présente des défis de survie zombie qui vous obligent à consolider vos nouvelles compétences comme si votre vie en dépendait.

3. Flexbox Defense

Flexbox Defense est basé sur les jeux de tower defense classiques, mais pour placer nos éléments, nous écrivons des instructions CSS. Nous utilisons la propriété justify-content sur le conteneur principal pour déplacer les tours individuelles dans des positions efficaces.

4. Grid Graden

Le jeu Grid Garden propose 28 niveaux, en commençant par une difficulté facile et en l'augmentant progressivement. Utilisez les différentes propriétés de la grille pour arroser et faire pousser votre jardin de carottes. Grid Garden dispose d'un éditeur de code et d'une zone visuelle pour que vous puissiez voir instantanément votre résultat.

5. CSS Battle

CSS Battle est plus un défi en ligne qu'un véritable jeu de pratique CSS, l'objectif est d'écrire du code HTML et CSS pour reproduire l'image cible donnée dans le moins de code possible. Ce jeu est constamment mis à jour avec de nouveaux défis. Il dispose d'un système de classement mondial et de la possibilité de rejouer chaque défi afin que vous puissiez améliorer vos propres résultats.

6.CSS Diner

L'application Web CSS Diner est vraiment amusante et véritablement éducative pour les développeurs de tous niveaux. Vous passerez par 26 niveaux différents de difficulté croissante. Les premiers niveaux enseignent les principes de base tels que les sélecteurs d'éléments et les sélecteurs de classe. Dans les niveaux ultérieurs, vous travaillez avec des concepts avancés tels que: only-of-type et: not (x).

7. CodePip

Nous avons déjà vérifié Grid Garden et Flexbox Froggy, vous avez déjà vu quelques exemples du travail de CodePip. Ce ne sont que les deux jeux gratuits qu'ils proposent. Si vous vous inscrivez pour un compte professionnel sur leur site, ils ont également des jeux qui vont de la revue CSS générale à JavaScript.

8. Code Monkey

CodeMonkey enseigne le codage en utilisant CoffeeScript, un véritable langage de programmation, pour vous apprendre à créer vos propres jeux en HTML5. Il vise à coder pour les enfants, mais c'est aussi très amusant pour les adultes.

9. CodinGame

CodinGame propose des jeux gratuits amusants pour aider à apprendre plus de 25 langages de programmation, y compris JavaScript, Ruby et PHP. L'un des avantages de CodinGame est que vous pouvez jouer avec des amis ou des collègues, et également participer à des compétitions internationales de codage.

10. CodeCombat

Apprenez Python, JavaScript, CoffeeScript ou le langage de script de jeu Lua. Au niveau du donjon débutant, vous déplacerez votre héros à travers le jeu en utilisant certaines commandes de base selon le didacticiel à côté du jeu.

Jeux utilisant du CSS pur 🔖

1. Roadmap

Compétence et rapidité sont nécessaires pour résoudre ce petit jeu, uniquement réalisé en CSS et HTML. Il n'enseigne pas directement le CSS, mais regarder dans le code source en apprend beaucoup sur le chemin de clip, la transformation et l'animation avec @keyframes!

2. Carnival

Vous n'avez que 8 secondes pour atteindre toutes les cibles! Un joli petit jeu CSS utilisant des cases à cocher et des animations CSS.

3. Service Workers

Dans cette aventure, vous apprendrez à éviter les pièges de la PWA. Vous améliorerez vos compétences et vous épanouirez avec les techniciens de service. Peut-être même tuer les bêtes sauvages qui ont tourmenté les pauvres ouvriers du village pendant des siècles! Une inscription est requise.

4. Unfold

Ce n'est pas exactement un jeu mais plutôt une présentation interactive sur les transformations CSS 3D. Essayez-le, ce n'est pas ennuyeux 😂, les animations sont vraiment géniales, ce qui a été fait par du CSS pur.

Jeux payants 🤑

Grid Critters

Votre voyage pour maîtriser CSS Grid commence sur la mystérieuse planète Grideros. Votre mission est d'utiliser le puissant outil Grid de votre vaisseau pour sauver les créatures extraterrestres de l'extinction. Une inscription est requise.