Outil gratuit · Apprendre à coder
Bac à sable HTML, CSS et JS
Écris ton code dans les trois onglets : l'aperçu se met à jour pendant que tu tapes, et la console affiche tes console.log() et tes erreurs. Rien à installer, et ton code reste dans ton navigateur.
Tab indente le code. Pour sortir de l'éditeur au clavier : Échap, puis Tab.
Aperçu
Console
- Les console.log() et les erreurs du code s'affichent ici.
Des projets pour t'entraîner
Chaque tutoriel du parcours Projets pour apprendre à coder a son propre bac à sable, déjà rempli avec le code de l'article : une FAQ en accordéon, une galerie d'images, un chronomètre, des graphiques avec Chart.js…
Questions fréquentes
Mon code est-il envoyé quelque part ?
Non. Tout se passe dans ton navigateur : le code n'est envoyé à aucun serveur, et le dernier projet est simplement gardé dans ton navigateur pour ta prochaine visite. Le lien de partage contient le code lui-même, après le # de l'adresse.
Peut-on utiliser une bibliothèque comme Chart.js ?
Oui : ajoute sa balise <script src="https://…"> dans le HTML, comme dans un vrai projet. Les fichiers locaux (style.css, script.js) sont inutiles ici : le CSS et le JavaScript des onglets sont injectés directement dans l'aperçu.
Pourquoi pas de PHP ?
Le PHP s'exécute sur un serveur, pas dans le navigateur. Pour les projets en PHP, installe un serveur local (par exemple avec la commande php -S localhost:8000 dans le dossier du projet).
Le localStorage fonctionne-t-il ?
Oui, mais seulement le temps de la page : l'aperçu est isolé du site par sécurité, et ce qu'il enregistre est oublié quand il se relance.