Bubble Vs WeWeb - Le responsive

🎁 Créer ton compte WeWeb avec 10% de remise : https://services.msgsndr.com/urls/l/phFjF8ffR Dans cette vidéo, on décortique le responsive dans WeWeb et Bubble pour comprendre les différences fondamentales entre ces deux outils No-Code. WeWeb expose directement les propriétés CSS natives sans abstraction, ce qui te donne un contrôle bien plus précis qu'avec Bubble. Tu vas découvrir comment la logique de cascade CSS change complètement ta façon de travailler le responsive. Chapitres : 00:00 Introduction au responsive 01:35 Les breakpoints dans Bubble 02:36 Les breakpoints et la cascade CSS dans WeWeb 05:27 Flexbox : différences entre Bubble et WeWeb 07:26 CSS Grid natif dans WeWeb 11:00 Les unités relatives et absolues 13:54 Les pièges à éviter dans WeWeb Dans Bubble, tu utilises des conditions manuelles sur chaque élément pour gérer l'adaptation responsive. Dans WeWeb, tu définis une base en desktop et tu surcharges uniquement ce qui doit changer sur tablette et mobile. C'est la logique de cascade CSS qui fait toute la différence. WeWeb va plus loin avec le CSS Grid natif que Bubble n'expose pas. Tu peux créer des layouts complexes avec un contrôle explicite sur les lignes et colonnes. Les unités relatives comme rem, vh, vw et fr remplacent avantageusement les pixels pour un vrai responsive adaptatif. Je partage aussi les pièges à éviter : pourquoi commencer par desktop dans WeWeb malgré le mobile first, comment utiliser les petits points verts pour débuguer, et quand utiliser pixels Vs unités relatives. Si tu veux maîtriser WeWeb et comprendre ses différences avec Bubble, cette vidéo est faite pour toi. Docs à consulter : Le responsive design dans WeWeb, breakpoints et cascade : https://docs.weweb.io/css-and-styling/responsive-design.html CSS Grid dans WeWeb : https://docs.weweb.io/css-and-styling/css-grid.html Les propriétés de style dans WeWeb, Flexbox et unités : https://docs.weweb.io/css-and-styling/css-properties.html Le Box Model : https://docs.weweb.io/css-and-styling/understanding-the-box-model.html Le responsive design dans Bubble : https://manual.bubble.io/help-guides/design/responsive-design Flexbox sur MDN, comprendre ce que WeWeb et Bubble utilisent sous le capot : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout CSS Grid sur MDN, ce que WeWeb expose nativement et que Bubble n'a pas : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout Les unités CSS sur MDN, px, %, vw, vh, rem : https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Values_and_units Le responsive design sur MDN : https://developer.mozilla.org/fr/docs/Learn_web_development/Core/CSS_layout/Responsive_Design Vidéos liées - Pour comprendre cette vidéo, je te recommande de voir d'abord : Bubble vs WeWeb : qui a vraiment une SPA ? https://www.youtube.com/watch?v=SEvSAYwOjNQ Construction d'une page (à ajouter une fois publiée) Le style dans WeWeb (à ajouter une fois publiée) Vidéos de la série : Les variables : https://www.youtube.com/watch?v=yWFl6vzP7GQ Expression dynamique et Binding : https://www.youtube.com/watch?v=Hji0w5LwbFY Expressions dynamiques vs Formulas : https://www.youtube.com/watch?v=l5H0lqQKbR0 WeWeb Backend natif : construire sa base de données : https://www.youtube.com/watch?v=nmZGW-YV6i8 WeWeb Backend : authentification, rôles et Event Triggers : https://www.youtube.com/watch?v=QaP5y2HkJUQ WeWeb Backend : sécuriser ses données : https://www.youtube.com/watch?v=a2mYtgve3h0 WeWeb Backend : afficher ses données sans Do a search for : https://www.youtube.com/watch?v=5GsvM5Q9fqU WeWeb Backend : créer, modifier, supprimer sans plugin ni Xano : https://youtu.be/wVH3WZ4fm1k Afficher de la donnée dynamique : https://youtu.be/gqgQ-rmQzUM?si=nZ4N_SlzZIGRnUC0 WeWeb responsive no-code CSS Grid flexbox breakpoints cascade CSS unités relatives développement web