DEV Community

Cover image for 10 jeux pour s’améliorer en CSS
Oscar kanangila
Oscar kanangila

Posted on

10 jeux pour s’améliorer en CSS

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

guess css home page

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

css adventure home page
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

Knights of the Flexbox table home page
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

css diner home page

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

speedrun home page
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

flexbox defense home page

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

grid garden home page
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

flexbox froggy home page

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

css battle page

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

flexbox zombies home page
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.

Top comments (4)

Collapse
 
maxideutsch profile image
maxideutsch

Bonne journée. Ce qui précède sont des arcades, mais dernièrement, j'aime davantage les tireurs. Mes amis et moi jouons souvent à csgo. Ce jeu a une capacité intéressante pour personnaliser les armes à l'aide de skins. Pour en tirer le meilleur parti, j'ouvre des caisses sur la plateforme skin.club/fr. C'est un bon moyen de décompresser après une dure journée de travail.

Collapse
 
rebeccajoyce profile image
Rebecca B. • Edited

Bonjour.
Je voudrais réaliser un casino en ligne semblable à TerraCasino. Je voudrais avoir des idées en ce qui concerne le design afin d'avoir une interface utilisateur très attractive et différente de ce qui est très souvent vu sur les autres casinos en ligne. Avez-vous des recommandations particulières à me faire ? J'ai de très bonnes bases en CSS et je suis également disposé à apprendre de nouvelles compétences au besoin.

Collapse
 
devdufutur profile image
Rudy Nappée

Super ressources, merci à toi !

Collapse
 
onnasoo profile image
Onna Soo

Si vous souhaitez améliorer vos compétences CSS et recherchez des ressources adaptées, il existe d'excellentes plateformes en ligne à considérer. Tout d’abord, essayez CSS-Tricks. Ce n'est pas seulement un site avec des tutoriels, mais aussi une communauté à part entière où vous pouvez trouver des conseils utiles et des exemples de projets réels. Il existe ici des exercices interactifs qui vous aideront à comprendre les subtilités du CSS et à appliquer les connaissances acquises dans la pratique.