Application sur mesure

bext Learn, Tutoriels interactifs

Le site d’apprentissage de bext : un tutoriel interactif en écran partagé, la leçon d’un côté, le code modifiable et l’aperçu de l’application de l’autre, avec des tutoriels et des astuces.

Voir le site Un projet similaire ?

Apprendre bext en construisant une application

learn.bext.dev est le site d’apprentissage de bext et de PRISM, son moteur de rendu. Il s’adresse aux développeurs qui découvrent l’outil et veulent le prendre en main sur un exemple concret plutôt qu’à la lecture de la documentation seule.

Nous avons développé un tutoriel interactif en écran partagé : la leçon à gauche, et à droite les fichiers, l’éditeur et l’aperçu de l’application construite, un tableau de bord d’administration. Le code se modifie dans le navigateur et l’aperçu suit. Le site réunit aussi des tutoriels par projet et des astuces, en français et en anglais.

Le projet en bref

Besoin: Apprendre bext et PRISM sur un exemple concret, pas seulement dans la documentation.
Ce que nous avons livré: Un tutoriel en écran partagé, leçon, fichiers, éditeur et aperçu, où le code se modifie et se recompile dans le navigateur, étape par étape, jusqu’à une application d’administration en ligne.
Résultat: Un site en français et en anglais, avec des tutoriels par projet, des astuces et la reprise de la progression.

Un tutoriel en écran partagé

Le tutoriel de learn.bext.dev apprend à construire une application avec PRISM, le moteur de rendu de bext. Sur ordinateur, la leçon occupe la moitié gauche de l’écran. À droite, un bac à sable réunit les fichiers du projet, l’éditeur de code et l’aperçu de l’application.

À chaque étape, les lignes ajoutées depuis l’étape précédente sont signalées dans le code. Le visiteur peut modifier le code : il est recompilé dans son navigateur et l’aperçu se met à jour aussitôt. Une console affiche les messages du code, et chaque fichier peut être remis dans son état d’origine.

Le projet de l’étape se copie ou se télécharge, pour être repris sur son propre poste.

Faites glisser le schéma pour le voir en entier.

Une étape du tutoriel, du code modifié à l’aperçu.

Une étape du tutoriel avec le code modifié et la palette des étapes sur ordinateur, l’aperçu sur téléphone — Le code modifié et son aperçu, la palette des étapes et l’aperçu sur téléphone.

D’un dossier vide à une application d’administration

Le tutoriel suit la construction d’un petit tableau de bord d’administration, étape par étape. Il commence par un dossier et une première page, ajoute la mise en page commune, la navigation et l’en-tête, puis affiche des données : un tableau de produits, une fiche par produit et une recherche. Il se termine par un formulaire traité côté serveur et un récapitulatif.

L’application construite est en ligne : l’aperçu affiche la vraie application, dont les liens fonctionnent. Une barre d’adresse permet d’y naviguer comme dans un navigateur.

Une barre de progression suit l’avancement. Les étapes vues sont gardées dans le navigateur du visiteur, et la page d’accueil propose de reprendre là où il s’était arrêté. Une palette de recherche mène directement à une étape.

Faites glisser le schéma pour le voir en entier.

Les étapes du tutoriel, la progression et la reprise depuis l’accueil.

Des tutoriels, des astuces et deux langues

Autour du tutoriel interactif, le site réunit des tutoriels par projet, qui se déplient ligne par ligne avec le code de chaque étape, et des astuces courtes classées par thème : performance, sécurité, déploiement et outils.

L’accueil et le tutoriel existent en français et en anglais, avec une bascule sur chaque étape. Sur téléphone, la leçon se lit comme une page et le bac à sable passe en onglets, Code et Aperçu.

Le site renvoie vers le bac à sable en ligne de bext, sa documentation et la bibliothèque de composants bext/ui.

Les pages Tutoriels et Astuces de learn.bext.dev sur ordinateur, l’accueil sur téléphone — Les tutoriels, les astuces et l’accueil sur téléphone.

Le site, page par page

21 pages capturées sur learn.bext.dev le 25 septembre 2026, sur ordinateur et sur téléphone. Cliquez sur un aperçu pour l’agrandir, puis faites défiler à l’intérieur pour découvrir toute la page. Les flèches permettent de changer de page.

Visiter le site