L’une des nombreuses frustrations liées au développement Web est qu’il n’est pas facile de partager vos projets avec d’autres. Dans de nombreux cas, vous devrez héberger votre projet sur un serveur Web ou envoyer tous les fichiers correspondants à quelqu'un qui voudra voir ce que vous avez créé. Mais grâce à un outil en ligne soigné appelé CodePen, vous n’aurez plus à vous en soucier.
CodePen.io
CodePen est un outil gratuit qui vous permettra d’héberger vos projets en ligne sans jamais avoir à payer un centime. Pour commencer, rendez-vous sur CodePen.io et créez un compte gratuit.
Une fois que vous avez fait cela, vous pouvez créer un "stylo" en cliquant sur le bouton "Nouveau stylo" dans le coin supérieur droit de l'écran.
Après cela, vous pourrez ajouter n'importe quel code HTML, CSS et JavaScript dans les champs correspondants. Une fois que vous commencez à ajouter du code, vous aurez un aperçu en direct de ce que vous créez. Vous pouvez nommer votre premier stylo dans le coin supérieur gauche. Une fois que vous avez cliqué sur votre première "Enregistrer", vous pourrez simplement partager l'URL de la page avec vos amis, votre famille et vos collègues afin qu'ils puissent voir ce sur quoi vous travaillez.
Voici à quoi ressemblera votre stylo avec du code (grâce au projet Free Code Camp appelé Tribute Page):
Lorsque vous créez votre propre stylo, vous devez parcourir les paramètres avant de commencer. Lorsque vous cliquez sur le bouton «Nouveau stylo», vous devriez voir un modèle de stylo prêt à commencer à entrer du code. Dans le coin supérieur droit sera un bouton "Paramètres". Cliquez dessus (vous devriez voir l'écran ci-dessous).
Ici, vous pourrez passer par les onglets HTML, CSS et JavaScript pour ajouter certaines informations. Dans l’onglet HTML, vous pourrez ajouter des méta-informations, des éléments qui devraient figurer dans
onglet, et ainsi de suite. Sous CSS, vous pourrez ajouter des préprocesseurs CSS tels que LESS et Sass. Non seulement cela, mais vous pouvez ajouter des CSS externes comme Bootstrap et Foundation. Sous l'onglet JavaScript, vous pouvez ajouter un préprocesseur JavaScript tel que Babel ou CoffeeScript. En outre, vous pouvez ajouter des infrastructures JavaScript externes telles que Angular, React, Lodash, D3, etc.
Enfin, CodePen vous permettra de changer la «vue» que vous regardez. La vue par défaut est la vue Editeur, vous permettant d'entrer votre code et d'obtenir un petit aperçu dans la console ci-dessous. Cependant, il existe également d'autres options, l'une des plus pratiques étant la vue «Page entière», qui permet de voir un projet comme s'il était en direct sur un site Web. Il y a une poignée d'autres vues disponibles, il est intéressant de jouer avec!
CodePen est vraiment un outil soigné, et nous n’avons touché que la surface de son utilité. Cela vaut la peine d'aller sur CodePen.io et de l'utiliser pour travailler sur quelques projets, puis, si vous en avez envie, partagez avec vos amis ou collègues.
Que pensez-vous de CodePen? Avez-vous utilisé un outil similaire? Faites-nous savoir dans la section commentaires ci-dessous!
