---
title: Codepen
slug: docs/fr/codepen
description: Découvrez comment CodePen, intégré à Archbee, améliore l’efficacité du codage en permettant des modifications en temps réel au HTML, au CSS et au JS, idéal pour les guides de style et l’usage éducatif.
image: https://cdn.images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png
icon: {"lucideIcon":"Codepen"}
createdAt: 2022-06-10T12:04:54.000Z
---

::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### Qu’est-ce que CodePen ?

**CodePen** permet aux utilisateurs de modifier facilement **HTML**, **CSS**, et **JavaScript** dans **leur navigateur**, et avec **Archbee**, ce processus est encore plus simplifié, ne nécessitant aucune installation logicielle. Cette intégration améliore l’efficacité et la commodité du développement.

Le meilleur, c’est que les résultats peuvent être vus en temps réel, ce qui permet un débogage plus rapide. Les développeurs et les designers peuvent également créer et partager des extraits de code (appelés pens) avec le reste du monde.

### À quoi sert CodePen ?

1. **Créer le style de votre projet** - vous pouvez toujours utiliser l’éditeur de code en ligne de CodePen pour créer le style de vos composants de projet. De cette façon, vous pouvez vous assurer que les vôtres ne sont pas influencés par du code destiné à styliser d’autres composants. Vous pouvez le considérer comme une toile vierge.
2. **Apprendre un nouveau framework ou une nouvelle bibliothèque** - vous n’avez pas besoin de configurer un nouvel environnement chaque fois que vous voulez vérifier si vos changements fonctionnent. La vue de l’éditeur affiche simultanément les trois zones d’édition et l’aperçu, mettant à jour les résultats finaux chaque fois que quelque chose change.

### Cas d’usage

1. Un client peut intégrer une URL CodePen dans Archbee afin d’apporter un exemple qui renforce sa documentation.
2. L’intégration CodePen peut être utilisée comme guide utilisateur, si c’est une pratique standard dans l’organisation du client.

::codepen{url="https://codepen.io/DragosBulugean/embed/vqrgYq"}