Codepen est un site web qui permet de publier et partager du code.
Beaucoup d’exemples de ce site sont disponibles sur Codepen, ils sont encapsulés dans le site, mais aussi visibles dans un nouvel onglet.
Ci-dessous, un « codepen » classique avec le rendu à droite et deux onglets pour voir le CSS ou le HTML.
See the Pen grid 01 by Benoît Wimart (@benoitwimart) on CodePen.0
Le bouton « edit on codepen » permet d’ouvrir dans un nouvel onglet et de modifier le code !
Une fois sur le page du « codepen », vous pouvez éditer et voir aussi quelques réglages (les engrenages cachent parfois des liens vers des ressources CSS ou JS).
Je recommande pour les étudiants d’avoir un compte même gratuit (comme moi), cela permet de télécharger un zip (bouton export en bas à droite) avec les fichiers d’un projet, mais aussi de sauvegarder vos propres projets (sinon, ils seront sauvegardés en « Anonymous »).