Outils d'apprentissage interactifs pour les développeurs frontend —

Voici quelques-uns des outils et applications de codage les plus interactifs qui ne manqueront pas de vous aider à compléter vos compétences dans différents domaines du développement Web.

Parce que cette industrie évolue si rapidement, l'apprentissage de nouvelles compétences est une chose courante pour la plupart d'entre nous. Au cours des derniers temps, j'ai pu collecter des liens vers plusieurs outils et applications de codage interactifs qui peuvent vous aider à compléter vos compétences dans différents domaines du développement Web.

Tout ce que vous voulez apprendre de CSS à SQL, cela est classé la liste devrait vous couvrir. Faites défiler vers le bas pour un aperçu général ou ignorez la table des matières.

Si vous êtes intéressé par d'autres outils comme ceux-ci, veuillez jeter un œil à la newsletter hebdomadaire SmashingMagafin que vous puissiez obtenir des conseils comme ceux-ci directement dans votre boîte de réception !

Flex Box Adventure

Flex Box Adventure est un jeu d'aventure interactif vous permettant d'utiliser vos compétences flexbox pour aider le personnage du jeu à résoudre 24 défis.

Les chevaliers de la table Flexbox

Les chevaliers de la table Flexbox est un autre cours interactif bien conçu pour vous aider à apprendre les différents aspects de la spécification flexbox. Celui-ci comprend 18 « donjons » pour vous apprendre la flexbox. Ce cours est unique car vous n'écrivez pas du CSS pur, mais à la place, vous utilisez des classes CSS Tailwind, ce qui signifie que vous apprendrez flexbox ainsi que la syntaxe des classes utilitaires Tailwind.

Flexbox Froggy

Flexbox Froggy existe depuis un certain temps et continue d'être un choix populaire pour l'apprentissage de la syntaxe flexbox. Utilisez les différentes parties de la spécification flexbox pour organiser les grenouilles comme requis pour passer les différents niveaux.

Flexbox Zombies

Flexbox Zombies est un autre jeu éducatif pour apprendre la syntaxe flexbox. Chaque section fait avancer une intrigue liée aux zombies tout en vous offrant une expertise dans un nouveau concept de flexbox, ainsi que des défis de survie qui vous aident à utiliser vos nouvelles compétences de flexbox.

Flexbox Defense

Flexbox Defense est un jeu sur le genre de jeu de stratégie « tower defense » qui vous apprend la flexbox à travers 12 défis où vous devez utiliser la syntaxe flexbox pour empêcher les ennemis entrants de franchir vos défenses.[19659023]Flexbox Defense »/>

Flexy Boxes

Si vous trouvez que certains des autres outils flexbox sont un peu plus difficiles à utiliser, Flexy Boxes peut être un bon choix. Il s'agit d'un terrain de jeu flexbox simple qui génère également le code pour vous. Étant un outil plus ancien, il fournit également le code flexbox hérité et les préfixes de fournisseur, mais vous pouvez sélectionner « Vanilla CSS » pour le code que vous utiliserez dans la plupart des cas.

Grid Garden

Grid Gardende Codepip, les mêmes fabricants que Flexbox Froggy, comprend 28 niveaux différents pour vous apprendre les différentes parties de la spécification CSS Grid Layout. Et si vous êtes intéressé par plus de ces personnes, leur plan Pro comprend un certain nombre d'autres jeux interactifs CSS et JS.

CSS Grid Cheat Sheet

La CSS Grid Cheat Sheet est un guide visuel et interactif pour comprendre CSS Grid. Sélectionnez une case dans la grille, puis utilisez les options et les paramètres de la barre latérale gauche pour manipuler les différentes parties de la spécification de la disposition de la grille.

Grid Attack

Grid Attack provient des mêmes créateurs que Flexbox Adventure, mentionné précédemment. Celui-ci n'est pas gratuit mais comprend 80 défis interactifs similaires aux problèmes de mise en page de grille du monde réel.

Grid Critters

Grid Critters est une autre plate-forme interactive basée sur des défis pour apprendre les différentes parties de la spécification Grid Layout dans un environnement de type jeu vidéo. Le cours comprend 10 chapitres, chacun divisé en différents niveaux, certains jusqu'à 20-26 niveaux.

CSS Selectors Cheatsheet

