Apprenez à coder gratuitement en moins de 30 jours !   📕

12 jeux gratuits pour apprendre le CSS

Article mis à jour le jeudi 1 septembre 2022.

12 jeux gratuits pour apprendre le CSS

Vous voulez vous améliorer en CSS ? Le CSS est votre bête noire ? Vous ne comprennez rien au flexbox ?

Alors ces jeux CSS sont faits pour vous !

Le CSS est considéré comme étant un des langages les plus faciles à apprendre. Pour cette raison, beaucoup de développeurs se disent que c’est trop facile que pour prendre du temps à s’améliorer en CSS.

Pourtant, le CSS est très poussé et devenir meilleur dans ce langage vous permettra de réaliser des visuels et animations incroyables. Son apprentissage vous fera gagner enormément de temps sur le long terme.

J’ai donc rassembler les meilleurs jeux du web pour que vous puissiez vous progresser en CSS de manière ludique et amusante.

# Jeu pour apprendre le CSS Sujet
1. Flexbox Froggy Flexbox
2. Flexbox Defense Flexbox
3. Knights of the Flexbox Table Flexbox
4. Flex Box Adventure Flexbox
5. Flexbox Zombies Flexbox
6. Grid Garden Grid
7. Grid Attack Grid
8. CSS Diner Général
9. Guess CSS Général
10. CSS Speedrun Général
11. CSS Challenges Général
12. CSSBattle Général

1. Flexbox froggy

Flexbox froggy jeu pour apprendre le CSS

Flexbox froggy est un jeu sur le web pour apprendre les propriétés flex. Il est composé d’une vingtaine de niveaux dans lesquels vou apprendrez à utiliser flex-wrap, flex-flow et à positionner vos éléments HTML avec align-items, justify-content, align-content, flex-direction, align-self.

Flexbox froggy est un des premiers jeux de résolution CSS auquel j’ai joué quand j’ai appris la propriété flex en CSS. Il m’a aidé dans ma compréhension de ces propriétés CSS essentielles.

Le code du jeu est disponible en open-source sur github.

Concrètement, le but du jeu est de placer la ou les grenouille(s) sur la feuille de nénuphar à l’aide de flex.

Jouer à Flexbox Froggy

2. Flexbox defense

Flexbox defense jeu pour apprendre le CSS

Flexbox Defense est un autre jeu pour apprendre la propriété flex en CSS. C’est un Tower Defense (TD) dans lequel il faut placer des tourelles avec du CSS pour éliminer toutes les vagues de sbires qui arrivent.

Le jeu comporte 12 niveaux et plusieurs réponses peuvent être correctes. Il couvre les propriétés flex : align-items, justify-content, flex-direction, align-self.

Jouer à Flexbox Defense

3. Knights of the Flexbox Table

Knights of the Flexbox Table jeu pour apprendre le CSS

Knights of the Flexbox Table est un jeu sur lequel vous pourrez entraîner vos compétences en CSS et plus particulièrement avec la propriété flex avec la bibliothèque Tailwind. Vous deverez utiliser les classes de Tailwind pour résoudre les différents challenges du site.

Le jeu comporte un total de 18 niveaux.

Jouer à Knights of the Flexbox Table

4. Flex Box Adventure

Flex Box Adventure jeu pour apprendre le CSS

Flex Box Adventure est un jeu epic avec un univers de RPG sur lequel vous trouverez des défis et astuces pour vous améliorer en CSS. Le site comporte un total de 24 niveaux qui deviennent de plus en plus difficiles.

Jouer à Flex Box Adventure

5. Flexbox zombies

Flexbox zombies jeu pour apprendre le CSS

Flexbox Zombies est un jeu avec un scénario et des dialogues pour rendre plus immersif votre apprentissage des flexbox. Il possède 12 chapitres, avec chacun jusqu’à 25 niveaux. Le jeu est listé à 179 dollars mais est en prix barré gratuit depuis des années 🤷.

Jouer à Flexbox Zombies

6. Grid garden

Grid garden jeu pour apprendre le CSS

