Article original : How to Use CodePen – A Beginner's Guide
CodePen est un éditeur de code en ligne populaire utilisé par de nombreux développeurs à travers le monde. C'est également l'un des éditeurs recommandés que vous pouvez utiliser pour le programme de freeCodeCamp.
CodePen est uniquement destiné aux projets frontend et prend en charge HTML, CSS et JavaScript. Si vous devez créer un projet avec un composant backend, vous devrez utiliser un autre éditeur.
Dans cet article, je vais discuter des points suivants :
- Comment s'inscrire pour un compte gratuit
- Différences entre les Pens et les Projets
- Fonctionnalités de base de l'éditeur de Pen
- Comment fork un Pen
- Comment ajouter des préprocesseurs et des packages à un Pen
- Fonctionnalités de base de l'éditeur de Projet
- Que obtenez-vous avec les abonnements payants ?
- Qu'est-ce que les défis CodePen ?
Comment s'inscrire pour un compte gratuit
Lorsque vous visitez le site CodePen, vous pourrez vous connecter avec les options suivantes :
- Compte Twitter
- Compte Facebook
- Compte GitHub
Vous pouvez également vous inscrire avec une adresse e-mail où vous créerez un nom d'utilisateur et un mot de passe.
Une fois que vous avez créé le compte, vous devriez recevoir un e-mail de CodePen. Ouvrez ce message et vérifiez votre adresse e-mail.
Différences entre les Pens et les Projets
Pens
Après avoir vérifié votre adresse e-mail, vous devriez être dirigé directement vers l'éditeur de Pen. Si l'éditeur ne s'affiche pas, vous pouvez cliquer sur Pen situé sur le côté gauche de la page d'accueil.
Un éditeur de Pen est divisé en trois sections : HTML, CSS et JavaScript.
Cet éditeur ne prend pas en charge plusieurs fichiers HTML, CSS et JavaScript. Les Pens sont idéaux pour des créations de petite envergure.
Si vous souhaitez écrire plus de 5 000 lignes de code, vous devriez envisager un projet à la place.
Avec le compte gratuit, vous pouvez avoir autant de Pens que vous le souhaitez.
Projets
Si vous souhaitez créer un projet, cliquez sur Projet, situé en haut à gauche de la page d'accueil.
Un éditeur de projet prend en charge plusieurs fichiers HTML, CSS et JavaScript.
Avec le compte gratuit, vous ne pouvez avoir qu'un seul projet et 10 fichiers. Si vous souhaitez créer plus de projets, vous devrez passer à un compte Pro.
Fonctionnalités de base de l'éditeur de Pen
Options de formatage
Si vous cliquez sur la flèche déroulante de l'un des trois éditeurs, vous verrez une option pour formater votre code.
C'est un outil utile pour garantir que votre code est correctement formaté et lisible par d'autres développeurs.
Vous pouvez également aller dans la section Comportement des paramètres du Pen et choisir l'option Formater à l'enregistrement.
Option Analyser
Si vous cliquez sur la flèche déroulante de l'un des trois éditeurs, vous verrez une option pour analyser votre code.
C'est un outil qui vous aidera à trouver et corriger les erreurs dans votre code.
Options d'affichage
Si vous cliquez sur Changer de vue, vous pouvez personnaliser la disposition de l'éditeur ou basculer entre les différentes options de vue.
Utilisation de la console
Située en bas à gauche du Pen, la console est un outil utile pour déboguer votre code.
Ajout de liens pour la section head (HTML)
Lorsque vous créez vos Pens, vous n'avez pas besoin d'inclure les balises DOCTYPE, html, head ou body. Toutes ces informations sont déjà intégrées dans l'éditeur.
Si vous devez ajouter des liens pour la section head, comme des icônes Font Awesome ou des polices Google, vous pouvez les ajouter dans la section head des paramètres HTML.
Ajout de bibliothèques et frameworks CSS
CodePen offre une option dans les paramètres pour ajouter des bibliothèques et frameworks CSS à vos Pens. Certaines des bibliothèques et frameworks incluent Bootstrap, Tailwind CSS et Bulma.
Ajout de bibliothèques et frameworks JavaScript
Dans les paramètres JavaScript, vous pouvez ajouter des bibliothèques et frameworks populaires tels que React, Angular et Vue à vos Pens.
Partage de vos Pens sur les réseaux sociaux
Si vous souhaitez partager vos Pens sur divers blogs et sites de réseaux sociaux, vous pouvez cliquer sur le bouton Partager situé en bas à droite.
Exporter des Pens
Si vous souhaitez télécharger votre travail sur votre ordinateur, vous pouvez utiliser le bouton Exporter situé en bas à droite.
Cela créera un dossier de tous vos fichiers.
Intégrer des Pens dans des blogs et articles
Si vous souhaitez montrer des exemples de code dans vos articles de blog, vous pouvez intégrer votre création CodePen dans la page en utilisant le bouton Intégrer. Celui-ci est situé en bas à droite.
Comment fork un Pen
Fork un Pen signifie créer une copie de ce Pen. Lorsque vous le fork, vous aurez accès à tout le code et pourrez le modifier à votre guise.
Tout d'abord, allez au Pen que vous souhaitez fork. Ensuite, cliquez sur le bouton fork situé en bas à droite.
Une fois que vous avez fork le Pen, une copie sera créée pour votre compte CodePen. Assurez-vous de cliquer sur le bouton enregistrer et vous pourrez commencer à modifier le code à partir de là.
Comment ajouter des préprocesseurs et des packages à un Pen
Dans CodePen, vous avez la possibilité d'ajouter des préprocesseurs HTML, CSS ou JavaScript ainsi que des packages NPM à vos Pens.
Dans les paramètres HTML, vous pouvez choisir parmi Haml, Markdown, Slim ou Pug.
Dans les paramètres CSS, vous pouvez choisir parmi Less, SCSS, Sass, Stylus ou PostCSS.
Dans les paramètres JavaScript, vous pouvez choisir parmi Babel, TypeScript, CoffeeScript ou LiveScript.
Vous pouvez également ajouter des packages NPM tels que react-bootstrap à vos Pens.
Fonctionnalités de base de l'éditeur de Projet
Si vous travaillez sur un projet nécessitant plusieurs fichiers, vous devriez envisager d'utiliser l'éditeur de Projet plutôt que l'éditeur de Pen. Pour le compte gratuit, vous êtes autorisé à avoir un projet.
Modèles
Il existe quelques options de modèles pour les projets HTML et CSS ainsi que pour les projets React.
Si vous choisissez de passer à l'abonnement payant, vous aurez accès aux modèles Tailwind CSS et Bootstrap.
Fichiers et répertoires
Pour ajouter un nouveau fichier ou dossier, cliquez sur les boutons situés en bas à gauche.
Vous pouvez également télécharger des fichiers depuis votre ordinateur en utilisant la fonction glisser-déposer située juste au-dessus du bouton Nouveau fichier.
Vous pouvez ajouter un total de 10 fichiers à votre projet. Si vous devez ajouter plus de fichiers, vous devrez passer à l'un des forfaits payants.
Partage de projets
Si vous souhaitez partager votre projet terminé sur les réseaux sociaux ou les plateformes de blogging, vous pouvez cliquer sur le bouton Partager situé en bas à droite.
Exportation de projets
Vous pouvez également exporter les fichiers de votre projet et les télécharger sur votre ordinateur en utilisant le bouton Exporter situé en bas à droite.
Que obtenez-vous avec les abonnements payants ?
Les plans d'abonnement payants offrent plus de fonctionnalités CodePen telles que le mode Collab, l'hébergement d'actifs, plus de modèles et des domaines personnalisés.
Pour en savoir plus sur les différents plans d'abonnement payants, veuillez visiter la page CodePen PRO.
Qu'est-ce que les défis CodePen ?
Si vous souhaitez pratiquer vos compétences frontend, vous pouvez participer aux défis mensuels. Chaque mois aura un thème, et vous pratiquerez des compétences avec un nouveau défi chaque semaine.
Vous aurez également accès aux défis mensuels précédents.
J'espère que vous avez apprécié cet article et je vous souhaite bonne chance dans votre parcours de développeur frontend.