Formation Relume

Le programme

1. 1Introduction <tool_code> print(default_api.generate_course_content( lessons=[ { "order_index": 1.0, "title": "Introduction à Relume : Révolutionnez la Création Web No-Code", "lesson_type": "intro", "duration_minutes": 5.0, "xp_reward": 15.0, "content": { "summary": "Découvrez ce qu'est Relume, pourquoi il change la donne dans le monde du no-code, les problèmes qu'il résout, et ce que vous saurez accomplir après cette formation.", "key_points": [ "Comprendre la valeur ajoutée de Relume dans l'écosystème no-code.", "Identifier les défis de conception et de développement web que Relume adresse.", "Visualiser les compétences acquises à l'issue de la formation." ], "fun_fact": "Saviez-vous que 70% des projets web modernes intègrent désormais des composants UI pré-conçus pour accélérer le développement ? Relume pousse cette efficacité à son paroxysme !" } }, { "order_index": 2.0, "title": "Premiers Pas avec Relume : Créez Votre Premier Projet en 2 Minutes", "lesson_type": "theory", "duration_minutes": 7.0, "xp_reward": 20.0, "content": { "steps": [ "Création de compte : Guide pas à pas pour s'inscrire (options gratuite et payante).", "Visite guidée de l'interface : Exploration des zones clés (bibliothèque de composants, espace de travail, options d'export).", "Votre premier projet : Créer une page d'atterrissage simple en utilisant des composants préfabriqués." ], "summary": "Ce module vous guidera à travers les étapes initiales pour maîtriser Relume, de la création de votre compte à la réalisation de votre premier projet. Apprenez à naviguer dans l'interface et évitez les erreurs courantes des débutants.", "tips": [ "Utilisez la version gratuite pour vous familiariser avec l'outil avant d'envisager un abonnement payant.", "Familiarisez-vous avec les raccourcis clavier pour une navigation plus rapide dans l'interface." ], "challenge_description": "En moins de 5 minutes, configurez un compte Relume et créez une page composée d'un header, d'une section hero et d'un footer.", "challenge_steps": [ "Inscrivez-vous sur Relume.", "Explorez la bibliothèque de composants.", "Ajoutez un header, une section hero et un footer à votre canevas." ], "success_criteria": [ "Compte créé et opérationnel.", "Trois composants (header, hero, footer) ajoutés à un nouveau projet." ] } }, { "order_index": 3.0, "title": "Fonctionnalités Essentielles de Relume : Maîtrisez la Puissance du Branding No-Code", "lesson_type": "theory", "duration_minutes": 10.0, "xp_reward": 25.0, "content": { "summary": "Explorez les cinq fonctionnalités phares qui font de Relume un outil incontournable pour la création de sites web performants et cohérents visuellement.", "key_points": [ "Personnalisation avancée des composants avec le Style Guide.", "Optimisation du flux de travail avec la gestion des préférences.", "Exploitation des mises en page réactives pour une expérience utilisateur impeccable.", "Intégration transparente avec les builders No-Code populaires.", "Raccourcis et astuces cachées pour maximiser votre productivité." ], "tips": [ "Utilisez le Style Guide pour créer rapidement des thèmes visuels cohérents pour vos projets.", "Exportez et importez des bibliothèques de composants pour réutiliser vos créations." ] } }, { "order_index": 4.0, "title": "Cas Pratique Guidé : Créez un Site Vitrine d'Agence Événementielle avec Relume", "lesson_type": "practice", "duration_minutes": 10.0, "xp_reward": 30.0, "content": { "challenge_description": "Construisez un site vitrine complet pour une agence événementielle fictive, en utilisant les composants et les fonctionnalités de Relume. L'objectif est de reproduire un design professionnel et de présenter les services de l'agence.", "challenge_steps": [ "Définissez la structure du site : Home, Services, À Propos, Contact.", "Créez le Style Guide de votre agence (couleurs, polices, espacements).", "Assemblez la page d'accueil avec : un header, une section hero avec un appel à l'action, une section 'Nos Services' (affichage de blocs de services), une section 'Témoignages' et un footer.", "Développez une page 'Services' détail.", "Créez une page 'À Propos' avec une courte présentation et un team member.", "Mettez en place une page 'Contact' avec un formulaire simple (peut être un placeholder).", "Assurez la cohérence visuelle sur l'ensemble du site en utilisant le Style Guide.", "Exportez votre projet pour l'intégrer à un outil comme Webflow ou Figma." ], "summary": "Ce cas pratique vous guide à travers la création d'un site vitrine complet, de la conception architecturale à l'exportation finale, en explorant toutes les fonctionnalités clés de Relume.", "success_criteria": [ "Site vitrine complet avec 4 pages principales (Accueil, Services, À Propos, Contact).", "Cohérence visuelle assurée par le Style Guide.", "Utilisation judicieuse de différents types de composants (sections, call-to-action, formulaires)."] } }, { "order_index": 5.0, "title": "Quiz de Validation : Évaluez Vos Compétences sur Relume", "lesson_type": "quiz", "duration_minutes": 5.0, "xp_reward": 35.0, "content": { "questions": [ { "question": "Quelle est la principale catégorie d'outils à laquelle Relume appartient ?", "options": ["Low-Code", "No-Code", "Code-First", "Full-Stack"], "correct_answer": 1.0, "explanation": "Relume est un outil No-Code, permettant de créer des interfaces web sans écrire une seule ligne de code." }, { "question": "Quel est l'objectif principal du 'Style Guide' dans Relume ?", "options": [ "Exporter le code CSS du site.", "Gérer la typographie, les couleurs et les espacements pour une cohérence visuelle.", "Créer des animations complexes.", "Connecter des bases de données externes." ], "correct_answer": 1.0, "explanation": "Le Style Guide est conçu pour centraliser la gestion des éléments de style (couleurs, typographie, espacement) afin d'assurer une cohérence graphique sur l'ensemble du projet." }, { "question": "Parmi les propositions suivantes, laquelle n'est PAS une fonctionnalité clé de Relume ?", "options": [ "Bibliothèque de composants pré-conçus.", "Génération automatique de contenu textuel par IA.", "Intégration avec des outils de conception comme Figma.", "Export vers des CMS No-Code comme Webflow." ], "correct_answer": 1.0, "explanation": "Relume est un outil de conception basé sur les composants et l'UI, il ne génère pas de contenu textuel par IA." }, { "question": "Quel type de problème Relume aide-t-il principalement à résoudre ?", "options": [ "La gestion de bases de données complexes.", "La lenteur et la complexité de la phase de conception et de développement d'interfaces web.", "Le déploiement et l'hébergement de sites web.", "L'analyse de données marketing." ], "correct_answer": 1.0, "explanation": "Relume vise à accélérer et simplifier la création d'interfaces web en fournissant des composants et des structures prêtes à l'emploi." }, { "question": "Lors de la création d'un nouveau projet, quelle est la première étape recommandée pour assurer une bonne fondation visuelle ?", "options": [ "Commencer à glisser-déposer des composants aléatoirement.", "Définir le Style Guide du projet.", "Inviter des collaborateurs.", "Exporter le projet vierge pour tester la fonctionnalité." ], "correct_answer": 1.0, "explanation": "Définir votre Style Guide en premier garantit une base solide pour la cohérence visuelle de tout le projet." }, { "question": "Quelle est la principale différence entre la version gratuite et la version payante de Relume concernant les fonctionnalités de base ?", "options": [ "La version gratuite permet l'accès à tous les composants, mais l'export est limité.", "La version payante débloque l'export du Style Guide et offre plus de projets simultanés.", "La version gratuite ne permet pas d'utiliser le Style Guide.", "La version payante offre uniquement plus de stockage." ], "correct_answer": 1.0, "explanation": "Les versions payantes de Relume offrent généralement des fonctionnalités d'export et de gestion de projets plus avancées, ainsi que des bibliothèques plus étendues." }, { "question": "Si vous souhaitez partager vos composants personnalisés avec d'autres projets ou membres de votre équipe, quelle fonctionnalité devriez-vous utiliser ?", "options": [ "La fonctionnalité 'Dupliquer le projet'.", "L'exportation et l'importation de bibliothèques de composants.", "Le partage d'écran avec vos collègues.", "Il n'est pas possible de partager des composants personnalisés." ], "correct_answer": 1.0, "explanation": "Relume permet l'exportation et l'importation de bibliothèques de composants, facilitant le partage et la réutilisation." }, { "question": "Dans un cas d'usage avancé, pour quelle raison un développeur pourrait-il utiliser Relume en amont de son processus de codage ?", "options": [ "Pour générer le code complet d'une application web.", "Pour prototyper rapidement l'interface utilisateur et générer un code HTML/CSS propre et modifiable par la suite.", "Pour gérer le backend d'une application.", "Pour effectuer des tests de performance automatisés." ], "correct_answer": 1.0, "explanation": "Relume excelle dans la création rapide de prototypes UI, fournissant une base HTML/CSS structurée que les développeurs peuvent ensuite affiner et intégrer." }, { "question": "Quelle est l'affirmation la plus précise concernant l'intégration de Relume avec d'autres outils No-Code comme Webflow ?", "options": [ "Relume est un remplacement direct de Webflow, il ne nécessite aucune intégration.", "Relume permet de concevoir les composants et structures, qui sont ensuite exportés et intégrés facilement dans Webflow pour la publication et l'ajout de logiques complexes.", "Relume ne s'intègre qu'avec des outils de design graphique type Photoshop.", "L'intégration est limitée au copier-coller manuel d'éléments visuels." ], "correct_answer": 1.0, "explanation": "Relume est souvent un complément de Webflow, permettant de créer une base solide et visuellement cohérente, puis d'importer le tout dans Webflow pour finaliser le site (CMS, interactions, etc.)." }, { "question": "Quel est l'un des principaux avantages concurrentiels de Relume par rapport à la conception web traditionnelle 'from scratch' ?", "options": [ "Coût de licence beaucoup plus élevé.", "Nécessite des compétences en programmation avancées.", "Réduction significative du temps de développement et standardisation des bonnes pratiques de design (ex: accessibilité, responsive).", "Interface utilisateur complexe et difficile à maîtriser pour les débutants." ], "correct_answer": 2.0, "explanation": "Relume permet de construire des sites avec une rapidité inégalée, en se basant sur des composants testés et optimisés, ce qui réduit le temps de développement et garantit une meilleure qualité." } ], "passing_score": 70.0 } }, { "order_index": 6.0, "title": "Challenge Final : Concevez Votre Premier Portfolio Professionnel avec Relume", "lesson_type": "challenge", "duration_minutes": 15.0, "xp_reward": 50.0, "content": { "challenge_description": "Créez un portfolio en ligne pour une personne fictive (designer, développeur, photographe, etc.) en utilisant uniquement Relume. Ce portfolio devra mettre en avant au moins trois projets, une section 'À Propos', et un moyen de contact. L'objectif est de démontrer votre capacité à utiliser Relume pour créer un site web complet et professionnel, adapté à un usage personnel ou professionnel.", "challenge_steps": [ "Définissez le profil de la personne pour qui vous créez le portfolio.", "Choisissez une palette de couleurs et une typographie cohérentes dans le Style Guide.", "Concevez la page d'accueil avec une section 'Hero' attrayante et une navigation claire.", "Créez une section 'À Propos' avec une présentation et une photo (peut être un placeholder).", "Mettez en place une section 'Projets' présentant au moins trois projets, chacun avec un titre, une description courte et une image.", "Ajoutez une section 'Contact' avec un formulaire simple ou des liens vers les réseaux sociaux.", "Assurez-vous que le site est responsive et s'affiche correctement sur mobile et tablette.", "Exportez votre portfolio au format Webflow ou Figma." ], "summary": "Ce challenge est l'occasion de mettre en pratique toutes les connaissances acquises et de créer un projet concret et valorisant.", "tips": [ "N'hésitez pas à explorer la bibliothèque de Relume pour trouver l'inspiration et les composants adaptés.", "Pensez à l'expérience utilisateur et à la facilité de navigation." ], "success_criteria": [ "Portfolio complet avec minimum 3 pages (Accueil, À Propos, Projets, Contact).",
2. 2Premiers pas avec Relume : Créez Votre Premier Projet en 2 Minutes
3. 3Fonctionnalités Essentielles de Relume : Libérez votre Créativité No-Code
4. 4Cas Pratique Guidé : Construire une Landing Page pour un SaaS en 8 Étapes
5. 5Quiz de Validation : Évaluez Vos Compétences sur Relume
6. 6Challenge Final : Concevez Votre Premier Portfolio Professionnel avec Relume

La vidéo