Pour les débutants qui veulent apprendre et pour les professionnels expérimentés, il existe des sites Web qui vous permettent d'essayer des lignes de code et de prévisualiser le résultat en temps quasi réel. Ce sont de vraies applications avec l'écran divisé en deux, où d'une part vous écrivez le code qui peut être HTML, CSS, PHP, Javascript ou autre, tandis que d'autre part, après avoir appuyé sur une touche pour exécuter, vous voyez en fait à quoi il ressemble si ce code se trouvait dans un site Web.
Ce ne sont pas de simples éditeurs de code, mais des endroits où vous pouvez tester votre programmation sans vous soucier de faire des erreurs et découvrir rapidement où se trouvent les erreurs. Codepen et JSFiddle sont les deux sites les plus populaires de cette catégorie, mais il existe également de nombreuses alternatives.
LIRE AUSSI: Principaux langages de programmation utilisés pour les applications et les sites Web
1) CodePen
CodePen est le site le plus populaire et utilisé par les programmeurs car il est gratuit, intuitif et facile à utiliser. Devenu un standard dans le monde des programmeurs, il suffit de rechercher sur Google pour trouver des pages déjà compilées par Codepen et de voir immédiatement si c'est ce que vous cherchiez. Les fenêtres de visualisation flexibles et l'exécution immédiate du code écrit le rendent assez parfait pour essayer des animations javascript et CSS, en plus il peut facilement se connecter à des scripts externes (React, Vue et tout ce qui est disponible via CDN).
CodePen mérite la première place dans cette catégorie, mais certaines fonctionnalités sont payantes, comme le codage collaboratif et les vues en direct pleine page (les vues en direct partielles sont gratuites).
2) JSFiddle
JSFiddle est le deuxième (bien que chronologiquement l'un des plus anciens) du monde des sites pour écrire et essayer du code de programmation, JSFiddle, orienté avant tout vers la création et le test de JavaScript. Il peut également être utilisé pour HTML et CSS et puisqu'il prend en charge les conseils de complétion de code et peut également être préférable à CodePen pour les moins expérimentés.
Un grand point en faveur de JSFiddle est qu'il offre un mode de collaboration gratuit (y compris le chat vocal et texte), afin que vous puissiez travailler sur le code simultanément avec d'autres personnes.
3) Glitch
De nombreux sites de code vous permettent d'encoder HTML / CSS / JS et de générer des pages Web statiques, tandis que Glitch offre un petit espace de stockage gratuit pour enregistrer les projets et facilite l'exécution du code côté serveur Node.js. Vous pouvez programmer en collaboration sur Glitch,
Il est également livré avec un certain nombre d'autres fonctionnalités fantastiques: codage collaboratif, contrôle de version, nombreuses ressources d'apprentissage, bonne intégration avec GitHub, intégration facile, une communauté pour demander des conseils, des projets déjà réalisés que vous pouvez librement modifier ou utiliser et le Intégration Visual Studio. C'est un moyen formidable, rapide et facile de démarrer une application Web (ou d'apprendre à le faire).
4) CodeSandbox
CodeSandbox est similaire à Glitch mais un peu plus complexe et complet. CodeSandbox a une interface plus flexible et personnalisable, vous permet de distribuer des applications Web complètes, dispose d'un espace pour enregistrer des fichiers et fait la plupart du travail de base en laissant au programmeur uniquement la tâche d'écrire.
5) Repl.it
Repl.it est un environnement de développement pour tester différents types de langages de programmation tels que Python avec la prise en charge du code frontal et principal, il vous permet de distribuer des sites et des applications, il a une intégration avec GitHub et une interface intuitive. Cela peut être un peu trop difficile pour quiconque essaie simplement de concevoir des pages Web, mais pour les programmeurs déjà expérimentés, c'est une ressource à considérer. si vous ne planifiez que le front-end ou si vous êtes nouveau dans le code, mais si vous planifiez tout régulièrement, cela vaut la peine d'être exploré.
6) Liveweave est un éditeur Web très similaire à JSFiddle, avec lequel écrire et essayer du code à utiliser sur des sites Web, avec une fonctionnalité de prévisualisation en direct, des conseils de code pour HTML5, CSS3, JavaScript et jQuery et qui vous permet de télécharger le projet sous forme de fichier zip. Vous pouvez également ajouter des bibliothèques externes comme jQuery, AndgularJS, Bootstrap assez facilement.
7) CodeSandbox est un espace en ligne gratuit où vous pouvez démarrer des projets d'application Web en utilisant différents cadres, tels que React, Vue, Angular et bien plus encore.
8) StackBlitz est un excellent éditeur d'application javascript, qui prend en charge divers cadres tels que Vue et React.
9) Flems, site minimaliste, parfait pour faire des tests rapides.
10) JSBin, une version plus minimaliste de JSFiddle, pour écrire le code d'une page Web et voir à quoi il ressemble.
11) CSSDeck est un site simple pour tester quelques idées de base HTML / CSS et JS.
12) ICECoder, un autre environnement en ligne pour tester le code, qui vous oblige à télécharger un programme qui s'exécute dans le navigateur et peut également être utilisé hors ligne.
13) Plunker, un outil frontal qui vous permet d'écrire du code, des fichiers et des pages Web et de les enregistrer sur Github.
14) Scrimba est une combinaison innovante d'éditeur de vidéo et de code qui est un environnement d'apprentissage parfait pour les étudiants et ceux qui veulent apprendre.
15) WebMaker, un créateur d'applications Web avec des fonctionnalités hors ligne et l'intégration avec CodePen.
16) Dabblet, pour essayer d'écrire du code HTML / CSS / JS avec de jolis graphismes et un correcteur automatique pour le code CSS.
17) PlayCode est également un environnement pour les tests en temps réel du code HTML / CSS / JS de base.
19) JSItor est une autre alternative à Codepen et JSFiddle, où vous pouvez écrire du code en combinant HTML, CSS et Javascript et voir immédiatement le résultat.
LIRE AUSSI: Sites pour apprendre la programmation en jouant avec des cours interactifs et des défis
Ce ne sont pas de simples éditeurs de code, mais des endroits où vous pouvez tester votre programmation sans vous soucier de faire des erreurs et découvrir rapidement où se trouvent les erreurs. Codepen et JSFiddle sont les deux sites les plus populaires de cette catégorie, mais il existe également de nombreuses alternatives.
LIRE AUSSI: Principaux langages de programmation utilisés pour les applications et les sites Web
Sites pour tester le code en ligne
1) CodePen
CodePen est le site le plus populaire et utilisé par les programmeurs car il est gratuit, intuitif et facile à utiliser. Devenu un standard dans le monde des programmeurs, il suffit de rechercher sur Google pour trouver des pages déjà compilées par Codepen et de voir immédiatement si c'est ce que vous cherchiez. Les fenêtres de visualisation flexibles et l'exécution immédiate du code écrit le rendent assez parfait pour essayer des animations javascript et CSS, en plus il peut facilement se connecter à des scripts externes (React, Vue et tout ce qui est disponible via CDN).
CodePen mérite la première place dans cette catégorie, mais certaines fonctionnalités sont payantes, comme le codage collaboratif et les vues en direct pleine page (les vues en direct partielles sont gratuites).
2) JSFiddle
JSFiddle est le deuxième (bien que chronologiquement l'un des plus anciens) du monde des sites pour écrire et essayer du code de programmation, JSFiddle, orienté avant tout vers la création et le test de JavaScript. Il peut également être utilisé pour HTML et CSS et puisqu'il prend en charge les conseils de complétion de code et peut également être préférable à CodePen pour les moins expérimentés.
Un grand point en faveur de JSFiddle est qu'il offre un mode de collaboration gratuit (y compris le chat vocal et texte), afin que vous puissiez travailler sur le code simultanément avec d'autres personnes.
3) Glitch
De nombreux sites de code vous permettent d'encoder HTML / CSS / JS et de générer des pages Web statiques, tandis que Glitch offre un petit espace de stockage gratuit pour enregistrer les projets et facilite l'exécution du code côté serveur Node.js. Vous pouvez programmer en collaboration sur Glitch,
Il est également livré avec un certain nombre d'autres fonctionnalités fantastiques: codage collaboratif, contrôle de version, nombreuses ressources d'apprentissage, bonne intégration avec GitHub, intégration facile, une communauté pour demander des conseils, des projets déjà réalisés que vous pouvez librement modifier ou utiliser et le Intégration Visual Studio. C'est un moyen formidable, rapide et facile de démarrer une application Web (ou d'apprendre à le faire).
4) CodeSandbox
CodeSandbox est similaire à Glitch mais un peu plus complexe et complet. CodeSandbox a une interface plus flexible et personnalisable, vous permet de distribuer des applications Web complètes, dispose d'un espace pour enregistrer des fichiers et fait la plupart du travail de base en laissant au programmeur uniquement la tâche d'écrire.
5) Repl.it
Repl.it est un environnement de développement pour tester différents types de langages de programmation tels que Python avec la prise en charge du code frontal et principal, il vous permet de distribuer des sites et des applications, il a une intégration avec GitHub et une interface intuitive. Cela peut être un peu trop difficile pour quiconque essaie simplement de concevoir des pages Web, mais pour les programmeurs déjà expérimentés, c'est une ressource à considérer. si vous ne planifiez que le front-end ou si vous êtes nouveau dans le code, mais si vous planifiez tout régulièrement, cela vaut la peine d'être exploré.
6) Liveweave est un éditeur Web très similaire à JSFiddle, avec lequel écrire et essayer du code à utiliser sur des sites Web, avec une fonctionnalité de prévisualisation en direct, des conseils de code pour HTML5, CSS3, JavaScript et jQuery et qui vous permet de télécharger le projet sous forme de fichier zip. Vous pouvez également ajouter des bibliothèques externes comme jQuery, AndgularJS, Bootstrap assez facilement.
7) CodeSandbox est un espace en ligne gratuit où vous pouvez démarrer des projets d'application Web en utilisant différents cadres, tels que React, Vue, Angular et bien plus encore.
8) StackBlitz est un excellent éditeur d'application javascript, qui prend en charge divers cadres tels que Vue et React.
9) Flems, site minimaliste, parfait pour faire des tests rapides.
10) JSBin, une version plus minimaliste de JSFiddle, pour écrire le code d'une page Web et voir à quoi il ressemble.
11) CSSDeck est un site simple pour tester quelques idées de base HTML / CSS et JS.
12) ICECoder, un autre environnement en ligne pour tester le code, qui vous oblige à télécharger un programme qui s'exécute dans le navigateur et peut également être utilisé hors ligne.
13) Plunker, un outil frontal qui vous permet d'écrire du code, des fichiers et des pages Web et de les enregistrer sur Github.
14) Scrimba est une combinaison innovante d'éditeur de vidéo et de code qui est un environnement d'apprentissage parfait pour les étudiants et ceux qui veulent apprendre.
15) WebMaker, un créateur d'applications Web avec des fonctionnalités hors ligne et l'intégration avec CodePen.
16) Dabblet, pour essayer d'écrire du code HTML / CSS / JS avec de jolis graphismes et un correcteur automatique pour le code CSS.
17) PlayCode est également un environnement pour les tests en temps réel du code HTML / CSS / JS de base.
19) JSItor est une autre alternative à Codepen et JSFiddle, où vous pouvez écrire du code en combinant HTML, CSS et Javascript et voir immédiatement le résultat.
LIRE AUSSI: Sites pour apprendre la programmation en jouant avec des cours interactifs et des défis
