Site de jeu en ligne gratuit pour apprendre le CSS

2022-10-04 00:07:42  mardi  4308 mots  

CSS est le langage que nous utilisons pour styliser un document HTML qui décrit comment les éléments HTML doivent être affichés dans un navigateur. Mais s'il est important de connaître les bases du CSS, le CSS pur est à peine utilisé de nos jours. Les développeurs modernes utilisent principalement des langages d'extension CSS tels que Saas et des modèles de mise en page Web CSS 3 tels que Flexbox pour styliser leurs sites Web. Mais ne vous découragez pas, tous ces concepts s'appuient les uns sur les autres et sont faciles à apprendre. Tout ce dont vous avez besoin est une bonne ressource d'apprentissage et un peu de pratique.

Si vous venez de commencer à apprendre le HTML et le CSS, commencez par le premier jeu puis complétez-les un par un. Les développeurs plus confiants peuvent utiliser ces jeux pour en savoir plus sur CSS flexbox, grid ou perfectionner leurs compétences CSS en rivalisant avec d'autres joueurs du monde entier.

Restaurant CSS

Idéal pour : apprendre et pratiquer le CSS et le HTML pour les débutants

Si vous êtes un débutant complet, c'est une bonne idée de commencer avec un jeu comme CSS Diner. Avant d'être prêt à maîtriser des sujets plus complexes comme la boîte flexible CSS ou la grille, apprenez-en davantage sur les balises HTML, les classes, les identifiants et d'autres concepts importants. Après avoir terminé les 32 niveaux de ce jeu, vous aurez une base solide et serez prêt à passer au jeu suivant.

Grille Jardin

Idéal pour : apprendre la grille CSS

Cultivez votre jardin de carottes en utilisant la grille CSS. Dans ce petit jeu amusant, vous devez arroser vos cultures de carottes et empoisonner les mauvaises herbes en maîtrisant la grille CSS, un module puissant utilisé pour créer des dispositions de grille en 2 dimensions. Avec lui, vous pouvez facilement définir des colonnes, des lignes et des zones de modèle de grille sur votre site Web. Ouvrez simplement le jeu et commencez à jouer immédiatement - l'inscription n'est pas requise !

Grille Jardin

Zombies Flexbox

Idéal pour : apprendre la mise en page CSS flexbox

Flexbox est un autre concept que tout développeur front-end devrait maîtriser. Dans ce jeu éducatif, chaque chapitre dévoilera une partie de l'intrigue, vous donnant l'occasion d'apprendre et de pratiquer un nouveau concept de flexbox.

Zombies Flexbox

Et si jamais vous avez besoin d'un rappel sur le fonctionnement de CSS Flexbox, voici une incroyable feuille de triche qui vous sera toujours utile :

Un guide complet de Flexbox

Notre guide complet sur la mise en page CSS flexbox. Ce guide complet explique tout sur flexbox, en se concentrant sur tous…

css-tricks.com

Grenouille Flexbox

Idéal pour : apprendre et pratiquer la mise en page CSS flexbox

Ce jeu ressemble beaucoup à Grid Garden mais pour apprendre CSS flexbox. Il y a 24 niveaux et vous pouvez les pratiquer dans n'importe quel ordre.

Grenouille Flexbox

Flexbox Défense

Idéal pour : apprendre et pratiquer CSS flexbox

Voici un autre jeu par navigateur simple pour apprendre CSS flexbox de manière ludique. Il n'est pas nécessaire de s'inscrire et vous pouvez passer à n'importe quel niveau au cas où vous auriez besoin d'un rappel rapide.

Bataille CSS

Idéal pour : pratiquer le HTML et le CSS, rivaliser avec les autres

Jouer seul n'est pas aussi amusant que de rivaliser avec les autres ! CSS Battle est un jeu de golf CSS très addictif avec différents niveaux et un classement où les joueurs essaient de reproduire visuellement des « cibles » en utilisant seulement quelques lignes de CSS.

Commentaire