CSS Selectors Cheatsheet est un exercice interactif pour tester votre compréhension des sélecteurs CSS. Les premiers sont assez faciles, mais les exercices augmentent en difficulté à mesure que vous entrez dans des sélecteurs plus avancés comme des pseudo-classes moins utilisées.

CSS Animations

Si vous souhaitez améliorer vos compétences en animation sur le Web, CSS Animations est une plate-forme solide et complète pour apprendre et expérimenter les différentes parties des animations CSS spécification. Ce cours en 32 parties contient de nombreux graphiques prédéfinis qui sont utilisés dans le cours comme base pour les animations. C'est une façon amusante d'apprendre les animations d'images clés avec CSS.

CSS Ruler

CSS Ruler vous donne une représentation visuelle de trois catégories d'unités CSS avec lesquelles vous pouvez expérimenter : la police relative (par exemple rem, ch), le pourcentage de la fenêtre d'affichage (par exemple vh, vw), et absolue (par exemple px, in).

Filter Blend

Filter Blend est un petit site compact qui vous permet de jouer avec les différentes valeurs utilisées pour les CSS mix-blend-modebackground- les propriétés blend-mode et filter. Vous pouvez ajouter une ou plusieurs de vos propres images dans des calques, ainsi qu'une couleur d'arrière-plan, puis modifier les paramètres pour voir comment les différentes valeurs se comportent.

CSSBattle

Certes, CSSBattle pourrait être le seul outil d'apprentissage interactif de cette liste qui a le potentiel de faire de vous un pire développeur ! Celui-ci vous permet de faire des défis interactifs où l'objectif est d'utiliser du CSS pur pour répliquer une image donnée avec le moins de code (c'est-à-dire "code golf"). Vous en apprendrez certainement beaucoup sur HTML et CSS avec ces exercices, mais les techniques ne seront souvent pas utiles dans un scénario réel.

CSS Diner

CSS Diner est idéal pour les débutants CSS ou ceux qui ne sont pas familiarisés avec les sélecteurs CSS avancés. Ce jeu vous permet d'utiliser de vrais sélecteurs CSS sur des produits alimentaires avec une visionneuse HTML utile afin que vous puissiez voir la relation entre les graphiques et le code.

TypeScript Exercises

TypeScript Exercises est un terrain de jeu interactif pour jouer avec différentes fonctionnalités de TypeScript, le sur-ensemble JavaScript populaire qui a gagné en popularité au cours des dernières années. Si vous avez une compréhension rudimentaire de TypeScript et que vous souhaitez développer cela, cette application pourrait bien vous convenir.

Jeu de modèles de conception

Jeu de modèles de conception est unique et n'est pas destiné aux débutants en JavaScript. Si vous avez une grande expérience de la programmation ou si vous êtes assez habile avec JavaScript en général, mais que vous n'avez jamais vraiment étudié les modèles de conception JavaScript, cela pourrait être un bon point de départ.

React Tutorial

Il existe de nombreux endroits pour apprendre React de nos jours et le React Tutorial est une autre bonne option. Ce que j'aime dans celui-ci, c'est la façon dont il commence avec certains concepts JavaScript qu'il est important de comprendre pour être plus efficace avec React. En outre, l'éditeur en page vous donne des astuces de saisie semi-automatique ainsi que des astuces pour résoudre les problèmes. Toutes les leçons ne sont pas gratuites, mais il y en a assez ici pour vous plonger assez profondément dans les principes fondamentaux de React avant de payer.

Elevator Saga

Elevator Saga est assez différent de la plupart des outils interactifs de cette liste. Celui-ci vous permet d'utiliser JavaScript pour programmer le mouvement des ascenseurs au moyen d'une API intégrée conçue pour le jeu lui-même. Ainsi, non seulement vous rafraîchirez votre JavaScript, mais vous utiliserez également une API étrangère.

Screeps

Screeps est un jeu de stratégie en temps réel multijoueur en ligne open source qui vous permet d'utiliser du vrai code JavaScript pour construire une colonie, exploiter des ressources, conquérir un territoire, etc. Celui-ci est assez avancé dans son gameplay et est fortement recommandé par un certain nombre de développeurs et d'équipes.

Untrusted

Untrusted est un jeu d'aventure JavaScript où vous devez guider un personnage appelé Dr. Eval à travers différents labyrinthes. Pour ce faire, modifiez et réexécutez le code utilisé pour le défi actuel afin de permettre au Dr Eval de passer au suivant.

Promisees

