10 jeux pour s’améliorer en CSS
Tags: webdev, css, html, beginners
Published: 2022-08-22 17:10:11

Bonjour tout le monde dans cet article je vous présente 10 jeux pour s'améliorer en **CSS** sans beaucoup d'efforts alors c'est partie!
selon moi le plus grand problème qu'on puisse avoir quand on débute dans le code ce souvent le manque de pratique on a tendance a beaucoup apprendre des nouveaux concepts et on pratique peu, au début ça peut vous donner l'impression de progresser.
mais au fur et à mesure que vous progresser vous s'allez vous rendre compte d'avoir des lacunes sur certains concepts que vous avez pourtant appris mais pas compris car on dit “mieux vaut comprendre qu'apprendre.” Sans plus attendre, allons-y.

[10. GUESS CSS ](https://www.guess-css.app/)

![guess css home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9blivxvdsuae86l3tdag.png)



 il s'agit d'un jeu de réflexion HTML CSS dans lequel votre tâche consiste à deviner lequel des trois extraits CSS a été utilisé pour rendre le fragment ! Une fois que vous avez fait votre supposition, l'application indique laquelle était correcte et met à jour votre score affiché en haut.

Naviguez entre les tâches en cours et terminées avec les flèches à gauche et à droite du cadre.

Le jeu contient les puzzles suivants ;

- Flexbox
- Position
- Selectors
- Display
- Grid

[9. CSS ADVENTURE](https://codingfantasy.com/games/flexboxadventure)

![css adventure home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qaaje8urargg20zln9q.png)
Commencez une aventure mystérieuse et aidez le roi Arthur à vaincre trois frères maléfiques en utilisant CSS Flex Box. Le jeu propose trois modes de jeu (facile, moyen, difficile) et 24 niveaux de codage.

[8. Knights of the Flexbox table](https://knightsoftheflexboxtable.com/)


![Knights of the Flexbox table home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efp880zcguribfjrige5.png)
Un jeu qui vous apprend les flexbox et Tailwind CSS en même temps. L'objectif du jeu est de déplacer le chevalier et ses amis autour des donjons pour découvrir des trésors cachés. Le jeu comporte 18 niveaux avec un éditeur de code et une zone visuelle pour voir le résultat.

[7. CSS DINER](https://flukeout.github.io/)

![css diner home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifwf7n13lyzi6vsnns5e.png)

C'est un jeu amusant pour pratiquer et apprendre les sélecteurs CSS. Le jeu comporte 32 niveaux avec une représentation visuelle pour l'aide et la compréhension et un éditeur de code pour la saisie. C'est un bon jeu CSS pour tous les niveaux, que vous soyez un débutant ou un développeur chevronné.

[6.Speedrun CSS](https://css-speedrun.netlify.app/)

![speedrun home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk1am8yqwcmbw195d34o.png)
Un petit jeu sympa pour mettre en pratique vos connaissances sur les sélecteurs CSS. Le jeu a 10 niveaux. Vous devez entrer un sélecteur pour faire correspondre les éléments marqués sur l'exemple. Tout cela alors que le temps presse.

[5. FLEXBOX DEFENSE](http://www.flexboxdefense.com/)


![flexbox defense home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52po6fspoygg1vf3oylu.png)

Si vous aimez les jeux de type tower defense, vous allez adorer celui-ci. Le but de ce jeu est d'écrire des règles flexibles pour positionner correctement les tours et arrêter les vagues d'ennemis. Le jeu comporte 12 niveaux, un éditeur de code et une partie visuelle interactive qui agit comme un véritable niveau de jeu.

[4.GRID GARDEN](https://cssgridgarden.com/)


![grid garden home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtgckfw9oc958mxenuba.png)
Un jeu d'entraînement CSS agréable et simple pour apprendre la gridpropriété. Ce jeu propose 28 niveaux, en commençant par une difficulté facile et en l'augmentant progressivement. Utilisez les différentes gridpropriétés 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.



[3.FLEXBOX FROGGY](http://flexboxfroggy.com/#fr)


![flexbox froggy home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjb73dlxkywsqrdu3lkr.png)

Du créateur de Grid Garden, ce jeu vous aidera à pratiquer vos flexboxcompétences CSS. Écrivez du code pour aider à amener Froggy sur le nénuphar. Le jeu comporte 24 niveaux avec un éditeur de code et une zone visuelle pour voir les résultats.
[2. CSS BATTLE](https://cssbattle.dev/)


![css battle page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhfpf2a7auou97hqntve.png)

Il s'agit plus d'un défi en ligne que d'un véritable jeu d'entraînement CSS, l'objectif est d'écrire du code HTML et CSS pour reproduire l'image cible donnée avec 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.

[1.ZOMBIE FLEXBOX](https://mastery.games/flexboxzombies/)

![flexbox zombies home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gssmkjgknwb0razw0hw.gif)
Ce jeu CSS vous aidera à maîtriser les flexboxes. Combattez les zombies tout en apprenant l' flexboxutilisation de la propriété. Le jeu a de beaux visuels et un scénario. Le scénario est divisé en 12 chapitres comportant chacun jusqu'à 25 niveaux.

REMARQUE : Le jeu nécessite une inscription.

J'espère que vous avez aimé cet article si ce n'est pas le cas dites-moi en commentaire et abonnez-vous pour en savoir plus.