CodePen Pour Débutant

Table Des Matières

CodePen – Présentation


CodePen, fondé en 2012 par les développeurs Alex Vazquez, Tim Sabat et Le designer de pointe Chris Coyier, est une communauté en ligne pour tester et présenter les extraits de code HTML, CSS et JavaScript créés par l’utilisateur. Il fonctionne comme un éditeur de code en ligne et un environnement d’apprentissage open source, où les développeurs peuvent créer des extraits de code —créativement nommés « Pens »—  et les tester. CodePen est l’une des plus grandes communautés pour les concepteurs et les développeurs Web de montrer leurs compétences de codage, avec environ 330 000 utilisateurs enregistrés et 16,9 millions de visiteurs mensuels.

Dans cet article je vais m’occuper de la partie de la création des démo et comment les enregistrer et les insérer dans les articles de vos sites/blog au lieu des captures d’écran sans interaction, qui donnent une mauvaises impression sur votre contenu. C’est un tuto pour les débutants qui suit tout le processus  —étape par étape depuis l’inscription au site jusqu’à l’insertion dans l’article —  avec des illustrations pour faciliter la compréhension et la pratique à nos cher lecteurs; Ok alors , allons-y!

CodePen Tuto - Exemple de Capture Unresponsive
Exemple de démo unresponsive —même si vous cliquez sur les lettres rien ne se passe, ce qui n’incite pas à la réaction et donc sans valeur pour le visiteur qui veut essayer et voir comment cela fonctionne en direct!

See the Pen Exemple de Demo by Med Mus (@MedMus) on CodePen.

Ci dessus, Un exemple de démo responsive qui incite à l’interaction —quand le visiteur répond à l’appel en action dans le démo et clique sur les lettres, il voit bien que ça répond aussi et que les lettres bougent , ce qui donne une bonne impression de ce visiteur sur votre démo et sur votre contenu en général 🙂

Comment Créer Des Démos Interactives Pour Vos Articles?

Inscription

Avant tout vous devez créer un compte et pour le faire allez sur CodePen et inscrivez vous:CodePen Sign up Join Free

Remplissez le formulaire d’inscription comme sur l’image au dessous:CodePen Formulaire d'Inscription

Le formulaire dans limage suivante est optionnel, donc si vous ne voulez pas completez votre profile juste cliquez sur le bouton « Save & Continu » comme indiqué sur l’image ci dessous:

Si vous voyez cette fenêtre pop up  comme dans l’image suivante, qui vous invite à faire  un tour à travers les fonctionnalités de CodePen, juste ignorez là en cliquant comme sur l’image:CodePen ignorez l'invitation sur la fenêtre pop up

Créer Votre Premier Démo (Pen)

fermez la fenêtre qui s’affiche après et aller sur la page d’acceuille du site vous allez être rediriger sur la page que vous voyez sur l’image suivante:CodePen Créer Votre Pen

Vous aurez cette page (image ci dessous)CodePen Interface Basique Maintenant vous pouvez copiez votre code HTML, CSS ou Javascript et le coller dans l’area spécifique comme dans l’exemple ci dessous. Enregistrer votre démo et cliquez sur le bouton Embed:

CodePen générer le code à insererVous allez voir une fenêtre où vous pouvez choisir l’onglet à afficher par défaut sur vos postes, redimensionner le démos et copier votre code après l’avoir selectionné comme dans l’image suivante:CodePen copier le code

Insérer Le Code

dans l’editeur de votre article choisissez texte comme dans l’image suivante et coller votre code:CodePen Insérer le code

Enfin, j’espère que ce tuto vous aidera dans la création de vos démos. N’hésitez surout pas à me laisser un commentaire si vous avez des questions ou des suggestions, Merci pour la lecture 🙂

 

 

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here