Cimer, 20 ans que je fais du HTML mais il faut bien se mettre à la page avec tous ces templates flex qu'on trouve partout :) J'en avais marre de voir des propriétés invalides. Je me souviens de l'époque où on était obligé de passer par des tableaux pour gérer la mise en page :D
Ahah oui les tableaux ca fait un baille oui mais heureusement qu'on a flex et grid maintenant parce qu'avec le responsive ca serait bien compliqué sans ^^
@@tutos-front-endil y avait des hacks CSS pour compenser heureusement et puis les media query ont bien aidé avec firebug mais c'est sur qu'il y a 20 ans c'était pas la même histoire, je me rappelle aussi des soucis avec toutes les vieilles versions de IE et même encore avant quand un simple hover ne fonctionnait pas correctement sur tous les navigateurs :D
@@Autoktone44 Oui ca serait compliqué maintenant sans nos nouveaux outils et si en plus on avait toujours des problèmes avec les navigateurs en plus de devoir gérer le responsive. Moi je crois que le hack qui m'avait marqué le plus était sur les inline-block avec le fameux whitespace 😆quand je ne comprenais pas d'où venait ce foutu espace alors que j'avais ni marge ni padding ^^
@@tutos-front-end même si c'est dur à appliquer quand quelque chose a un comportement anormal, il faut aussi parfois remettre en question ce qui nous parait bien fonctionner et dans ce genre de cas, on peut perdre tellement de temps si on se remet trop en question. Perso, c'est avec des librairies PDF que j'ai souvent eu des soucis de padding, margin incompréhensible. Mais d'une manière générale, les soucis viennent souvent de l'encodage et de la gestion des dates, bref, toujours des trucs qui vont pas fonctionner de toutes façons, il faut souvent trouver des alternatives ou alors faire des compromis si nécessaire. Et sinon, faire des tests façon Mastermind m'ont souvent bien aidé, autre vieille référence MDR tein qu'est ce que je dirai dans 20 ans :D !!! Bref en tous les cas, oui Flex et compagnie c'est bien, après faudrait pas non plus rendre tout ça trop générique car on en perdra le fil au bout d'un moment. Là aussi, il y a surement un compromis à trouver. Pour le reste, l'IA nous supplantera sur bien des sujets de toutes manières, mais c'est un autre sujet lol En tous les cas, au moins en informatique, on s'ennuie pas, il y a toujours des soucis à régler.
Ahah bah merci à toi. Et moi aussi je l'ai découvert tardivement parce que de mémoire je connaissais pour les grilles en CSS mais pas pour flexbox. Il me semble que pour flexbox c'est arrivé après mais je ne l'utilisais pas pensant que c'était exclusivement une propriété des grilles 😅
C'était la même chose pour moi, je trouvais ca tellement pratique avec les Grid, mais c'est parce que ca a été implémenté après pour flexbox il me semble. En tout cas ravis que l'astuce t'ai été utile 🙂
Oui dans certains cas. Si par exemple tu fixes la taille du conteneur, alors ca peut être intéressant un space between. Mais si elle n'est pas fixé il va tout te coller et la le gap est intéressant. En plus d'être sur de maîtriser la taille d'espacement que tu veux.
Merci pour les tips, j'était pas au courant pour la compatibilité gap et flex si seulement j'avais su ça plus tôt 😆 ! Ta chaîne est vraiment sympa et ton setup au poil 👌Je dirais pas non à un petit tuto sur les design patterns :3 😛
Merci 😁 Tu parles du setup micro fond vert ? Pour les design pattern c'est pas spécialement prévu pour tout de suite mais ca me donne des idées, je note. En attendant tu peux regarder de ce coté. Tu trouveras peut être ton bonheur : refactoring.guru/fr/design-patterns
Oui possible, le but n'était pas de dénigrer open classroom qui est une très belle plateforme. Mais je rencontrais souvent des élèves qui ne l'utilisaient pas alors qu'ils avaient l'habitude d'utiliser flexbox. C'est pour cette raison que j'avais décidé de faire cette vidéo 🙂
super tuto! j’ai juste eu mal aux yeux quand j’ai lu children avec un s. children est un pluriel, Child est le singulier. (petite remarque anodine ! ça n’enlève rien à la qualité du tutoriel
premiere vidéeo que je vois sur ta chaine et personnelement le css et le front end en général ca me FREINE a mort car je galere ( et j'ai tres peu d'idée) et quand je galere en css meme si je progresse sur un projet j'ai l'impression de jamais avancer... j'espere que tes vidéo von dédramatiser l'enfer mental que je me fait du css et du web design en general...
CSS est un langage facile dans son écriture mais très complexe dans son fonctionnement, quand on débute (et on est tous passé par là), on met souvent beaucoup de temps à comprendre pourquoi un élément réagi comme ci ou comme ca... C'est tout à fait normal, c'est comme le vélo, on au début on s'est tous pris des chutes, des plus ou moins belles ^^ et maintenant on fait du vélo sans réfléchir et certains même sur une roue, les mêmes qui tombaient lamentablement au début. CSS c'est pareil, la pratique reste la clé, à force CSS te paraitra simple 😉 Courage à toi et j'espère que mes vidéos pourront contribuer à ton apprentissage 😉
Ah ? My bad, j'irais revoir alors j'avais regardé juste avant de faire la vidéo et je n'avais pas vu. Mais j'ai du mal regarder. Quoiqu'il en soit j'en ai vu beaucoup ne pas connaitre cette propriété pour flexbox mais plutot pour grid. C'est pour ca que j'ai fait cette vidéo. Merci pour ton retour en tout cas :)
@@tutos-front-end en fait ils ont changé leurs cours en octobre ou novembre ça m'a fait flingue mon pourcentage de progression. De plus ils ont changé le site vitrine qui fait plus site de maintenant. Mais tu as raison gap c'est super pratique 👍
Je ne cherchais pas ici à corrigé le problème d'écart mais juste à montrer que quand on utilise flexbox on a une propriété gap qui peut être utile pour espacer des éléments plutôt que d'utiliser la propriété margin. Et j'ai fait cette vidéo parce que j'en ai vu souvent utilisé les margins (moi le premier ^^)
Je sais pas vous mais ça m'a effrayé de voir qu'avec un smartphone sous Android 8, la gap de la propriété flex n'a pas fonctionné. Alors oui, c'était un problème d'obsolescence de version de navigateur mais pour moi ça reste inquiétant. Je suis dans le flou quant à vérifier si les utilisateurs de navigateur dont la version la plus à jour date de 2020, ne représente réellement que 0.51% global (à l'heure où j'écris).
Vidéo très intéressante ! Cependant, la fonction gap n'existe pas sur mes fichier css, je ne sais pas si je suis le seul à rencontrer ce problème... Si vous avez une idée pour corriger ça, je suis preneur. Merci !
Merci 🙂 Gap est utilisable sur le conteneur flex, si il est bien sur le conteneur flex (autrement dit là ou vous avez mis "display : flex") et que vous avez plusieurs éléments, vous devriez retrouver cette espacement.
Salut ! C'est quoi l'extension pour avoir à côté le résultat ? Car live server m'ouvre une page chrome et me montre toute la page, toi uniquement ce que tu fais ?
Je ne suis pas d'accord px - em et rem sont 3 options possibles et en fonction des cas on utilisera l'un ou l'autre. Pour les tailles de polices oui rem ou em est recommandé notamment pour l'accessibilité. Mais clairement pour des marges padding ou autre c'est une erreur ou du moins ca ne doit pas être un réflexe. En tout cas ca me donne une bonne idée pour une vidéo en fait donc merci :)
Sur de très très vieux alors. Parce qu'on est clairement sur une propriété utilisable. Un score de 96% sur Can i Use. A moins de parler de navigateur qui ne prennent pas en compte flexbox comme IE 5. Mais plus personne ne prend en compte ce genre de navigateur. Même des géants comme Amazon il me semble ne se préoccupe plus des très anciens navigateurs comme IE 5 ou IE 6. C'est une bonne chose de se poser la question de la compatibilité mais attention à ne pas aller trop loin ^^ Sinon il faut considérer flexbox comme inutilisable et bon courage. J'ai connu cette époque et je n'ai pas vraiment envie d'y retourner 😅
J'aime bien ce que vous faites. N'arrêtez surtout pas !!!🎉
Ce n'est pas prévu 😄
Merci en tout cas 😉
Merci pour l'astuce. Et une barre de menu en display:flex en responsive. Vous avez ça en magasin.
Tu expliques trop bien ❤ merci beaucoup
Merci ca fait super plaisir 😊
top l'astuce, clair avec ou sans ça je sais que t'a tjrs des trucs d'enfer donc c'est like assuré👌
Merci Akil ca fait chaud au coeur ton commentaire 😉
Merci et bonne chance pour ta chaîne ❤
Merci à toi 😊
HYPER ENRICHISSANT ! C'est peut être un détail pour vous, mais pour moi ça veut dire beaucoup... !
Ahah merci ! Super la référence 😆
Ça veut dire qu'il était libre ?😅
@@SUPA93200 Heureux d'être là malgré tout 😄
Commentaire pour le référencement
T'es le meilleur !
Merci pour l'astuce :)
De rien 🙂
Tes vidéos sont vraiment top 👌👍
Merci beaucoup 😁
Cimer, 20 ans que je fais du HTML mais il faut bien se mettre à la page avec tous ces templates flex qu'on trouve partout :) J'en avais marre de voir des propriétés invalides. Je me souviens de l'époque où on était obligé de passer par des tableaux pour gérer la mise en page :D
Ahah oui les tableaux ca fait un baille oui mais heureusement qu'on a flex et grid maintenant parce qu'avec le responsive ca serait bien compliqué sans ^^
@@tutos-front-endil y avait des hacks CSS pour compenser heureusement et puis les media query ont bien aidé avec firebug mais c'est sur qu'il y a 20 ans c'était pas la même histoire, je me rappelle aussi des soucis avec toutes les vieilles versions de IE et même encore avant quand un simple hover ne fonctionnait pas correctement sur tous les navigateurs :D
@@Autoktone44 Oui ca serait compliqué maintenant sans nos nouveaux outils et si en plus on avait toujours des problèmes avec les navigateurs en plus de devoir gérer le responsive. Moi je crois que le hack qui m'avait marqué le plus était sur les inline-block avec le fameux whitespace 😆quand je ne comprenais pas d'où venait ce foutu espace alors que j'avais ni marge ni padding ^^
@@tutos-front-end même si c'est dur à appliquer quand quelque chose a un comportement anormal, il faut aussi parfois remettre en question ce qui nous parait bien fonctionner et dans ce genre de cas, on peut perdre tellement de temps si on se remet trop en question. Perso, c'est avec des librairies PDF que j'ai souvent eu des soucis de padding, margin incompréhensible. Mais d'une manière générale, les soucis viennent souvent de l'encodage et de la gestion des dates, bref, toujours des trucs qui vont pas fonctionner de toutes façons, il faut souvent trouver des alternatives ou alors faire des compromis si nécessaire. Et sinon, faire des tests façon Mastermind m'ont souvent bien aidé, autre vieille référence MDR tein qu'est ce que je dirai dans 20 ans :D !!! Bref en tous les cas, oui Flex et compagnie c'est bien, après faudrait pas non plus rendre tout ça trop générique car on en perdra le fil au bout d'un moment. Là aussi, il y a surement un compromis à trouver. Pour le reste, l'IA nous supplantera sur bien des sujets de toutes manières, mais c'est un autre sujet lol En tous les cas, au moins en informatique, on s'ennuie pas, il y a toujours des soucis à régler.
Juste Merci. Des années que je code et je découvre.
Ahah bah merci à toi. Et moi aussi je l'ai découvert tardivement parce que de mémoire je connaissais pour les grilles en CSS mais pas pour flexbox. Il me semble que pour flexbox c'est arrivé après mais je ne l'utilisais pas pensant que c'était exclusivement une propriété des grilles 😅
Ça vaut de l'or ça merci
Tout comme ton commentaire ! Un grand merci 😊
Je connaissais gap mais je pensais que c'était uniquement avec grid, merci pour l'astuce !
C'était la même chose pour moi, je trouvais ca tellement pratique avec les Grid, mais c'est parce que ca a été implémenté après pour flexbox il me semble.
En tout cas ravis que l'astuce t'ai été utile 🙂
@@tutos-front-end en vrai on peut faire la même chose avec space-around et space between mais c'est moins pratique je trouve
Oui dans certains cas. Si par exemple tu fixes la taille du conteneur, alors ca peut être intéressant un space between. Mais si elle n'est pas fixé il va tout te coller et la le gap est intéressant. En plus d'être sur de maîtriser la taille d'espacement que tu veux.
Merci beaucoup 🙏🏻
Merci à toi😊
Merci pour l'astuce au moins je ne vais plus galérer pour le positionnement 😁😁
Avec plaisir 😁
très très belle vidéo, je me suis abonné direct
Merci et bienvenue 😊
merci pour l'astuce ca va me changer la manière de faire
Avec plaisir 🙂
Merci pour tes conseils précieux
Avec plaisir 😊
Merci beaucoup pour l'astuce !
De rien 😁
Merci pour les tips, j'était pas au courant pour la compatibilité gap et flex si seulement j'avais su ça plus tôt 😆 ! Ta chaîne est vraiment sympa et ton setup au poil 👌Je dirais pas non à un petit tuto sur les design patterns :3 😛
Merci 😁
Tu parles du setup micro fond vert ?
Pour les design pattern c'est pas spécialement prévu pour tout de suite mais ca me donne des idées, je note.
En attendant tu peux regarder de ce coté. Tu trouveras peut être ton bonheur : refactoring.guru/fr/design-patterns
super video !
Merci 😀
merci pour l'astuce c'est top!
De rien 😁
Merci beaucoup, si vous pouvez faire quelques astuces aussi pour javascript, sa serai vraiment cool Merci
Merci!
De rien
Merci
thanks good tips
Thanks bro 😉
❤❤❤❤
Merci! Super efficace masha'allah
Merci à toi 🙂
Faire sur container justify content ou aligned item a center margin:auto et gap ce que en veut
Merci 😎
De rien 😉
super
😊
merci.
De rien
Comme la vidéo a un an , mais je viens tout juste de l'apprendre sur open classroom
Oui possible, le but n'était pas de dénigrer open classroom qui est une très belle plateforme. Mais je rencontrais souvent des élèves qui ne l'utilisaient pas alors qu'ils avaient l'habitude d'utiliser flexbox. C'est pour cette raison que j'avais décidé de faire cette vidéo 🙂
super tuto! j’ai juste eu mal aux yeux quand j’ai lu children avec un s. children est un pluriel, Child est le singulier. (petite remarque anodine ! ça n’enlève rien à la qualité du tutoriel
Roh mon dieu, tu as raison ! Merci pour ta remarque, parce qu'honnêtement j'ai dû faire l'erreur ailleurs également, ça ne fait pas sérieux ^^
Merci et à la prochaine
De rien 😉
Thank y guy
Thx dude ! 😉
premiere vidéeo que je vois sur ta chaine et personnelement le css et le front end en général ca me FREINE a mort car je galere ( et j'ai tres peu d'idée) et quand je galere en css meme si je progresse sur un projet j'ai l'impression de jamais avancer... j'espere que tes vidéo von dédramatiser l'enfer mental que je me fait du css et du web design en general...
CSS est un langage facile dans son écriture mais très complexe dans son fonctionnement, quand on débute (et on est tous passé par là), on met souvent beaucoup de temps à comprendre pourquoi un élément réagi comme ci ou comme ca... C'est tout à fait normal, c'est comme le vélo, on au début on s'est tous pris des chutes, des plus ou moins belles ^^ et maintenant on fait du vélo sans réfléchir et certains même sur une roue, les mêmes qui tombaient lamentablement au début. CSS c'est pareil, la pratique reste la clé, à force CSS te paraitra simple 😉
Courage à toi et j'espère que mes vidéos pourront contribuer à ton apprentissage 😉
merci beaucoup ca me rassure
@@tutos-front-end
super utile mercii pour l'astuce 😁
Avec plaisir 😁
Merci l'ami
De rien 😉
Le fameux !
Slt je suis actuellement sur le cours HTML CSS d'openclassroom et dans le chapitre flexbox ils en parlent pour ajuster les éléments .👍
Ah ? My bad, j'irais revoir alors j'avais regardé juste avant de faire la vidéo et je n'avais pas vu. Mais j'ai du mal regarder. Quoiqu'il en soit j'en ai vu beaucoup ne pas connaitre cette propriété pour flexbox mais plutot pour grid. C'est pour ca que j'ai fait cette vidéo. Merci pour ton retour en tout cas :)
@@tutos-front-end en fait ils ont changé leurs cours en octobre ou novembre ça m'a fait flingue mon pourcentage de progression. De plus ils ont changé le site vitrine qui fait plus site de maintenant. Mais tu as raison gap c'est super pratique 👍
@@fbfb9049 Tu veux dire qu'ils ont changé le cours après avoir vu ma vidéo ??? Ahah 😆
@@tutos-front-end possible 😅
dans ton premier exemple border-box ou display flex corrige pas justement cette écart du au margin ? il me semble.
Je ne cherchais pas ici à corrigé le problème d'écart mais juste à montrer que quand on utilise flexbox on a une propriété gap qui peut être utile pour espacer des éléments plutôt que d'utiliser la propriété margin. Et j'ai fait cette vidéo parce que j'en ai vu souvent utilisé les margins (moi le premier ^^)
Je sais pas vous mais ça m'a effrayé de voir qu'avec un smartphone sous Android 8, la gap de la propriété flex n'a pas fonctionné. Alors oui, c'était un problème d'obsolescence de version de navigateur mais pour moi ça reste inquiétant. Je suis dans le flou quant à vérifier si les utilisateurs de navigateur dont la version la plus à jour date de 2020, ne représente réellement que 0.51% global (à l'heure où j'écris).
Vidéo très intéressante ! Cependant, la fonction gap n'existe pas sur mes fichier css, je ne sais pas si je suis le seul à rencontrer ce problème... Si vous avez une idée pour corriger ça, je suis preneur. Merci !
Merci 🙂
Gap est utilisable sur le conteneur flex, si il est bien sur le conteneur flex (autrement dit là ou vous avez mis "display : flex") et que vous avez plusieurs éléments, vous devriez retrouver cette espacement.
Salut ! C'est quoi l'extension pour avoir à côté le résultat ? Car live server m'ouvre une page chrome et me montre toute la page, toi uniquement ce que tu fais ?
Il s'agissaitt de l'extension Browser Preview mais elle est actuellement dépréciée au profite de "live preview" 😉
gap... je l'ai decouvert en utilisant tailwind css gap-x et gap-y
Ah comme quoi les frameworks CSS peuvent aussi nous apprendre les bonnes pratiques ^^
😁
La norme c'est rem maintenant
Je ne suis pas d'accord px - em et rem sont 3 options possibles et en fonction des cas on utilisera l'un ou l'autre. Pour les tailles de polices oui rem ou em est recommandé notamment pour l'accessibilité. Mais clairement pour des marges padding ou autre c'est une erreur ou du moins ca ne doit pas être un réflexe. En tout cas ca me donne une bonne idée pour une vidéo en fait donc merci :)
Oula non
C’est bien gap mais sur des vieux appareils ça n’est pas pris en compte 😓
Sur de très très vieux alors. Parce qu'on est clairement sur une propriété utilisable. Un score de 96% sur Can i Use. A moins de parler de navigateur qui ne prennent pas en compte flexbox comme IE 5. Mais plus personne ne prend en compte ce genre de navigateur. Même des géants comme Amazon il me semble ne se préoccupe plus des très anciens navigateurs comme IE 5 ou IE 6. C'est une bonne chose de se poser la question de la compatibilité mais attention à ne pas aller trop loin ^^ Sinon il faut considérer flexbox comme inutilisable et bon courage. J'ai connu cette époque et je n'ai pas vraiment envie d'y retourner 😅
Le CSS pour moi a toujours rimé avec enfer ! 🤣
Merci beaucoup 🎉
Avec plaisir 😊
Merci!
De rien 🙂
Merci pour l'astuce ✌️😁
Avec plaisir 😁
merci
Avec plaisir
Merci 😊
Avec plaisir 😊