Comment utiliser CodePen : et s’il existait une plate-forme sur laquelle vous pouviez modifier du code, tester une bibliothèque, un framework ou un composant, et voir les changements se produire sous vos yeux ? Et si vous pouviez partager vos expériences avec d’autres développeurs ou copier leur travail pour améliorer vos compétences en codage, trouver l’inspiration et corriger rapidement les bogues dans votre travail ?
CodePen est une plate-forme de développement où n’importe qui peut éditer des langages finaux comme HTML, CSS et JavaScript depuis leur navigateur sans avoir à télécharger de logiciel. La meilleure partie est que vous pouvez voir les résultats en temps réel, ce qui facilite la correction des bogues. Les développeurs et les concepteurs peuvent également créer des extraits de code, appelés”stylos”, et les partager avec le reste du monde.
Comment utiliser CodePen
Ouvrez CodePen.io Tapez n’importe quoi dans le champ de recherche : vous pouvez taper tout ce que vous souhaitez ajouter à votre page Web. Il peut s’agir d’un slider réactif, d’une carte d’équipe, d’une section à propos, d’animations, etc. Dans cet article, je vais ajouter un beau slider. Alors continuez et recherchez un beau curseur dans le champ de recherche. Extraction de code : Maintenant, comme vous pouvez le voir, l’éditeur Codepen nous montre le code incroyable qui a créé ce slider. Mais pensez-vous que cela fonctionnerait simplement de copier le code de cet éditeur et de le coller dans le vôtre ? NON est la réponse. La plupart des”stylos”que vous voyez utilisent des bibliothèques en dehors de CodePen que l’éditeur n’affiche pas. Le zip contient deux dossiers dist et src ainsi qu’un fichier texte readme et license. Vous pouvez les explorer/lire selon votre intérêt. Sélectionnez maintenant le dossier”dist“et vous y verrez index.html, style.css, et script.js fichiers. Ouvrez tous ces éléments dans un éditeur de texte (Sublime, Atom, Brackets, etc.). Ouvrez le fichier index.html
À quoi sert CodePen
Partager ou collecter des idées
Parce que CodePen a construit une si grande communauté, des milliers d’utilisateurs créent et partagent des idées pour le front-composants finaux, animations et même mises en page de pages Web presque terminées. C’est l’endroit idéal pour partager vos propres idées qui pourraient être utiles à d’autres professionnels du front-end. Tout ce que vous avez à faire est de vous assurer que votre code n’a pas de problèmes de droits d’auteur.
Guidez le style de votre projet
Si vous ne voulez pas utiliser le code d’autres personnes, vous pouvez toujours utiliser l’éditeur de code en ligne de CodePen pour donner aux parties de votre projet leur propre style. De cette façon, vous pouvez vous assurer que le code destiné à styliser d’autres composants ne change pas le vôtre. C’est un peu comme une toile vierge.
Découvrez un nouveau framework ou une nouvelle bibliothèque
L’éditeur basé sur un navigateur sur CodePen est un excellent moyen de tester et d’exécuter une nouvelle bibliothèque ou un nouveau framework. Vous n’avez pas besoin de configurer un nouvel environnement chaque fois que vous voulez voir si vos modifications fonctionnent. La vue de l’éditeur affiche les trois zones d’édition et l’aperçu en même temps. Chaque fois que quelque chose change, les résultats finaux sont mis à jour.