Ces 10 jeux amusants vous apprendront CSS moderne

Sommaire

Toggle

Résumé

• Flexbox Froggy enseigne la disposition Flexbox à travers des défis interactifs avec de jolies grenouilles.

• Flexbox Zombies offre une façon amusante d'apprendre Flexbox avec des défis et des conseils sur le thème des zombies.

• CSSBattle défie les utilisateurs de recréer des formes à l'aide de CSS, présentant la puissance et la créativité du CSS.

Apprenez tout sur les dispositions CSS modernes et polissez vos compétences CSS de base avec ces jeux interactifs. Avec des techniques de mise en page comme CSS Grid, un défi Speedrun et un test de sélecteur fondamental, il y a quelque chose pour toutes les capacités.

1

Flexbox froggy

Enseignant aux concepteurs de la disposition flexible de la boîte pendant près d'une décennie, Flexbox Froggy est probablement le jeu CSS le plus connu. Pour une bonne raison aussi. Flexbox est non seulement l'un des concepts CSS plus délicats à clouer, mais ce tutoriel gamifié gagne en grande partie sur la facilité d'utilisation et la gentillesse.

À travers une série de 24 défis, chaque niveau affiche une poignée de grenouilles et de lis correspondants qu'ils appellent chez eux. Votre tâche consiste à transporter chaque amphibien en utilisant la puissance de CSS Flex seul. Vous pouvez éditer librement le CSS dans une zone de texte et voir immédiatement comment diverses propriétés affectent les positions des grenouilles. Il n'y a pas de pénalité pour que quelque chose ne soit pas, vous pouvez donc expérimenter, affiner votre CSS et observer les résultats.

Les choses commencent facilement avec une simple propriété de justification de justification déplaçant une grenouille d'un coin à un autre. Mais la difficulté accélère pour prendre différentes directions, emballage et plusieurs ensembles de grenouilles différents. Chaque niveau a un bref texte d'aide qui relie les noms de propriétés à une brève description parallèlement aux valeurs possibles.

Flexbox Froggy est parfait pour les débutants ou les concepteurs plus avancés qui cherchent à actualiser leurs connaissances Flexbox.

2

Zombies Flexbox

Si aider les grenouilles semble un peu trop mignonne, vous préférez peut-être aborder des hordes de zombies mangeurs de cerveaux à la place. Flexbox Zombies augmente les valeurs de production avec l'animation, la musique et le dialogue. Mais son approche est similaire à Flexbox Froggy: Tapez CSS dans une zone de texte pour progresser.

Le jeu est présenté à travers une série de niveaux regroupés en chapitres qui sont verrouillés pour vous empêcher de sauter. Votre CSS contrôle une arbalète – et, plus tard, d'autres armes – pour zéler les zombies dans diverses positions à l'écran.

Avec 12 chapitres, chacun abritant environ 20 étapes qui combinent des tutoriels et des défis, il y a beaucoup de valeur ici. Ces défis n'ont pas les conseils rapides que Flexbox Froggy offre, mais le bouton Astuce donne des conseils en fonction de ce que vous avez déjà essayé, ce qui est un ajout utile.

3

Défense Flexbox

Prenant une avance du genre Tower Defense, Flexbox Defence a une disposition et une sensation similaires à Flexbox Froggy. Cette fois, plutôt que d'aider les grenouilles mignonnes, votre tâche consiste à positionner les tours afin qu'ils éliminent les ennemis entrants qui se déplacent le long d'un chemin.

Dans ce jeu, l'objectif de chaque niveau est légèrement moins clair, donc l'accent est un peu plus sur le jeu et la stratégie. Non seulement vous devrez appliquer vos compétences CSS, mais vous devrez également déterminer exactement où placer vos tours pour éliminer les attaquants entrants.

Le défi reste du côté simple, mais l'élément supplémentaire encourage l'expérimentation, vous pouvez donc trouver qu'il est plus efficace, avec une plus grande couverture des propriétés Flexbox. Les conseils sont, une fois de plus, offerts via des popups de volants simples, et le petit ensemble de 12 niveaux en fait une option idéale pour une session d'apprentissage rapide.

4

Aventure flexible

Flex Box Adventure est encore une autre variation d'un thème familier, mais il comprend beaucoup d'explications et de belles fonctionnalités de qualité de vie. Guidez vos héros pour vaincre une variété d'ennemis et conquérir CSS Flexbox!

Le jeu comprend trois paramètres de difficulté qui affectent la quantité d'aide qu'il fournit. Dans le cadre le plus simple, l'expérience est presque comme un tutoriel CSS annoté, mais les annotations engagent des puzzles qui sont parfaitement choisis pour démontrer chaque concept.

Chaque niveau se déverrouille lorsque vous terminez le précédent, même sur le cadre le plus simple, donc vos progrès sont guidés et linéaires. Ma seule petite plainte est que les niveaux se déverrouillent uniquement dans leur réglage de difficulté, il vaut donc la peine de vous défier et de commencer une difficulté plus élevée.

5

Jardin de grille

Du créateur de Flexbox Froggy, Grid Garden adopte une approche similaire à la disposition de la grille CSS. Cette fois-ci, vous êtes chargé d'arroser les carottes et d'empoisonner les mauvaises herbes, mais le principe et l'interface sont tous deux familiers.

La grille CSS fait beaucoup d'utilisation des propriétés raccourcielles afin que « 3 / Span 3 » et « 3/6 » soient équivalents. Grid Garden vous enseigne plusieurs de ces raccourcis, mais il vous permet d'utiliser n'importe quel CSS qui mène à une solution correcte, donc plusieurs approches sont souvent disponibles.