Promisees vous aide à apprendre une partie spécifique de la spécification ECMAScript – JavaScript Promises, une fonctionnalité qui a été ajoutée au langage dans ES6. Vous pouvez utiliser cette petite application pour visualiser le fonctionnement des promesses et comment elles pourraient être utilisées dans une vraie base de code.

JSchallenger

JSchallenger est une plate-forme simple qui vous permet d'apprendre JavaScript en résolvant différents défis de codage. Utilement, celui-ci comprend une liste rapide des défis « les plus populaires » et « les plus échoués », donc ceux-ci pourraient être de bons points de départ.

JSRobot

JSRobot est un jeu interactif dans lequel vous utilisez JavaScript avec une API sur le thème du robot pour contrôler un robot afin de collecter des pièces, éviter les obstacles et atteindre le drapeau à la fin du niveau.

Service Workies

Service Workies est un jeu d'aventure interactif pour apprendre diverses fonctionnalités permettant de développer des applications Web progressives (PWA). Cet environnement semblable à un jeu vidéo passe par le cycle de vie du service worker, interceptant les demandes, travaillant avec les caches, etc.

Apprenez Git Branching

Les visuels font souvent défaut lors de l'apprentissage d'outils de ligne de commande comme Git. Learn Git Branching vise à résoudre ce problème avec une présentation visuelle et interactive des différentes fonctionnalités de Git à l'aide d'un visualiseur de référentiel Git, d'un bac à sable et d'une série de didacticiels et de défis éducatifs.

Sélectionner Star SQL

Sélectionner Star SQL vous permet d'apprendre les concepts SQL. Cela se fait en suivant les instructions qui exécutent des requêtes SQL sur un ensemble de données réel, en parcourant 5 chapitres qui prennent environ 30 minutes chacun.

Regex101

Regex101 est un peu comme JSFiddle pour les expressions régulières, mais avec quelques fonctionnalités supplémentaires pour vous aider à apprendre à créer des expressions régulières. Il comprend un éditeur d'expressions régulières, une bibliothèque d'expressions régulières écrites par la communauté, une référence rapide pour la syntaxe et même un quiz interactif.

SQL Police Department

SQL Police Department vous permet d'apprendre la syntaxe SQL en résolvant des crimes. Des devoirs appelés « briefs » sont utilisés comme base pour chaque crime à résoudre et l'application comprend également un guide pour vous aider avec la syntaxe si vous êtes bloqué.

CodinGame

CodinGame est une plate-forme d'apprentissage complète qui vous permet d'étudier plus de 25 langages de programmation tout en résolvant des défis amusants.

OpenVim

OpenVim est un didacticiel interactif qui vous apprend à utiliser Vim, l'éditeur de texte multiplateforme très apprécié des utilisateurs d'Unix. Si vous voulez plus de Vim, vous pouvez également essayer vim.sobien que celui-ci ne soit pas gratuit.

Regex Crossword

Regex Crossword utilise des défis basés sur des mots croisés pour vous aider à apprendre la syntaxe des expressions régulières. Pour chaque défi, vous devez saisir une chaîne qui correspond à toutes les expressions « croisées ».

Codewars

Codewars est encore une autre plate-forme qui vous aide à améliorer vos compétences en résolvant des tâches de programmation de plusieurs niveaux de difficulté et pour une grande variété de langages, dont JavaScript, TypeScript, Python, Ruby, Go , et plus encore.

Jamstack Attack

Jamstack Attack est une série de mini-jeux pour pratiquer différents aspects du développement front-end.

RegexOne

RegexOne utilise une série d'environ 25 exercices et problèmes interactifs pour enseigner la syntaxe des expressions régulières. Comprend également des guides regex pour 5 langages de programmation différents.

SQLBolt

SQLBolt (mêmes créateurs que RegexOne) comprend 19 exercices interactifs simples pour vous apprendre progressivement à utiliser SQL.

Il existe de nombreux autres outils d'apprentissage interactifs disponibles, et je suis sûr que beaucoup d'entre vous en ont rencontré certains que vous avez trouvés utiles. N'hésitez pas à publier vos favoris dans les commentaires ci-dessous.

Résumé rapide

Il existe de nombreuses façons interactives d'acquérir de nouvelles compétences en développement Web. Louis partage une liste complète et catégorisée de ces outils couvrant une variété de technologies de développement différentes.

(vf, il )