[Musique] hello tout le monde Bir à tous ça va ouais ça va super et toi écoute nickel prêt à prêt à attaquer ce ce deuxième épisode à faire les bases de notre projet euh c'est cool je vois déjà qu'il y a des personnes dans le chat des personnes très très ponctuelles euh salut Frédéric hop on a aussi Anton qui est là salut tout le monde voilà hésitez pas à nous dire à nous faire un petit coucou dans le dans le live pour celles et ceux qui sont présents euh aujourd'hui euh je suis avec Florian euh donc on va vous parler de comment est-ce qu'on crée les bases de son projet wefow euh donc on va repartir des on va refaire un tour rapide de ce qu'on a présenté la dernière fois donc pour rappel la dernière fois on avait vu comment est-ce qu'on initialisait son projet donc on avait créé notre projet dans web on avait aussi présenté un peu ce qui était le designer ce qui était le workspace de Webflow et on avait préparer tous nos paramètres donc nos settings et et on avait intégré les variables dans notre wefow que Quentin avait préalablement fait dans figma top je vois qu'il y a des autres personnes qui arri il y a Pauline salut Pauline il y a aussi Antoine ok top h hop pardon euh oui donc pour cette cette épisode on va repartir donc on va présenter une programme hop donc le programme on va juste faire un retour rapide sur une question qui avait été pr qui avait été posé sur le live précédent euh où sur le coup j'avais pas bien compris je suis désolé euh la question donc on va repréciser euh quelle est la quelle était la question du coup quelle est la bonne réponse à cette question euh ça va concerner les variable ça nous permettra aussi de faire un tour de de ce qui avait été vu une fois que ça ce sera fait on enchaînera dans le standang guide client first dans Webflow et à la fin euh une fois qu'on aura paramétré tout notre standang guide euh on verra comment est-ce qu'on peut créer une bonne structure de page avoir une bonne base pour ensuite venir créer toutes nos sections donc aujourd'hui on aura prob probablement pas le temps de créer notre première section ça ce sera pour la semaine prochaine mais la semaine prochaine on sera prêt on aura tout paramétré dans not dans notre Webflow et on sera prêt à commencer vraiment la création la création du site hop est-ce que tu veux rajouter quelque chose avant de commencer non bah juste aujourd'hui je suis en soutien l'objectif c'est que j'épole un petit peu Tibo sur les réponses à vos questions et qu' puissent concentrer sur l'explication du style guide donc comme il vous l'a dit hein n'hésitez pas si vous avez des questions le but c'est que cette formation elle soit interactive donc on a le chat qui est actuellement animé par par Thomas en régie et puis bah moi je rebondirai sur les questions et et les sélectionnerai pour les poser à thbo afin de tout simplement de l'per sur ça et puis après bah hâte de de finir de poser les bases le style guide on a eu plusieurs fois la question sur comment configurer un style guide c'est une c'est une étape importante dans tout projet de web design pour ça scalabilité mais aussi bah tout simplement pour être sûr de développer avec les meilleures pratiques donc c'est un épisode qui est pas forcément celui des plus fun parce que voilà c'est beaucoup de remise à plat de données mais c'est un épisode qui est important de comprendre ça va vous permettre de bien comprendre HTML de bien comprendre CSS comment fonctionnent ces deux langages de développement dans Webflow et après une fois qu'on a compris le système des classes et comment créer un stylegate souvent ça déroule et c'est le moment plaisir pour les prochains épisodes et la partie bu dans le canva direct parfait très très très bonne introduction merci ok donc je vais partager mon écran hop on va enlever ça et on va refaire une précision du coup par rapport au live de la dernière fois donc c'était pas la semaine dernière c'était il y a 2 semaines où on avait une question dans Webflow donc si je reprends les variables la dans l'épisodes précédent on avait fini notre notre live en présentant comment est-ce qu'on la création de tout simplement de variables dans notre webfow donc ici on avait créé des variables pour nos couleurs euh pour nos pour nos typographies pour nos radius et cetera et cetera et on avait une question sur la création de groupe de variables donc on on va voir ici que dans notre dans nos variables on va voir bah tout simplement les groupes ici par exemple on a notre groupe bas rend si je descends un peu on a notre base cor notreal et cetera bas font base radius et cetera et cetera par dans hop ouais pardon tu Raj quelque chose non je crois que ton micro il avait sauté mais au final je t'is pour s reconnecté ok voilà donc quand on crée une variable par défaut dans we elle va elle va se mettre un peu de façon alé on va dire elle va pas rentrer dans un groupe pour créer un groupe ce qu'il faut faire c'est dans dans notre variable on va tout d'abord rentrer le nom de notre groupe donc par exemple groupe test et ensuite on va faire un slash et là par exemple color test quand je fais ça on va voir que j'ai un nouveau groupe qui s'est créé dans mes variables et j'ai mon groupe test qui s'est créé une fois que j'ai fait ça ce qui tombe bien c'est que c'est une nouveauté de webfow de cette semaine ou la semaine dernière c'est que maintenant quand je vais créer une nouvelle variable à l'intérieur de mon groupe ici donc je suis dans mon groupe test j'ai un petit plus new variable donc là je peux choisir encore une fois si je veux créer une variable de type size color ou font donc par exemple on va dire size ici je peux juste rentrer le nom de ma variable donc par exemple button radius et elle se met automatiquement dans mon groupe je vais supprimer tout ça parce qu'on a pas besoin mais pour récapituler pour faire des des groupes il vous suffit de mettre un slash à la fin enfin rentrer le nom de votre groupe mettre un slash et ensuite le nom de votre variable voilà donc ça c'était juste unes précisions par rapport à la dernière fois parce que il y avait une question et j'avais répondu un peu à côté de la j'avais mal compris la question désolé est-ce que la à la fin de l'épisode ouais c'est la fin de l'épisode c'était céit le live a duré un peu plus longtemps que prévu en plus est-ce que déjà ça c'est clair pour tout le monde dans le chat est-ce que vous avez compris comment est-ce qu'on crée des groupes de variables ou ou pas pour l'instant il y a pas de question donc ça a l'air clair mais si juste moi je peux rajouter que c'est hyper important de bien grouper vos variables bah tout simplement pour rester structurer mais aussi vous le verrez euh au fur et à mesure que le bu il évolue souvent on va utiliser la recherche donc vous avez des vous avez une search dans le designer de Webflow pour venir trouver vos variables et si elles sont bien nommées vous allez pouvoir grâce à vos motclés facilement trouver les valeurs que vous souhaitez connecter à vos éléments c'est compris oui c'est clair bon bah top avec des plugins on a moyen d'apporter directement les varbles DEP Sigma alors on va y répondre dès maintenant oui Antoine moi je te laisse y répondre thibo oui euh donc on a une vidéo je vois que Thomas est très actif dans le chat on a une vidéo sur le sujet qui explique comment est-ce qu'on peut donc synchroniser les variables entre figma et Webflow donc ça ça se passe avec le plugin figma et le plugin Webflow figma to Webflow euh donc c'est totalement possible euh nous on a préféré déjà les faire à la main pour l'épisode pour vous présenter comment est-ce que ça fonctionne donc dans le casadre de la formation mais il faut savoir que ouais c'est c'est tout à c'est tout à fait possible ouais et ça dans le casadre de la formation on a fait comme ça et c'est aussi un conseil qu'on va vous donner tout au long de votre parcours c'est il y a plein de choses qui sont automatisables via des outils mais nous recommande toujours de le faire une ou deux fois la main avant pour bien comprendre l'ensemble du process et ça permet ensuite bah de pleinement improfiter l'automatisation et se dire oh punaise yes je peux faire ça en un clic c'est vraiment cool et aussi bah si jamais vous avez un quak ù vous vouz faire des ajustements vous allez pouvoir facilement comprendre qu'est-ce qui a bloqué dans dans l'automatisation donc toujours commencez faites le une ou deux fois à la main pour vous habituer et après au fur et à mesure de la formation deçon on vous présentera des tools qui vont vous permettre de d'être un peu plus productif et gagner du temps super euh donc maintenant que ça c'est reprécisé sur les variables on va pouvoir rentrer dans le vif du sujet donc notre partie sur le standang guide dans wefco euh déjà petite question pour pour le chat est-ce que vous savez ce que c'est un St guide et si oui est-ce que pour ceux qui ont déjà utilisé webf ou même sur d'autres projets euh est-ce que vous utilisez des St guide et trème question pardon si oui est-ce que vous c'est des St guide que vous créez par vous-même ou est-ce que vous utilisez des stand guide un peu template que que que des méthodologies utilisent mais voilà en attendant que les les réponses du chat nous on s'est retrouvé directement dans notre Webflow donc très important tout au b de l'information on a notre figm ouvert où on va retrouver notre maquette et et notre design système et notre Webflow où on a le cœur de notre projet donc pour rappel nous pour le stand guide on avait cloné un projet client first euh je ramène à la à l'épisode suivant pour ceux qui qui ne l'ont pas vu mais quand on vient cloner euh le clonable client first on va avoir un stand guide qui est déjà créé en draft donc en brouillon dans notre projet ce stand guide va comprendre un certain nombre d'éléments que que nous derrière on va venir personnaliser en fonction de notre projet et ce qui va nous faire gagner énormément de temps peut-être pour ces et ceux qui ne savent pas ce que c'est un standang guide un stand guide c'est euh donc c'est c'est un français c'est un c'est un guide de style tout simplement et ça va définir un peu les les grandes bases ça va définir les classes on va voir après ce que c'est qu'une classe euh mais les éléments et les styles des éléments principaux de notre projet c'est des c'est notamment des des des éléments des classes qu'on va réutiliser sur l'ensemble de notre projet afin de garder un projet qui est uniforme et afin de de garder toute une cohérence dans le dans le design du site c'est vraiment un peu un un un guide dans toute notre phase de développement bah d'ailleurs c'est dansom c'est un guide dans toute notre phase de développement pour être sûr qu'on respecte les bonnes pratiques et qu'on respecte le design qu' que la maquette que nous a fait notre notre designer hop euh euh super je vois qu'il y en a qui utilisent déjà le stand guide de client first donc c'est une bonne base nous VO comme on l'a dit tout au la formation on va développer dans la méthodologie client first donc ça va être notre notre base pour tout notre notre développement et c'est pour ça que c'est important et qu'on prend temps aujourd'hui de faire un live dédié à ça parce que ça nous simplifier encore une fois le le développement derrière et on voit que il y a aussi Pauline du coup qui utilise celui de renum celui de rum qui est très bien aussi d'ailleurs il ressemble un peu à celui de de C first si je dis pas de bêtises donc tu seras pas trop perdu je pense mais mais voil je sais que rum ils ont aussi le petite spécificité par rapport avec avec framework méthodologie de développement mais qui se rapproche très très grandement de de celui de de Cray first Cray first d'ailleurs on en parle on va en reparler pendant tout notre tout notre toute notre formation euh pour ceux que ça intéresse et je pense que ça pourrait aussi grandement aider les personnes il y a toute une documentation euh hop qu'on a je vais aller dessus rapidement toute une documentation hop qu'on a traduite en français de C first et qui explique un peu les bases de CEN first et notamment pourquoi est-ce qu'il y a un sty guide et à quoi enfin comment est-ce qu'on développe avec first dans Webflow euh donc ça peut être très intéressant si vous voulez vous vous de votre côté étudier la la documentation en parallèle des lives euh ça pourrait être intéressant pour pour mieux comprendre tout tout le développement derrière mais voilà donc on a notre stand guide euh on a notre stand guide et nous on va faire un tour euh du stand guide et le personnaliser en fonction euh de de notre projet et notamment donc du design système que euh qu'a créé Quentin euh et qu'on a présenté la semaine dernière enfin il y a de semaines donc le stand guide on va retrouver euh le généralement les stand guide ils sont un peu structurés donc on va avoir différentes grande parties ici on va avoir une première partie dans notre Stang guide client first qui va parler de la structure de nos pages ça on aura l'occasion d'en reparler à plutôt dans la deuxème partie du live euh sur toutes les pages de structure mais on va retrouver des blocs euh donc un bloc qui s'appelle page wrapper et on verra tout à l'heure mais c'est un bloc qui va nous permet de contenir tous les éléments qui qu'il y aura sur notre page donc ici si on veut donner des styles par défaut il y a pas forcément de style sur notre page wppeer mais si on veut lui donner des styles on peut facilement le faire via tout le panneau des styles sur la droite ensuite on va voir le Main wrapper le Main wrapper ça va être un bloc qui va contenir le euh qui va regrouper le contenu principal de notre page donc par exemple toutes nos toutes les sections qu'on va avoir sur nos pages web on va le mettre dans un bloc qui s'appellera main wrapper ensuite on va avoir des des éléments qui vont qui vont concerner les conteners les conteners c'est quand vous créez des section euh pour éviter que vos éléments ne s'étirent trop sur des tailles d'écran euh larges ou même si vous voulez contenir des éléments dans un espace réduit on va voir différents types de contenur donc ici si je clique sur mon sur mon petit bloc on va voir que j'ai mon élément qui est une div block donc les div block c'est des euh c'est les éléments par défaut dans le web on va dire c'est des blocs qui permettent de euh euh des blocs qui permettent de séparer les éléments les uns entre les autres ici donc on va avoir notre compter small et sur la partie droite on va avoir donc notre classe qui s'appelle coner t small et ces spécificités à ces coners c'est que déjà ils vont avoir des margin donc margine left et margin right qui sont en auto et auto ça ça va tout simplement permettre de centrer l'élément sur notre page si je supprime mes auto auto hop alors pourquoi ça fonctionne pas parce queas ton paras ton parch hop alors ou bah c'est une bonne questionon on verra quoi regarde sur ton item ah non pardon mais je je sais c'est parce qu'on a sûrement dans dans les quelque chose qui qui centre automatiquement bon bref mais voilà les comp ici on va avoir des tailles qui sont définis donc on va dire que sa taille est de 100 % et que sa taille maximale ne doit pas excéder 48 REM c'est vrai qu'on avait pas reprécisé ce que c'était les REM la semaine dernière mais dans en terme d'unité dans le web on va voir différents bah type d'unité tout simplement on va voir les pixels donc ça je pense que tout le monde voit à peu près ce que c'est que un pixel et nous dans la méthodologie client first on va utiliser ce qu'on appelle les REM les REM ça va contrairement au pixel se baser sur la taille de la de référence de de votre navigateur et par défaut on va dire que un REM est égal à 16 pixels ce qui fait que ici si je fais 48 x 16 et que je mets ça en pixel on va voir que 168 pixels c'est exactement la même chose que les RM nous on préfère utiliser les RM parce que ça s'adapte aux préférences des utilisateurs dans les moteurs enfin dans les navigateurs par exemple sur Chrome on peut dire que on veut que les les éléments soient un peu plus zoomés un peu plus grands un peu plus petit et ben voilà en utilisant les RM euh les tailles vont s'adapter aux préférences de l'utilisateur donc en terme d'accessibilité web euh c'est toujours mieux de d'utiliser ce qu'on les r voilà donc pour tout ce qui est contenu euh enfin contener pardon on va avoir différentes tailles euh coner sm coner médium et conener large par défaut ça nous on les laisse on les laisse comme ça mais selon les projets on va être amené à les modifier pour euh pour avoir des containers de de différentes SAES de différentes tailles ensuite on va voir ce qu'on appelle les paddings global le padding global ça nous permet de faire enfin ça permet de faire en sorte que nos éléments ne soient pas collés au bord de notre de notre page web ça va ajouter ici on va voir ça va ajouter du padding donc le padding c'est l'espacement ça crée un espace à l'intérieur de notre bloc pour éviter voilà que bah nos él tout simplement il soi collés au bord de l'écran donc ici on va avoir un padding left et un padding right de 2,5 REM ce qui fait 40 pixels à après enfin c'est ça fait 40 pixels tout simplement euh on va avoir 40 pixels de de d'espace sur les côtés pour voir encore une fois pour éviter que nos élément soi soit collés au bord de notre notre écran par défaut nous pareil on va laisser on va laisser ces ces valeurs mais euh selon les projets on peut être amené à à à les modifier on va voir la même chos mais là pour les sections on va voir [Musique] euh sur sur notre site sur les page web on va avoir différentes sections le problème c'est que les sections on ne veut pas forcément qu'elles soient collées les unes aux autres si je reprends la maquette de Quentin hop ici on va voir que j'ai un espace entre la entre ma première section et ma deuxième section cet espace intérieur on va pouvoir le définir avec des padding avec des padding section donc ici pareil on va avoir plusieurs tailles padding section small qui donne 3 REM donc 48 pixels en haut et 48 pixels en bas pading médium 5 crè en haut 5 crè en bas ce qui fait 80 pixels et 80 pixels et padding section large qui fait 8 en haut et en bas ça encore une fois on peut le modifier on verra lors de notre développement si on est amené à venir créer des nouvelles classes parce que ici par défaut on en a trois mais on peut très bien venir dupliquer un élément et venir créer un padding section x large par exemple ici je viendrais juste dupliquer ma classe padding section large je la nomme padding section x large et là je lui donne par exemple 12 REM et 12 REM et voilà là j'ai créé une nouvelle classe qui va potentiellement pouvoir me servir tout au de mon projet pour créer des espacements entre mes sections qui sont beaucoup plus grands et là ce qui va être important c'est que tout ce système d'espacement qu'on vient de présenter qui est la première partie du style guide elle soit discutée en amont avec le designer afin que lui il est afin harmoniser entre son design et la phase de développement et après pouvoir effectuer des modifications au global parce que ce qui est intéressant avec ces classes là c'est que si demain une fois sur le site final le rendu final le designer décide que il y a un peu il y a un peu trop de padding oou il y a pas assez de padding où il souhait changer il souhait changer les espacements entre les sections vous allez pouvoir tout administrer globalement depuis ces classesl vu qu'on parle de choses globales peut-être prendre cette question là Tibo rapidement juste petite question concernant les paddings par exemple de 1,5 rè avec les variables ce n'est pas plus optimisé de les intégrer en variable alors pour l'instant il y a un gros problème sur les Var tu réponds vas-y ouis non excuse-moi non mais c'est c'est une très bonne question effectivement pourquoi est-ce qu'on utilise pas les variables pour tout ce qui est size notamment des des padging euh mais c'est ce que ce que c'est ce que Flo allait dire c'est que voilà ici on a notre panneau de de variable et je vais pouvoir définir des tailles donc pour mes var variable enfin je pourrais créer toute une toute une section padding section et je viendrai créer mes variables donc S M et L le problème c'est que on ne peut pas venir adapter à l'heure actuelle on peut pas venir adapter nos nos tailles en fonction des différents breakp en fonction en en responsif tout simplement ici si je viens connecter une variable par défaut euh ici donc sur ma version desktop si je viens la conneectter à une variable et ben sur tablette et sur euh et sur mobile portrait sur mobile landscape je pourrais pas définir une une variable euh enfin je pourrais pas adapter la taille de ma variable en fonction des des différents points de rupture alors que la différence ouais en soit c'est possible avec du custom CSS en ajoutant du code et cetera mais euh mais voilà pour l'instant nous on préfère utiliser des des tailles et de toute façon c'est des c'est des c'est des classes qu'on va réutiliser sur l'ensemble de notre projet donc si je mets un jour cette classe dans mon design système dans mon styide pardon elle viendra se mettre à jour sur tout mon site c'est vrai qu'on va peut-être pas dit mais tout ce qu'on va retrouver dans le sty guide et je vois qu'il y a aussi des questions qui sont un peu orientées dans ce sens dans comment est-ce qu'on nomme les classes t toutes les classes qu'on va retrouver dans dans notre St guide c'est des classes qui vont être utilisées et réutilisées sur euh une page plusieurs pageag de notre site web c'est ce qu'on va appeler des classes utilitaires dans la méthodologie cenfer c'est important de dissocier ce qu'on va appeler donc les classes utilitaires qu'on va généralement retrouver dans notre stand guide et les classes dites personnalisé les classes utilitaires on va all voir c'est il y a aussi un système de nomination c'est-à-dire que nos classes utilitaires elles ont euh entre les mots c'est séparé par un tiré du 6 donc un un tiret du milieu pour ceux qui qui un ti du 6 tandis qu'on verra donc sûrement la semaine prochaine nos classes personnalisées sont séparées par des TR du 8 donc des underscore les classes dit utilitaire encore une fois c'est des classes qu'on va réutiliser sur l'ensemble de notre projet c'est-à-dire que typiquement voilà les les padding section je vais les utiliser sur sur à chaque fois que j'auris une section et ben je vais lu ajouter cette classe padding section ici on voit que j'ai un une une div dans ma dans mon stangide qui concerne les buton Group et qui nous permet si on va ajouter des bouton euh deux boutons et qu'on veut qu'il soit l'un à côté de l'autre plutôt que l'un en dessous de l'autre on peut utiliser notre classe button Group qui donne voilà un un flex donc ça veut dire Flex c'est une disposition qui permet de d'aligner les les éléments comme on souhaite donc soit de de façon horizontale soit de façon vertical tout en donnant un espace entre entre les éléments euh et ben cette classe vu qu'elle est générique général on peut l'utiliser sur l'ensemble de notre site et si demain on a besoin de changer C cette les style les propriétés de cette classe et ben ça s'appliquera sur tout mon site tandis qu'une classe personnalisée pour un élément très spécifique si je prends un exemple dans mon dans mon comment dire dans mon web ici j'ai des image elle va avoir une classe très très spécifique pourquoi parce qu' sont utilisé qu'une seule fois dans l'entièreté de mon projet ici j'ai un pareil j'ai j'ai un tabs j'ai un tableau il est utilisé une seule fois dans mon projet donc il aura des classes très personnalisées tandis que par exemple tout ce qui est bouton un bouton quand on verra juste après mais il a créé deux grands types de boutons sur leur site ça c'est des classes utilitaires parce que on peut l'utiliser sur l'ensemble de notre site sans que ça perde en cohérence donc classe utilitaire c'est globalisé ça se reproduit elle son reproduite pour pour différents comportements au travers du website sur différentes page et class spécifique c'est vraiment pour une section en particulier sur le site et la grosse différence c'est nomination avec un tiré du 6 ou tiré du 8 nickel h donc voilà et là on reprend sur la question d'avant mais pas pas section large quand je vais sur tablette on voit que mes valeurs sont directement mis à jour donc pour toutes ces sections moi si je veux je peux je peuxevenenir les modifier par derrière mais euh mais par défaut Quentin a utilisé le même principe donc euh donc on on va rester sur ça voilà ça répond à la question de Pauline en même temps qui parlait du style guide et le responsive je modifie des choses sur mes version tablette et mobile je pense un peu sauvagement l'idéal c'est de voir en amont avec vos designer et de vous mettre d'accord sur le stème de spacing pour les différents breakpints et comme ça bah toi tu peux venir tout simplement bah répliquer tes valeurs sur chacun des breakpints à au moment de ta configuration exactement ensuite on va voir dans notre St guide Webflow toute une partie qui va concerner les headings les headings pour simplifier ça va être les titres ENF c'est pas pour simplifier c'est vraiment ça c'est les titres de qu'on va retrouver sur nos pages ça ça sert autant en SEO que pour structurer l'information mais pour expliquer rapidement on va voir cinq grands 6 pardon grand types de titres Onir ce qu'on appelle les H1 ensuite les H2 H3 h 4 et cetera jusque H6 et c'est le même principe qu'une dissertation quand quand on est àcog c'est-à-dire que sur nos pages on va avoir une H1 qui sera le titre principal de ma page si on va sur notre si on va sur notre maquette ici le titre principal de ma page c'est formation F gratuite 2024 et ensuite on va retrouver d'autres titres sur ma page généralement on va retrouver pour chacune des sections on va avoir un H2 donc ça c'est une partie de une sorte de partie de ma page donc là par exemple mon H2 ce serait objectif de la formation euh et voilà après on peut avoir des H3 donc les H3 typiquement dans dans ma section objectif de la formation ce serait savoir développer un projet we FL entièrement savoir optimiser un projet webfow et cetera et cetera ça c'est le même principe que quand vous faisiez une dissertation à l'école vous aviez un grand titre un sujet principal et ensuite vous aviez des parties et sous-parties à faire et ben les h ça passe ça ça ça se déroule de enfin ça ça fonctionne de la ça fonctionne pardon de la même façon et tous ces tous ces éléments tous ces headings on va pouvoir les personnaliser en fonction de notre projet ce qui est bien c'est que Quentin dans son design système et on remercie pour ça il nous a mis euh les styles des enfin les différents headings qu'il a utilisé sur sur le site et c'est Sting qu'on retrouve d'ailleurs dans figma dans la partie stings où ici je vois que j'ai H1 et quand je clique dessus donc là j'ai H1 je vais voir toutes les propriétés qui sont tous les styles qui sont liés à ce à à à ce à ce titre donc on voit que la police c'est Noemi que la weight c'est médium et que la taille en pixel c'est 48 et que l'espacement line 8 est de 100 %. donc ça moi je va tout simplement venir retranscrire dans mon Webflow ce que Quentin a imaginé donc design petite mise en garde avant de continuer dans le web en général on va devoir différencier ce qu'on appelle donc des classes et ce qu'on appelle les balises HTML les balises HTML on va dire que c'est un peu des sortes d'étiquettes c'est c'est ça va permettre de structurer l'information qu'on va venir ajouter sur notre sur notre site web il y en a quelquesun enfin il y en a il y en a pas mal il y a toute une documentation qui qui présente tous les types de tag qui existent mais nous dans Webflow on va y en avoir des des principal tout d'abord ce qu'on a oublié de faire c'est le body le body c'est quand vous créez une page web ça il y a toujours un body le corps de votre page ici dans mon pardon j'ai oublié de faire ça au début quand quand j'ai paramétré mon guide mais ici quand j'ouvre le navigateur de weflow on voit que le premier élément qu'on a qu'on crée une page web c'est un body ce body hop si je vais dans les classes ici on va voir que j'ai un nouvel élément qui s'est ajouté et qui est rose d'ailleurs et on voit qu'on a quelque chose qui s'appelle HTML tag body si je sélectionne ce ce tag là toutes les modifications que je vais faire à l'intérieur toutes les modifications de Sam que je vais faire à l'intérieur vont s'appliquer sur l'ensemble du corps de mon de de ma page web on a oublié de le faire au au début mais sur sur le site web Quentin a utilisé la police qu'on avait d'ailleurs intégré la semaine dernière inter donc la première chose qu'on aurait dû faire qu'on a a créé notre qu'on a qu'on veut configurer notre St guide c'est de venir sélectionner cette balise BODY et de venir lui appliquer déjà la fonte euh principale du site web donc vu que tous mes paragraphes euh sont en inter ici dans fonte dans les dans la section typographie font je vais hop je vais venir sélectionner euh donc la variable qu'on avait créée la dernière fois donc dans base font on va venir sélectionner notre variable main ce qui fait pourquoi enfin pourquoi j'avais créé des variables par fonte la semaine dernière c'est parce que si demain Quentin il il aime plus trop la fonte Inter et qu' me dit de changer inter par une autre fonte bah moi j'aurais juste dans ma dans mon Pau de variable à changer inter par un autre type de fonte et c'estra se mettre à jour sur l'ensemble de mon site web donc voilà une fois enfin pour pour la Baris body donc on va venir sélectionner notre fonte et ce qui est aussi bien de faire c'est de venir euh donner la couleur principale de votre texte donc nous dans notre dans notre dans nos panneau de variable on avait dit que la texte primary c'était cette couleur donc on vient venir la connecter et idem pour notre background color hop on va venir sélectionner notre background primary pourquoi parce qu'on voit que sur notre comment dire sur notre site Web euh l'ensemble la plupart des sections euh vont être beiges ça ça va le fait de venir créer enfin connecter un background color sur ma balise BODY ça m'éviter pour chacune de mes section de venir re comment dire remettre un fond de couleur à chaque fois là je l'ai fait une fois et juste pour les sections qui vont changer de couleur donc par exemple pour cette section là qui est un background noir ou pour cette section là pardon qui a un background rouge je pourrais venir modifier plutôt que de le faire à Cha chaque fois sur chacune de mes sections voilà donc déjà est-ce que pour le chat c'est clair ça qu'est-ce que c'est que body ou ou pas forcément est-ce que vous voulez que je réplique quelque chose parce que ça c'est quand même important de comprendre ce que c'est que le body et ça va notamment nous permettre de comprendre aussi ce qu' va y avoir juste après notamment pour toute la partie heading est-ce que toi fr déjà tu voudrais rajouter quelque chose par rapport à ça non pour l'instant il y a pas de question dans le chat ça paraît clair euh là la la seule spécificité il faut être vigilant sur ça c'est de bien définir ses directions sur la partie tag donc la partie tag sur WEF est identifiable via le code couleur rose donc comme il vous a bien montré Tibo si vous aviez commencé à définir des propriétés par défaut sans sélectionner les tags automatiquement WEF vous aurez créé une classe et voilà c'est ce qu'il est en train de présenter Tibo et ça vous aurait créé une classe body et à ce moment-là vous pouvez penser que vous êtes en train de configurer votre dit mais en réalité vous êtes juste en train de donner des propriétés une classe CSS et dès que vous créerez une nouvelle page bah vous repartirez d'une nouvelle base et vous aurez besoin d'ajouter votre classe CSS body en ça sera pas des des fondations on va dire globalisé scalable donc on pense bien à faire ces modifications sur tout ce qui est le primary sur la partie body all page dans le tag HTML c'est clair c'est ok pour moi ouais j'ail une question qui est très importante et si on souhaite deux polices et des fonds de couleur différents suivant le thème de la page alors ça c'est une bonne question quand on vient définir des des des style spécifique sur notre bis body c'est parce que je je pas donner de pourcentage mais la majeure partie de mon site web va avoir ces styles ici on voit que si je dézoome ma maquette il y a 1 2 3 peut-être C sections différentes qui ont un B cur rouge tandis que toutes ou noir tandis que toutes mes autres sections ont un background cleur beige idem pour mes textes ça je on l'avait défini à en AM avec conttin la plupart des textes qui sont sur mon sur mon site Web sont un peu grisés et donc ce qu'on va définir dans notre body h page c'est ce qui va se répliquer le plus de fois en terme de sty sur notre page si on va si on a des poli ou des fonds de couleur différents ça on pourra venir le modifier directement dans nos dans nos pages soit avec des classes utilitaires qu'on va voir juste après soit soit en venant créer des classes personnalisées en fonction de de de l'élément qu'on aura développer la séction qu'on aura développé sur la CSS alors toutes ces questions là on y répondra alors juste Frédéric si tu parles de la vidéo où on a fait avec les composants où on est venu créer des variables alternatives euh c'est aussi des choses qui sont possibles mais là on effit pour l'instant se concentre vraiment sur les sur les bases et ce qui vous montrait Tibo c'était que là on était sur un site qui était entre guillemets simple avec 95 % des même background et on n'est pas sur un site avec bah des recherches de thèmes comme dark and light et on n'est pas forcément sur un site avec ce genre d'animation qui demanderait une configuration légèrement différente mais possible VI via un code CSS là ce qu'on va faire pour la partie section avec un code CSS on peut le faire aussi pour les sections oui on va vous le montrer mais fera des sections personnalisées directement en personnalisant en personnalisant la la propriété de la classe section euh donc on a vu qu' Balis body c'était voà c un HTML tag et on va voir exactement la même chose pour tout ce qui va concerner les headings ici si je viens sélectionner dans mon sy selector et que je veux remplir une classe on va voir que j'ai un HTML T qui s'appelle all H1 headedings et ça ça va me permettre de donner euh à tous les H1 que je viendrai intégrer sur ma page dans dans mon futur développement le même style encore une fois si j'ai des H1 qui sont un peu spéciaux avec des styles différents dans ce cas-là je viendrai créer des classes dit personnalisé mais euh la plupart de mes de mes des H1 sur mon site web vont répondre à ce que Quentin a créé dans mon des System qui est-à-dire une fon de type Noomi avec une white médium 48 pixels et 100 % de Line B ça je vais tout simplement venir le reproduire pour mon H1 heading donc là dans font je vais venir sélectionner ma fonte Noemi donc j'avais créé une variable heading comme ça ça va ça va me permettre de ça va permettre de faire en sorte que encore une fois si demain lesing je veux plus que ce soit en omemi mais dans une autre police j'aurais juste à changer dans mes variables et ça change partout donc voilà je viens donner ma fonte heading ici on a dit que c'était en médium que la taille c'était 3 48 pixels donc 48 on va faire 48 divis par 16 pour divisé par 16 pour convertir ça en REM ça nous fait 3 REM et là on avait dit que céit 100 % de Line 8 et 100% ça ça correspond à 1 tout simplement si on avait eu 110 % ça aurait été 1.1 si on avait eu 120 ça aurait été 1.2 et cetera et cetera on va aussi voir que maises dans mon site web la plupart de mes heading sont en noir donc là ce que je peux faire c'est que directement pour éviter à chaque fois que je mets un nouveau heading sur mon site web au lieu d'à chaque fois lui donner une nouvelle classe pour lui ajouter cette couleur je peux dire que par défaut mesings sont noirs peut-on régler des tailles différentes pour les h sur la TA des écran dans le style guide oui via le système de breakpoint donc là sur Webflow vous allez pouvoir venir tout simplement bah changer de breakpoint donc là on passer par exemple sur le breakpo en tablette donc comme on le voit par défaut vous avez les valeurs qui ont suivi ce que Tibo avit configuré sur la partie desktop mais ensuite on peut très bien venir les configurer et changer la taille avec ici comme on voit par exemple 2,5 mais ça peut devenir de REM et venir personnaliser chacun des breakpoint pour chacun de vos heading c'est exactement la même logique que vous souhaitiez configurer et personnaliser des Tags Html que des classes CSS vous pouvez tout travailler grâce au responsiv en cascade directement depuis le style gay exactement et donc ça je vais je vais répéter cette cette opération pour chacun de mes de mes de mes éléments on va voir qu'à chaque fois que j'ai un élément H1 donc un tag un HTML tag derrière je vais avoir une un texte avec une classe heading style H1 euh pourquoi parce que si je veux donner à euh un texte sur mon site web les mêmes propriétés que un H1 par défaut bah je pourrais lui donner cette classe et ça reprendra exactement ce que j'ai donné par défaut euh à mon à mon heading de base c'est hyper important toujours venir configurer les deux que ce soit et la balise HTML et la classe CSS parce que la balise HTML elle a des enjeux pour les navigateurs en terme de lecture comme vous expliqué Tibo ça des enjour en terme SEO à la différence d'une classe CSS qui n'en a pas donc peut-être que sur la quê à un moment on aura une section qui utilisera le style H1 mais cette section là et le texte à ce moment-là n'aura pas de mots- clés pertinent par rapport aux enjux SEO du site et donc à ce moment-là aucun intérêt de lui mettre un vrai élément HTML heading h onean on va juste mettre par exemple un texte bloc ou un texte paragraphe et cet élément là on viendra lui donner un style grâce à la classe heading style Hwan et tout à l'heure on avait une question aussi sur la partie personnalisation est-ce qu'on a besoin de venir personnel si on a des différentes fontes différentes fontes ou différents styles pour les heading on pourrait très bien avoir un heading style H1 style 1 eting style H1 style 2 et ça vous permettrait d'avoir des personnalisations un peu différentes et par exemple je pense parfois ça arrive qu'il y ait des heading avec des des changements de police avec une police en italique pour avoir un effet de style dans le titre ça peut être fait via la création de classe custom à ce moment-là voilà Tib je je te vois enchaîner je te vois enchaîner c'est c'est parfait n'hésitez pas si avvez des questions je répondrai en même temps dans le chat mais là Tib est tout simplement en train de reproduire la configuration qu'il avait dans figma en suivant la logique qui vous a présenté une fois en passant par chaque tag HTML heading puis ensuite pour chaque classe CSS heading style exactement parce que on fait on fait juste la manipulation pour chacun des desing qui qui peut exister dans dans le web euh donc là voilà comme comme je disais je reprends juste les valeurs donc que que Quentin avait paramétré donc à 24 c'est parfait c'est déjà configuré et je viens les adapter euh les adapter peut-être peut-être bientôt une nouvelle features du plugin Sigma to wefow ça peut-être peut-être peut-être c'est ils cette année ils ont annoncé la webfoconf très tôt je trouve euh je sais plus à quelle année c'était quand est-ce qu'il avaient communiqué DESS l'année dernière mais moi je pense qu'ils vont nous sortir du du lourd pour cette année euh donc c'est ce serait top en tout cas de de nous faciliter la tâche sur ça sur ça d'ailleurs hésitez pas à nous dire dans le chat s'il y en a qui qui vont la webfoconf cette année pour ceux qui savent pas ce que c'est la web fonf c'est une conférence chaque année où FCO va nous présenter les différentes les n fonctionnalité euh qui qui vont sortir pour pour webfow et souvent c'est des très B fonctionnalité l'anné dernière on avait eu localisation donc qui permet de traduire un site en plusieurs en plusieurs langues directement dans dans wego on a vu aussi l'intégration native spline qui permet de faire des animations 3D avec Webflow et cette année ils ont annoncé deux confes une à San Francisco une à Londres donc je vois qu'il y a des messages live apparît comme l' passé j'espère il y aura des news il y aura des news sur la Watch pendant que tiib pendant que Thib continue je réponds à la question de Pauline si dans une H1 c'est dans H1 le vrai je mets un span pour avoir un M couleur on ne perd pas le statut H1 non parce que le span ça va être une classe CSS qui va venir s'ajouter par-dessus ton headeding donc tu auras vraiment toujours ta balise HTML qui aura le statut H1 super bon donc là j'ai viens de finir de paramétrer tous lesing en fonction de ce qui était fait dans dans figma d'ailleurs je reprécise que voilà ce ce Webflow est clonable gratuitement depuis madefow vous retrouvez le lien en description donc pour ceux qui pour ceux qui voudront vous pourrez une fois qu'il aura été fait le directement le le cloner dans webfow pour pour tout simplement l'étudier plus en plus en détail j'en profite aussi bah pour vous rappeler de liker cette vidéo si c'est pas encore fait c'est important bah tout simplement pour nous savoir si c'est le conten si le contenu qu'on produit dans cette direction vous plaît c'est une mîtrique qu'on suit et puis bah si vous aimez ce type de contenu n'hésitez pas à vous abonner il y a un live toutes les semaines le jeudi à 18h où Tibo vous accompagne de A à Z dans une formation de développement Webflow avec la méthodologie et le framework client first super euh donc là on a fait noing mais il existe encore d'autres HTML tag on va avoir des HTML tag pour les paragraph euh donc là si on reprend dans dans notre design système Sigma Quentin avait prévu donc une une Poce de inter TER avec 16 16 pixels light8 de 110 et une SP ler spacing de - 2 % et ben ça je vais typiquement pouvoir le remettre sur sur mon HTML tag on paragraphe comme ça ce sera déjà fait donc hop ici on a dit euh 110 donc c'est plutôt 1.1 hop 1.1 et si on déroule un peu ici on va voir qu'il y a des options supplémentaires donc par exemple later spacing et là je vais pouvoir alors - 2 % ça n'existe pas dans dans wfow pour les later spacing mes petits tips si vous faites - 0,02 E m ça va faire comme si c'était moins - 2 %. si on avait eu - 5 % on aurait fait - 0,05 % si on a vu - 5 20 % 0,2 et cetera et cetera super tips c'est vraiment super pratique et comme ça a été abordé rapidement par par TIBOLA mais c'est pas des REM attention c'est des EM il y a plein plein plein d'unités de valeur différentes donc on a parlé de pixel on a parlé de REM là on est sur la valeur qui est em mais on rentra peut-être on fera peêtre un épisode un jour à part entière sur les les différentes propriétés sur sur ça parce que c'est c'est un peu c'est un peu long toalement euh voilà on va vooir pareil pour les les quotes donc ça c'est des éléments spécifiques on va pas trop les utiliser mais on va quand même le paramétrer de façon très rapide on va dire que quand on a quand on met une quote sur notre site web on va faire comme ça qutin na pas forcément mis dans le design système parce qu'on l'a pas utilisé sur sur sur la maquette mais on peut lui donner un style pareil pour pour les links donc ça on va pas forcément l'utiliser parce qu'on aura une classe spécifique et on a également la même chose pour tout ce qui va concerner les listes item et les ord link donc là on peut venir les sélectionner et leur donner des classes spécifiques pareil ça on a pas forcément dans le design système parce que on NAA pas utilisé t dans dans webfow mais mais voilà si j'avais voulu faire en sorte que à chaque fois que j'ajoute des listes à puce dans mon Webflow c'est une couleur rouge ben je peux le faire en sélectionnant all list item et en venant donner des des paramètres des stings bien spécifiques parfait donc voilà ça c'était pour vraiment pour toute la partie un peu structure à HTML tag et ensuite on va voir des des classes pour des éléments enfin pas quotidien mais des des différents types d'éléments qu'on va utiliser sur notre site Web web euh donc par exemple pour tout ce qui va concerner les textes ici on va avoir des classes qui vont nous permettre de euh gérer les tailles des texte donc par exemple on va avir Tex size large qui donne 1.5 rème donc 24 pixels euh de de de taille à mon texte pareil pour médium ça c'est 20 pixels 16 pixels euh small et tiny ça pareil on va pas venir le modifier parce que sur sur figma on est à Quentin a utilisé les mêmes les mêmes principes et comme pour les padding section si je voulais en ajouter un nouveau j'aurais juste besoin d'en dupliquer un de venir dupliquer ma classe et donner des valeurs différentes donc par exemple Tex size hop x large et là je pourrais donner de REM hop juste pour que ce soit bien ordonné dans mon sty guide et voilà là je viens de créer un nouveau nouvelle classe utilitaire pour gérer la taille de mes éléments sur sur mon site web on vair ce ce qu'il a montré Tibo c'est important c'est des classes pour gérer le style de différents éléments c'estàdire que à la différence de ce qu'on vous présentaé tout à l'heure qui étaaiit des Tags html qui faisaent que dès qu'on allait Ajouter un nouvel élément il allait prendre automatiquement ce style par défaut les classes vont nous permettre de venir ajouter des style personnalisé sur ces éléments donc là l'ensemble des textes sont tous des paragraphes donc ces paragraphes ont un HTML tag par défaut mais en étant venu leur ajouter cette classe CSS qui a ses propres propriétés on vient bah personnaliser le style de ces éléments si vous avez compris ça vous avez tout compris euh de HTML et CSS c'est c'est les plus c'est le plus important donc euh est-ce que c'est clair pour tout le monde dans le chat sinon n'hésitez pas on peut vous faire une démo et peut-être approfondir euh c'est c'est vraiment on va dire que c'est sur ça que repose la complexité de Webflow quand quand on commence HM exact parce que ouais je je vais faire je vais faire une démo en fait ici si je aoute sur mon dans dans ma page j'ajoute un paragraphe tout à l'heure juste donc juste avant on avait défini que notre tous les paragphes de notre site Web euh donc faisait un REM donc 16 pixel et on avait une line a de 1.1 le problème c'est que moi sur mon site web ou sur la maquette que fait qu'a fait Quentin on va pas tout le temps avoir des textes de la même taille donc moi quand je vais ajouter un paragraphe je vais avoir des fois besoin que ce paragraphe soit plus gros ou plus petit bref qui s'adapte à la maquette que quand en fait et ben nous si on veut que ce texte là soit plus gros on a dans notre gig de style des classes qui nous permettent de gérer la taille de cet élément donc là je vais rempire texte- size ici d'ailleurs ce qui est bien c'est qu'on voit toutes les possibilités qui existent donc que j'ai créé dans mon sty guide et si je choisis Tex size large on va voir qu'automatiquement la taille de mon texte va grossir et ça ça va nous éviter de venir directement ici appliquer une taille de de REM là ça va créer une classe par défaut qui s'appelle paragraphe qui veut tout et rien dire moi si demain je suis développeur que j'arrive sur sur une section et que je vois que voilà c élément un style paragraphe bah je comprends pas trop à quoi ça sert tandis que si je donne une une une classe Tex size large et ben je comprends que le but de cette classe est de donner une taille plus grande à mon paragraphe donc les HTML tag ont définit une tendance générale une tendance globale les comportements qu'on va le plus retrouver et la logique qu'on va retrouver le plus souvent sur notre website et après avec les classes CSS on vient venir définir des styles et ces styles pourront venir personnaliser ces éléments HTML quand on souhaite qu'il soit un peu différent enfin pas qu' un peu différent quand on a besoin d'un autre comportement que le comportement général typiquement une taille de texte c'est un bon exemple mais ça pourrait être aussi une couleur de texte et on pourra on verra tout à l'heure mais on aura des classes pour les textes color et afin de de venir modifier les textes color mais il reste voilà et on a un super bon ajout de Paline mais il reste considéré comme un paragraphe SEO parlant c'est hyper important c'est exactement ça c'est-à-dire que la le paragraphe reste un paragraphe le moteur de recherche pas le lire comme un paragraphe on lui a juste ajouté une classe qui est venue lui donner un style différent mais aujourd'hui le moteur de recherche puis qu'il va l'intéresser quand on parle Sao c'est essentiellement et presque que ça le le tagage en html donc euh ça balise exactement toutes ces classesl ça surtout nous servir dans un but de design de rendre notre site Web attractif en fonction de ce que le designer aura créer créer et donc là on va avoir pareil sur différents types de différents types de de de Sting de texte donc par exemple on a une classe qui va permettre uniquement de barrer le texte on va avir une classe qui permet de mettre en en italique une classe qui permet de faire en mile et cetera et cetera une classe textimele home caps qui permet de mettre tout nos textes en majuscule et donc ça c'est des classes encore une fois utilitaires qu'on peut réutiliser sur l'ensemble de notre site Web et qui ont un but précis pareil pour pour M Link et cetera et cetera je rebondis sur le commentaire de Game parce que je trouve qu'il est vraiment il est il est super vrai ils sont quand même très forts ces gens chez Webflow plus tu apprends le web développement plus on s'intéresse au développement web plus on se rend compte que sur cet outil ils ont réussi à combiner tous les besoins et anticiper tous les besoins qu'à n'importe quel développeur fontaine l'outil est juste pas encore assez connu mais quand le monde du développement web va se rendre compte de l'outil ils vont se rendre compte que c'est un outil qui fait gagner énormément de temps et qu'ils ont été très très très très fort dans sa conception et c'est vraiment un super outil yes donc pour continuer sur notre stand guide on va avoir pareil pour les tailles de les épaisseurs des textes donc Onir des cas Tex white X B qui vont permettre de mettre mes mes textes en extra B en B en sing B en light en normal en médium et cetera on va voir la même chose pour les pour lesignements donc tout ça on n pas besoin de toucher parce que en soi ça va jamais bouger quand on veigner sur un texte à gauche on a déjà cette case qui est créée quand on veut centrer un texte on pourra mettre texte Center et ça viendra centrer mon texte dans dans ma page et cetera et cetera ici ce nous ce qui va nous intéresser ce qu'on va devoir modifier ça va être les boutons les boutons si je vais dans mon design système de figma hop ici Quentin nous a prévu ça c'est ça c'est des de boutons spéciaux donc on les verra pas aujourd'hui mais il nous a prévu deux grands types de boutons ça par contre on va pouvoir venir les modifier donc ici on a un élément de type bouton avec la classe Button et ça c cette classe là on va venir l'adapter en fonction de ce qui a été fait sur par Quentin pour pour créer une classe bouton qui sera réutilisé uniformisé sur tout le site web donc on a un radius de 10 pixels donc si je descends tout en bas de la partie radius bah ce qui est bieni c'est que j'avais créé des des variables pour les radius donc je peux venir sélectionner ma variable ici ensuite je peux venir sélectionner mon background rouge euh hop ça c'est du plan à l'intérieur donc ici je pouvoir sélectionner texte alternate mon texte CTA il est en il est en inter médium 16 pixels donc là le M c'estj inter là je pouvoir mettre en médium 16 pixels c'est un donc ça on pas besoin de toucher il a mis de 1.5 donc 250 donc j'ai pas besoin d' toucher et là je ve juste remettre mon spacing en Mo 2 en 0,02 em ensuite ce qui va être intéressant de regarder c'est les paddings donc les espacement intérieur donc on va voir que sur les côtés il a mis 16 pixels donc un REM d'espacement sur les côtés euh et 12 REM euh sur euh euh 12 pixels pardon sur euh les hauteurs donc là je pourrais mettre un REM ici un REM ici et 12 pixels c'est 0,75 REM ce qui est déjà paramétré donc on a notre on bouton qui est créé qui est cré on va PIR ai créer notoution faireionout pour faireon Dr je personnaliser sty quand je vais survoler mon élmentton hop donc là Quentin a mis ce cette couleur là cette couleur là que je vais venir ajouter d'ailleurs à mes variables H je v l'appeler red over par exemple comme ça si je veux un jour changer la couleur de mes état overover je pourrais le faire facilement depuis mes variables et là je vais venir sélectionner dans mon h redover je vais pouvoir sélectionner nouvelle couleur et quand je reviens sur l'état non ici si je fais si je survole mon bouton on voit al je sais pas si ça se voit bien à l'écran on voit on voit que ma couleur change ma couleur se change de façon très brutale pour se faire pour faire un peu que ce soit smooth euh si on descend tout en bas dans dans nos sty on a ce qu'on appelle les transitions et ici je vais pouvoir sélectionner une transition donc là ce que j'ai fait c'est que mon bouton j'ai changé uniquement le la couleur de fond donc je sélectionné background color ici je veux dire que je veux que la transition se fasse en 200 misees nous on va plutôt mettre 300 misees pour que ça soit un peu plus smousth euh le type de easing ça on aura peut-être l'occasion de revoir pour par défaut on va laisser ease et là quand je vais venir surver mon bouton on va voir que la transition est beaucoup plus lissée beaucoup plus mousse peut-être pour pour pour illustrer un petit peu ceux qui ne connaissent pas les pour les transitions mettre 3000 3000 en en en valeur hop pour qu'on voit bien la différence ouais si je mets 3000 c'est ser un peu long c'est un peu le changement le changement de couleur est très est très long en fait plus on va mettre un temps long euh plus la transition donc va être ouais on a une autre question mais alors ça répond pas au design mais ça c'est une question qui est importante peut-on aussi régler le drop Shadow sur leover d'un bouton totalement euh comme il l'a montré Tibo en fait au moment où on est sur la classe bouton on peut venir sélectionner son é over et là on a accès à l'ensemble des propriétés CSS bouton over et on peut venir donner n'importe quel style àre bouton c'est ça peut aller beaucoup plus loin qu'ement qu'un changement de couleur ça peut être un changement de taille ça peut être tout le panel CSS que nous offre WEF exactement je supprimer ce que j'aiit et vu les custom properties on a accès à toutes les propriétés qu'on veut en soit c'est c'est illimité les atat over et donc là je va pouvoir faire pareil avec mon deuxième type de bouton donc la spécificité c'est que par défaut on va voir un bouton sur lequel on a ajouté la classe Button et ensuite on a rajouté une classe supplémentaire à cette classe de base et on app cette classe seconde ça c'est ce que dans we on va appeler les combo class c'estàdire qu'on va ajouter une classe pardessus une classe donc ce qui va nous permettre de garder par défaut tout toutes les propriétés qu'on toutes les propriétés CSS tous les stings qu'on a appliqué à notre classe button par défaut mais venir modifier quel uniquement que quelques que quelques propriétés pour pour ce type de bouton donc là on a notre couleur qui en notutr 500 et pareil vous avez un nouveau code couleur qui vous permet de vous repérer donc toutes les propriétés qui ont une si vous le voyez par exemple vous avez font weight size qui ont une colorimétrie orange le orange signifie que la valeur est définie par la classe parent enfin par la première classe bouton et dès que la propriété prend une classe prend une couleur bleue cela signifie que la valeur ENF la nouvelle valeur Oui est définie par la Custom class par la combo classe excusez-moi donc si on veut changer très fort le bouton over par exempleexte ici ça se passe exactement exactement Pauline si tu veux ajouter alors si tu veux le faire en CSS oui tu peux le faire via la propriété background background image et ajouter un picto à l'intérieur de ton bouton au au over oui c'est possible ouais ça ça c'est un peu plus avancé donc soit tu fais avec des background soit tu peux le faire en ajoutant des des éléments et en faisant créer du CSS personnalisé c'est un peu plus avancé donc on va pas forcément voir aujourd'hui mais euh mais on aura l'occasion d' reparler pendant la formation parce que il y a un exemple qu'on aura dans un futur futur live eTTH il y avait une question sur le is ti veut dire quoi euh ça c'est une bonne question parce que ça concerne la nomination des des classes quand on va venir créer des classes des combo classes donc des classes supplémentaires donc là par défaut j'ai mon bouton hop j'ai mon bouton euh j'ai ma case Button et si je vaux ajouter une case supplémentaire ce que nous dit first dans en terme de nomination des classes c'est que c'est toujours mieux de mettre is donc en anglais ça veut dire comment dire excusez-moi je per mes mot le but de de la classe on va dire bon is donc le bouton c'est le secondaire si on ENIT 23e ce serait is- ti sari si c'était alternate on dirait is- alternate et cetera et cetera donc ça c'est juste en terme de nomination des classes quand on va créer des classes qui sont combinées c'est toujours mieux de commencer la deuxè classe avec is TI et voilà cette même classe donc cette fois-ci c'est c'est pas la couleur de fond qui va changer c'est la couleur du texte donc là pareil je peux venir créer un overover spécifique pour cette classe combinée où je vais changer ma couleur de texte et là par contre que je vais devoir faire c'est je ve pas avoir de transition background color mais je avoir plutôt une transition F col qui va me permettre quand je survle mon bouton d'avoir une transitiono sur la coule de mon texte c'est hyper important de bien venir cibler la propriété que vous affecté par votre transform parce que y a une erreur qui est fréquemment fa c'est de mettre par exemple propriété c'est vrai que c'est simple nous en tant que développeur on met all propriété comme ça entre guillemets on est tranquille peu importe les propriétés qui viennent être modifié il y aura la transition mais le problème c'est que pour des enjeux de Soo de performance et temps de chargement c'est pas l'idéal puisque vous allez demander à bah au browser de charger les transitions pour l'ensemble des propriétés et pas forcément que Cell qui était un nécessaire à votre animation pour alors on a pas mal de questions pour la partie nomination alors pour nommer les classes on peut le faire en français où c'est plus pratique en anglais la nous on suit la logique on t'invite à lire la documentation aussi en parallèle pour venir étoffer un peu étoffé mais nous on suit la logique de le faire en anglais parce que on part du principe que peut-être que demain votre client ou notre client travaillera avec un freelance qui sera pas forcément francophone et donc a besoin de comprendre l'ensemble de notre nomination euh donc voà pour continu continuer sur le style guide et euh et aller un peu plus vite donc là on a fait nos boutons on a personnalisé les styles donc VO quand quand on aura un bouton à utiliser sur euh sur notre sur notre projet on pourra lui mettre à case button ou button is secondary pour lui appliquer directement les bonnes propriétés on va voir pareil pour les couleurs donc on va voir par exemple les text color primary qui va me donner ce qui est bien c'est que vu que j'utilise un state C first et qu'il y avait déjà des variables de paramétré ça normalement j'ai pas besoin d'y toucher euh qui va me permettre de donner des couleurs différentes à mes textes si j'en ai besoin nous on va juste en créer une autre parce qu'on avait une text color brand hop ça je vais la venir la dupliquer et la renommer parce qu'on avait une pour rappel on avait voilà une variable si je vais ici qui s'appelait texte color brand qui est du rouge tout simplement euh et voilà on a juste créé une une autre variable mais si vous que trois types de text col ça vous vous les avez directement d'intégrer dans votre stand guide k first on va retrouver exactement pareil pour les background color ici on a notre background color primary secondary tersary alternate qui sont déjà bien connectés pourquoi parce qu'encore une fois vu qu'on avait paramèt on avait bien paramétré toutes nos variables la semaine dernière c'est venu les sourcer automatiquement et ensuite on va avir des des des des autres classes un peu plus génériques pareil on n' pas forcément besoin de d'y toucher mais qui ont toute une spécificité donc par exemple max F pour faire en sorte que ça prenne la la la une largeur totale de la page on va avoir des max SDS de différentes tailles par exemple max s x large un peu sur le même principe que les conteners les conteners c'est beaucoup plus appliqué à des sections là c'est par exemple pour si vous voulez avoir des éléments dans une section même qui ont une une largeur maximal et ben voilà ici on a différents types de de classe max large qui va donner une max8 maximum de 64 REM euh max SM et cetera et cetera toute la partie padding margin et cetera on va pas on va pas forcément en parler parce que c'est très très très spécifique euh mais ça faut savoir que vous avez pas besoin d'y toucher et euh si on utilise dans notre développement j'en reparlerai à ce moment-là mais honnêtement donc stand guide ça on en a pas besoin de de de focaliser là-dessus ouais surtout que c'est des comportements qui sont de plus en plus rares à utiliser puisque dans les dernières recommandations de de fin suite on encourage l'utilisation des Flex gap donc propriété CSS que vous découvrirez pendant pendant le développement h ce qui peut être intéressant VO c'est par exemple les spacers ça ça va permettre de donner des de l'espace entre les éléments si j'ajoute un un titre et j'ajoute un paragraphe en dessous bah entre deux je peux je peux mettre un div bloc donc un bloc de séparation et donner une classe de type space spacer T pour donner voilà de l'espacement entre mes éléments donc ça voilà il y en a il y en a pas mal qui sont déjà paramétrés si besoin on peut venir les modifier mais généralement c'est des styles standard qui sont utilisés dans le web ici on va avoir des classes pareil qui sont utilisées pour tout ce qui est icône qu va qu on va utiliser des images par exempleon peut donner une classe icône médium pour donner une une hauteur maximum de 32 pixels à notre élément euh ici on va avoir pareil mais pour donner des pour faire en sorte que ce soit carré donc on va voir une et une e qui sont égales mais VO encore tout ça on n pas besoin d'y toucher et là ils nous ont mis encore une fois des des autres classes qui peuvent être utiles dans tout l'ensemble de notre projet par exemple une classe hide ça ça ça peut être intéressant quand je mets hi un élément bah ça va venir lui donner un display non donc ça va tout simplement venir le cacher sur ma page web et ça on en a plein plein plein donc ça je vous invite àer regarder à regarder à faire les tests de votre côté mais ils sont plutôt quand même ils sont plutôt explicites à tablet bah ça va faire en sorte que sur tablette C BL là soit caché alors qu'il est présent sur sur sur Desktop et ça tout ça on verra on verra plus tard enfin on verra sûrement pendant toute la phase de développement euh ici je vais avoir tout ce qui concerne mes formes donc là je pourrais venir paramètrer ça on fera encore une fois pareil on va avoir des formulaires on a une page de hop une page de contact euh lorsqu'on viendra s'intéresser au formulaire dans WECO on pourra revenir dans notre stand guide pour bien le paramétrer voilà juste pour préciser le stand guide c'est bien de faire de bien le faire au début mais euh une fois que vous avez fait c'est pas c'est pas une version finale le styide est toujours aussi amené à potentiellement évoluer euh donc si vous voulez mettre des éléments en standby dans votre sty guide vous pouvez retourner dans votre développement commencer le développement et quand vous avez un formulaire revenir dans votre partie style guide pour venir personnaliser ces éléments et ça ce sera exactement la même chose pour les Rich Text les rich text on verra ça dans la partie plutôt article de blog quand on viendra créer notre CMS on va voir des champs qu'on appelle de type reach text qui permet de donner de la flexibilité tout ça venir on peut venir aussi modifier euh directement dans notre guide de Steam top bon ben écoute bien joué thibo là on a un peu plus d'une heure mais on a fait le tour du stygate de clent first donc c'est cool et pu on a pu voir pas mal de sujets hyper intéressants comme la différence entre HTML CSS la création et la personnalisation de nos premières classes utilitaire est-ce que vous avez des questions dans le chat ou est-ce que Tib tu tu veux rajouter quelque chose en attendant non là moi vraiment ce que ce que je vous invite à faire c'est euh donc déjà là on a une bonne base donc si vous voulez regarder plus en détail comment ça a été créé et cetera d vir bah cloner le clonable qu'on a créé euh sur Webflow voir euh faire un peu vos tests essayer de comprendre à quoi sert les différentes classes et euh de toute façon bah la semaine enfin comme on a dit c'est un live chaque semaine donc si la semaine prochaine vous avez des questions qui reviennent par rapport à à au stand guide ou si vous voulez des écarcissements et cetera n'hésitez pas nous le but c'est qu de de faire en sorte que ce soit ce soit le plus compréhensible pour pour tous euh mais voilà un peu une présentation générale et de toute façon dans dans la phase de développement on aura l'occasion de de reparler de tout ça beaucoup enfin de façon plus concrète clairement ça sera beaucoup plus visuel et ça sera projeté et le style guide projeté il y aura plein de choses qui que vous enfin vous comprendrez beaucoup des décisions qui ont été prise dans la configuration dans ces deux premiers épisodes la semaine prochaine quand Tibo commencera à développer euh la maquette vous avez fait le logo avec figma tac alors si tu parles du logo de de de comment dire du du ce logo là euh oui c'est c'est Quentin qui l'a qui na fait directement sur figma je pense euh si je dis pas de bêtis il l'a fait directement sur sur figma top bon ben écoutez si vous avez pas de questions merci à tous d'avoir été là aujourd'hui merci Tibao d'avoir animé ce live et c'était top je pense qu'on n pas si vous s'il y a des questionsqu on n pas répondu ou que vous regardez cet épisode en replay n'hésitez pas à le laisser en commentaire un ça nous permettra bah soit d'y répondre directement depuis les commentaires ou deux de les préparer de faire comme ce qu'a fait Tib au début de ce live commencer le live de la semaine suivante en répondant aux questions qui sont restées en standby et qui pourrait potentiellement vous bloquez dans dans votre progression sur Webflow comme on le rappelle il y a un live toutes les semaines le jeudi à 18h mais vous avez aussi des ressources pour vous épauler vous avez un clonable qui est disponible sur la figma community avec la maquette mise à jour et aussi un clonable Webflow qui vous permet bah de suivre de l'intérieur le projet le projet chaque semaine top bon bah merci pour cette formation top merci beaucoup pour vos retour ça nous fait plaisir merci à vous merci à vous top canon franchement c'était cool Tibo tu as sû bon canon à la semaine prochaine alors c'est ouais effectivement c'était pas des les deux premiers lives les premiers lives c'est pas c'est pas les sujets les plus marrants comme l'a dit FL en début de Live la semaine prochaine ce sera normalement un peu plus fun parce qu'on rentre vraiment dans les premiers les premières section ce sera plus focalisé sur les composants donc on réexpliquera ce que c'est et on commencera aussi développement euh d'une section mais voilà entre-temps comme comme on a dit comme on a r répété young Stang Guy il y a toutes les ressources disponibles si vous voulez approfondir et euh et nous on se retrouve bah la semaine prochaine euh donc on sera pardon jeudi 23 mai 18h 19h pour pour l'épisode 3 et pour ceux qui veulent on a aussi un petit live entre-temps avec avec Thomas donc ce mardi entre 12h et 13h pour vous expliquer comment est-ce qu'on peut connecter un Hubspot euh à webf en 2024 c'est l'outil qui est enfin c'est c'est la demande la plus fréquente de nos clients donc c'est un live à suivre euh si vous avez jamais connecté spot à webfow il y a plusieurs méthodes on vous présentera l'ensemble des alternatives leurs avantages et leurs inconvénients et c'est un énorme CRM upspot et il y a de grandes chances que dans votre VI de développeur Webflow vous soyez amenés à avoir ce besoin cool cool ton t-shirt tiib il y a quand même une réflexion sur je sais pas si gaming tu connais l'histoire de ce t-shirt mais il a il a une vraie histoire ce t-shirt c'était c'était le branding digidp c'était une petite référence c'était c'était un t-shirt à l'époque de digidp et vu qu'aujourd'hui c'était un épisode sur les bases de Webflow on a remis les basicques de digidp pour pour ce live c'était le tout le tout premier merch à l'époque où il y avait pas encore des designers dans cétait on et tout c canons yes un collector mais peutêtreut-être qu'on en fera gagner un peut-être qu'on en fera gagner la we party C année tu sais quoi il y en a encore un ou de dans les placards en collectorou pendant un live de la formation pour ceux qui sont régulers écoutez encore merci à tous et bah passeer une bonne soirée puis à la semaine prochaine pour pour un nouvel épisode VO merci ciao tout le monde [Musique]