Améliorez vos compétences en intégrations avec ces 6 jeux interactifs !

Après les derniers articles de jeux pour développeurs, on m'a fait la remarque qu'il n'y en a que pour les développeurs, et jamais pour les intégrateurs ! Pour réparer cette injustice, je vous propose cette liste de 6 jeux permettant d'apprendre à manier le CSS et le HTML.

Attention, ces jeux sont tous en anglais (à l'heure où j'écris ces lignes), et vous demanderont une connaissance au moins basique de cette langue pour comprendre les exercices.

Erase All Kittens

E.A.K est clairement mon chouchou dans cette liste. Ce jeu en cours de création propose d'apprendre aux enfants (et aux plus grands aussi) à utiliser le HTML et le CSS pour avancer dans le jeu.

E.A.K. vous met aux commandes d'une petite créature qui devra aller sauver des gifs de chats dans divers niveaux de plateforme. Pour passer les obstacles les plus ardus, un éditeur HTML/CSS vous permet de hacker le niveau en cours, en ajoutant des plateformes ou changer leur taille. Malin, bien fait, on se prend vite au jeu et on regrette qu'il n'y ai pas plus de niveaux.

Pour finir, j'aimerais ajouter que E.A.K. est open source, et que toute personne ayant la possibilité de traduire le jeu en français, créer des niveaux, ou même de faire essayer le jeu a une classe d'enfant et grandement encourage à le faire. Le jeu est encore sur une early demo, mais je lui souhaite le plus de réussite possible.

 

CSS Diner

CSS diner est un site interactif et animé permettant de mieux prendre en main les selectors CSS les plus complexes. L'objectif est toujours le même : sélectionner les bons ingrédients (oui, les assiettes sont des ingrédients) sur la table, en fonction des instructions.

Intéressant bien que relativement sans challenge, il reste de très bonne facture.

Flexbox Froggy

Dans la même veine que CSS Diner, mais en remplaçant les selectors par l'utilisation de Flexbox, ce site vous propose d'approfondir votre connaissance du CSS en aidant des grenouilles à rejoindre leurs nénuphars.

CodeAvenger

CodeAvenger se rapproche plus du tutoriel interactif que du jeu, et risque donc de ne pas intéresser les enfants. Néanmoins, il reste bien fait et peut tout à fait être utile à un adulte qui a deux heures à perdre et un manque de compétence en intégration à combler.

Les cours sont détaillés, intéressants, et ont une approche mobile first intéressante.

CSS selector game

Un simple quiz pour comprendre le fonctionnement global des selectors en CSS. Plus simple que CSS diner, il peut vous servir de point d'entree avant d'attaquer ce dernier.

Un peu sobre pour intéresser des enfants, il sera à réserver aux adultes anglophones.

Codepupil

Codepupil est peut-être intéressant sur le fond, mais la forme laisse très clairement à désirer. Que ce soit les étapes d'explications suivies d'un questionnaire ou les étapes d'éditions interactives, le design du site est daté d'un bout à l'autre, et ne donne pas vraiment envie.

À essayer si vous n'avez trouvé votre bonheur sur aucun des précédents, sinon restez sur E.A.K,  vous y serez mieux !