Comme Flexbox Froggy, il s'agit d'un court ensemble de tests que vous pouvez traverser assez rapidement si vous êtes déjà un expert CSS. Mais ils offrent une bonne couverture des bases de la grille et culminent dans un défi délicat satisfaisant.

6

Attaque de grille

Les créateurs de Flex Box Adventure ont également produit un équivalent de grille de leur jeu Flexbox, Grid Attack. Il fonctionne de la même manière, avec trois paramètres de difficulté, beaucoup d'indices de soutien et une progression guidée. Au lieu de 24 niveaux, cependant, ce jeu en a un énorme 80, reflétant la nature plus compliquée de la grille CSS.

L'attaque de la grille vous lance quelque peu à l'extrémité profonde; Il peut être difficile de déterminer exactement ce que le premier niveau veut même que vous fassiez. Mais une fois que vous connaissez le style de diagramme, le grand nombre de niveaux constitue une courbe d'apprentissage assez douce.

Une fonctionnalité vraiment sympa est l'inspecteur, qui attire une superposition de grille pour vous aider à vous orienter. C'est un peu comme la disposition de la grille que vos outils de développement du navigateur peuvent offrir, mais il est spécifiquement adapté à chaque défi. L'inspecteur peut être un peu un spoiler, alors assurez-vous de le cacher si vous recherchez un vrai défi.

7

Anachore

Une fois que vous avez maîtrisé Flex and Grid, il est temps d'explorer d'autres aspects du CSS. Du créateur de Flexbox Froggy et Grid Garden, Anchoreum traite du positionnement de l'ancrage CSS.

Le positionnement de l'ancrage est un schéma plus récent qui vous permet de positionner un élément par rapport à un autre. En fait, c'est si nouveau que tous les navigateurs ne le soutiennent pas; Si vous utilisez Firefox ou Safari, ce jeu peut ne pas fonctionner pour vous.

Anchoreum est plus long que les deux matchs précédents de la série, avec un total de 40 défis. J'avoue que je n'étais même pas au courant du positionnement de l'ancrage quand j'ai découvert ce site. Mais, encore une fois, le jeu fait un excellent travail en combinant des explications, des indices et des puzzles pour enseigner les fondamentaux.

8

CSS Diner

CSS est plus que la mise en page, et les jeux peuvent également vous apprendre sur une syntaxe plus fondamentale. Les sélecteurs sont une partie importante mais compliquée du CSS, et l'ensemble de 32 défis de CSS Diner est un excellent moyen de saisir vos compétences.

Chaque niveau a une exigence très simple: tapez le sélecteur qui correspond aux éléments donnés. Cela va de la sélection de tous les éléments avec le même nom de balise à la sélection de chaque deuxième élément d'une liste, à partir du troisième.

La plupart de ces défis sont faciles, afin que les experts puissent essayer de le faire accélérer à la place. Mais certaines des nuances de sélecteurs de type ou de correspondance de motifs d'attributs peuvent ne pas soumettre les sorciers CSS, alors ne soyez pas trop complaisant!

9

CSS Speedrun

En parlant de SpeedRuns, en voici un vrai. CSS Speedrun est probablement la recommandation la plus élémentaire de la liste, mais c'est une façon courte et amusante de vous mettre au défi.

Chacun des dix niveaux présente un certain HTML et vous tâche avec la rédaction d'un sélecteur pour identifier les éléments mis en évidence. Cela peut ressembler beaucoup à CSS Diner, mais CSS SpeedRun a quelques différences intéressantes.

D'une part, une minuterie ajoute à la pression, en comptant le nombre de secondes, il vous faut pour terminer chaque tâche. Et ces tâches sont à un niveau légèrement plus délicat. Par exemple, vous devrez vous rappeler comment structurer un sélecteur complexe nth-enfant au deuxième niveau.

Heureusement, chaque niveau a deux formes d'indice. Le premier est une fenêtre contextuelle simple, tandis que la seconde est un lien direct avec la documentation MDN pertinente. Le site reconnaît également qu'il peut être plus d'une solution, montrant le «choix de développeurs» attendu lorsque vous terminez chaque défi.

Consultez le niveau 6 pour un exemple particulièrement bon de plusieurs solutions.

10

Cssbattle

Celui-ci n'est pas pour les timides! Contrairement à l'un des autres jeux présentés ici, CSSBattle a des défis quotidiens réguliers. Chacun d'eux vous oblige à recréer une forme ou un motif spécifique en utilisant CSS seul.

Beaucoup de jeux ici sont libéraux dans les solutions qu'ils acceptent, mais CSS Battle va plus loin. Vous pouvez modifier le balisage et le CSS de toutes les manières vous convient; La seule chose qui compte est le résultat final.

CSS Battle montre à quel point les feuilles de style peuvent être puissantes. Vous ne croyez peut-être pas que certaines des formes demandées peuvent être produites, mais avec la persévérance, l'expérimentation et beaucoup de connaissances CSS, elles sont réalisables.

Le jeu est gratuit, bien que vous deviez vous inscrire pour soumettre votre score et payer un abonnement pour un accès complet aux défis passés. La notation est un peu imprévisible (comment mesurez-vous exactement la similitude entre deux images de toute façon?) Mais des caractéristiques comme la comparaison visuelle et la comparaison des diapositives aideront vos efforts.

La propriété Border-Radius est souvent utile lorsque vous essayez de créer des cercles et d'autres lignes incurvées. Assurez-vous de supprimer les commentaires avant de soumettre votre score!