Grid garden est un jeu qui permet d’apprendre les Grid en CSS. Vous devez utiliser des grid pour vous assurer que toutes les carottes reçoivent de l’eau. Il comporte 28 niveaux pour s’exercer à un grand nombre d’options de grid !

Au programme, vous apprendrez comment fonctionne le layout avec grid mais aussi les différentes propriétés de grid : grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows ou encore grid-template.

Jouer à Grid Garden

7. Grid attack

Grid attack jeu pour apprendre le CSS

Grid Attack est un jeu similaire à Flexbox Adventure. Les deux jeux ont été codés par la même personne est sont de même qualité. Le but du jeu est d’utiliser le grid en CSS pour modifier le terrain afin que les démons ne survivent pas.

Vous pourrez vous exercer sur 80 niveaux, ce qui vous donne de nombreuses options et le temps d’apprendre les différentes propriétés grid en CSS de manière ludique.

Jouer à Grid Attack

8. CSS Diner

CSS Diner jeu pour apprendre le CSS

CSS Diner est un jeu open-source sur lequel vous devrez séléctionner les bon éléments HTML en utilisant les selectors. Le jeu dispose de 32 niveaux et des jolies animations pour montrer quel sélecteur vous devriez cibler.

Jouer à CSS Diner

9. Guess CSS

Guess CSS jeu pour apprendre le CSS

Guess CSS est un questionnaire à choix multiples pour vous entraîner à utiliser les bonnes propriétés CSS. Un visuel est montré ainsi que les noeuds HTML et le but est de choisir la bonne réponse parmis 3 options.

Jouer à Guess CSS

10. CSS Speedrun

CSS Speedrun jeu pour apprendre le CSS

CSS Speedrun est un jeu CSS qui a pour but d’écrire sélecteurs CSS spécifiques pour cibler les éléments mis en évidence avec une flèche. Comme son nom l’indique, un compteur de temps se met à tourner après l’introduction et il faut essayer de faire le meilleur temps possible.

Le jeu comporte 10 niveaux en plus de l’introduction.

Jouer à CSS Speedrun

11. CSS Challenges

CSS Challenges jeu pour apprendre le CSS

CSS Challenges est un site qui offre des moyens amusants et ludiques de mettre en pratique ses compétences en matière de CSS. Le site propose des défis CSS et des quiz. Pour les défis, il existe 5 niveaux de difficulté différents, allant de facile à “insane”.

Pour chaque défi, vous disposez d’une image d’aperçu et d’un ensemble de règles pour le reproduire, la règle principale pour tous les défis étant d’utiliser uniquement du CSS.

Jouer à CSS Challenges

12. CSSBattle

CSSBattle jeu pour apprendre le CSS

CSSBattle est un jeu en ligne compétitif sur lequel les joueurs s’affrontent en résolvant des problèmes CSS. Des joueurs du monde entier tentent de reproduire visuellement les “targets” avec le moins de CSS possible. Remporter des points sert à se hisser en haut du classement.

Jouer à CSSBattle

Aller plus loin en CSS !

CSS CommitStrip

Vous connaissez maintenant les meilleurs jeux du net pour vous améliorer en CSS !

Prendre le temps de s’améliorer en CSS fait vraiment la différence sur le long terme dans une carrière de développeur qui touche de près ou de loin aux technologies web.

D’ailleurs, si vous voulez vous améliorer en HTML ou CSS, j’ai eécrit un article sur les meilleurs livres HTML/CSS.

APPRENEZ GRATUITEMENT À CODER EN MOINS DE 30 JOURS !
Vous voulez apprendre la programmation ?
Recevez mon ebook GRATUIT : "9 astuces pour apprendre à coder".
Découvrez si le code est fait pour vous !

Comment Coder

Je m'appelle Thomas. J'ai commencé à coder dans mon enfance. Depuis ma sortie de la première promo de l'École 42, j'ai développé des centaines d'applications et sites web. Sur ce blog, je vous donne les meilleurs conseils et astuces pour apprendre comment apprendre à coder efficacement.