WoW! Je suis une formartion open-classroom et je comprenais rien aux utilisations de flexbox. Maintenant grâce à ta vidéo je comprend le raisonnement derrière merci!
salut leo suis entrain d'apprendre le html/ css et jai debuté le php en solo depuis le confinement ...je me tate a prendre une formation o clock. me la conseille tu ? ou alors est ce que d'apres toi je peux continuer en autodidacte via youtube et les site web?
@@antoinegodin4229 bonne question, tout depend de ce que tu appelle avoir des notions en php, est-ce que tu sais gerer une session, des appelles BDD, du dynamisme de données, non pas que ce soit grave de pas connaître ça selon le temps que tu y as passé, et c'est surtout selon tes objectifs, si tu veux devenir développeur "rapidement" ou si tu as le temps, la formation oclock je la recommande à 100% car super pro tres pedagogique, l'entraide est presente et les profs sont là pour t'aider et te faire progresser, si tu es sur d'avoir une bonne base en html css php et js, tu peux passer direct à l'étape de la spécialisation chez eux, en ne faisant donc pas le socle, mais encore une fois c'est selon ce que tu sais faire à l'heure actuelle et tes impératifs
Graphikart, je tiens à te dire que FlexBox et ton tuto, vous venez de me debugger mon code ou j'étais bloquer depuis + d'une heure ! Merci beaucoup pour tout tes tutos !
Merci Grafikart pour tout ce que tu fais , je serais le enieme à te remercier mais plus je progresse grace à tes vidéos et conseils , plus je me sens obliger de ne pas me contenter de mettre un simple pouce bleu, meme si malgré tout ce commentaire me semble bien dérisoire comparé au travail et temps que tu consacres à ces vidéos pour nous aider
je bug sur flexbox depuis quelque jours ( avec aussi les absolute relativ float etc...), jai maté plein de tuto ( de openclassrooms ainsi que plusieurs chaines youtube) , je peux te dire que tu as la meilleure explication :) super tutoriel merci a toi je vais te suivre et m'abonné :)
Salut tuto intéressant surtout que je suis en formation mais le souci c'est que tu est trop speed quand tu fait un tuto va doucement pour qu'on voit ou tu clique et aussi parle lentement on comprends mieux faut penser que les personnes qui regarde débute mais merci pour ta vidéo.
Super cool comme tuto, même si tu n'as pas parlé de l'impact d'un changement de direction (quand tu le passes en column) sur les autres propriétés flex. ^^
Hello, super ce tuto. dans la première partie de ton tuto (10 premières minutes), tu parles précisément d'un cas que j'ai mis en pratique la semaine dernière. Je n'ai juste pas réussi à aligner les éléments de la dernière ligne à gauche avec un espace similaire aux lignes du dessus, dans le cas où ils ne seraient pas au nombre prévu sur les premières lignes. Je précise : 2 premières lignes de 4 élements (calé à gauche, calé à droite avec un espace équitable : display: flex; flex-wrap: wrap; justify-content: space-between; ). mais la dernière ligne si il elle n'a que 2 éléments, ils vont se caler à gauche à droite et rien au milieu, donc pas beau, pas logique. Comment calerais-tu les éléments de cette dernières ligne à gauche (avec le même espace qu'au dessus donc) ? En espérant être assez clair... :)
t'es un boss XD je me met au html/css depuis 3 jours j'ai du mal a tout retenir mais tu explique très bien et surtout tu utilise les bons mots, juste une chose peut tu préciser les raccourcis que tu utilise ? avec une image sur le coté ou le nom des touches que tu appuies ? C'est vraiment cool d'avoir accès a ce savoir qui plus est en français :D je m'abonne immédiatement tu fait du bon taff ! :D
Salut! Enfin je tombe sur un tutoriel super intéressant sur la Flexbox ! Désormais, j'ai ce qu'il faut pour affronter le responsive. MERCI Grafikart!!!!!!! J'aurai juste une question: quand tu fais le menu horizontal tu lui mets juste une heigth: 60px et tu centres les éléments. Jusque là je comprends. Mais comment est-ce que le conteneur fait-il pour occuper toute la largeur de l'écran? J'ai hâte de lire ta réponse. Merci
Super Tuto comme toujours. (j'ai énormement appris avec toi depuis deux mois) J'ai une requête . Une Serie de tuto sur Java Edition Entreprise JEE serai d'une grande aide pour nous. Merci
Hello, merci ! J'avais commencer à lire via un site mais à l'utilisation ça donnait vraiment rien. En tout cas, je pense que je vais mieux m'en sortir mais je vais continuer à regarder :-)
Super vidéo :) Pouvez-vous lister les extensions que vous utilisez pour visual studio code ? je suis intéressé en particulier par celle que vous utilisez à 14:45 Merci d'avance !
Dans cette vidéo j'utilise un autre éditeur mais vous pouvez faire la même chose dans Visual studio code en maintenant Shift + Alt et en sélectionnant avec le curseur
J'étais tombé sur un site du style de code combat mais uniquement pour ces règles. Il me semble que ça s'appelait flex frog ou un truc du genre. C'était vraiment sympa comme truc.
génialissime ! merci ! juste une question ! quel est l'outil que tu utilises pour afficher la taille des images en pixels juste avec ton curseur ? ça me serais utile !!
je crois que avec le menu de développement (F12) tu peut afficher la taille en pixel d'une image en utilisant le raccourci clavier ctrl+shift.+C et en passant le curseur sur ton image
Bonjour, Quelle est le live reload que tu utilises pour pouvoir actualiser après la sauvegarde de fichier et voir tout de suite sur chrome ? J'utilise flo.js mais ce qui me dérange c'est de devoir toujours avec la console développeur ouverte ( F12) ! Help please thks !
Salut. J'ai failli l'utiliser il y a plusieurs mois pour un client mais le fait qu'il n'est pas ou mal supporté par Internet Explorer 9 et 10 m'a rebuté. C'est vrai qu'en termes de syntaxes, c'est bluffant. Bref, très bonne vidéo bien expliquée comme d'habitude.
Normalement, il utiliser un live serveur local lancé depuis son éditeur de texte. Check le lien de sa page: localhost:3003 Beaucoup d'éditeur propose cette option, il suffit d'installer l'extension live server par exemple.
Salut, merci pour ta vidéo ! Je voulais juste savoir comment tu affiches la taille de ta fenêtre en px en haut a droite de celle-ci ? Je te remercie :)
Je ne comprend pas un truc, c'est quoi cette syntaxe?? Pas du Chtemele en tous cas, à peine et un peu CSS .. Mais ça me semble trop simple.. peut on charger réellement des images? et faire un footer qui se déplace en fonction du contenu? C'est un plugin? pour quelque chose ou un stand only..
bonjour, j'aimerais centrer un élement sans que d'autre sois affecté par sa postion, c'est a dire qu'ils peuvent passer par dessous si ils veulent vu qu'ils pensent que l'objet centrer n'existe pas , et l'objet centrer de ma div doit etre vraiment centrer du coup . Du coup surement sortir de l'alignement et changer le z-index mais cela ne marche pas -_-# . le css m'enmerde !
au passage, je trouve que les noms des propriétés Flexbox ont vraiment été mal choisis :/ pourquoi flex-start et pas juste "start", pourquoi avoir un préfix flex dans certains cas et pas dans d'autres, pourquoi avoir justify-content et align-content pour respectivement désigner l'alignement vertical puis horizontal ? même s'il me semble que pour être exacte c'est plutôt l'axe primaire puis secondaire en fonction de ce qu'on a choisis pour flex-direction... Bref c'est fouilli quoi
Ahah compl!tement d'accord. En fait ces propriétés servent aussi au grilles du coup je pense qu'ils ont voulu des noms génériques pour supporter de futur système de layout.
Bon j'avoue j'ai du te regarder en vitesse 0.75 j'ai trouver que tu aller et que tu parler assez vite avec le ralentissement on dirais juste t'est un peu bourrer sinon sa allez nickel xD
merci pour toutes ces superbes videos en Fr! je debute et du coup je cherche conseil... vaut il mieux apprendre et adopter bootstrap4 ou CSS flex pour les mises en pages responsive? (ou les2?)
Les deux, puisque Bootstrap 4 intègre la logique des flexbox. A mon avis, bien maitriser les flexbox permettra d'avoir certaines notions indispensables pour utiliser au mieux Bootstrap 4.
@grafikart Pourquoi séparer le body et le sidebar sur la page vu que sémantiquement ce dernier est contenu par le premier par définition. Je suis pas fan de cette façon de faire même si dans l'ensemble tu expliques bien!
WoW! Je suis une formartion open-classroom et je comprenais rien aux utilisations de flexbox. Maintenant grâce à ta vidéo je comprend le raisonnement derrière merci!
Abuse pas
@@darshank8748 ??
t'es un dingue avec les flexbox on voit que t'es vraiment CHAUD CHAUD CHAUD :) bien joué , super tuto rapide efficace :)
t'es un boss, tu augmente ma progression pendant ma formation (o'clock) d'un bon 75% c'est fou
Leo G hey 🖥👀
@@saralouazo8928 ?
salut leo suis entrain d'apprendre le html/ css et jai debuté le php en solo depuis le confinement ...je me tate a prendre une formation o clock. me la conseille tu ? ou alors est ce que d'apres toi je peux continuer en autodidacte via youtube et les site web?
@@antoinegodin4229 bonne question, tout depend de ce que tu appelle avoir des notions en php, est-ce que tu sais gerer une session, des appelles BDD, du dynamisme de données, non pas que ce soit grave de pas connaître ça selon le temps que tu y as passé, et c'est surtout selon tes objectifs, si tu veux devenir développeur "rapidement" ou si tu as le temps, la formation oclock je la recommande à 100% car super pro tres pedagogique, l'entraide est presente et les profs sont là pour t'aider et te faire progresser, si tu es sur d'avoir une bonne base en html css php et js, tu peux passer direct à l'étape de la spécialisation chez eux, en ne faisant donc pas le socle, mais encore une fois c'est selon ce que tu sais faire à l'heure actuelle et tes impératifs
@@leog7277 merci de ta réponse leo je pense que je vais commencer la formation en juillet :)
Graphikart, je tiens à te dire que FlexBox et ton tuto, vous venez de me debugger mon code ou j'étais bloquer depuis + d'une heure ! Merci beaucoup pour tout tes tutos !
Merci Grafikart pour tout ce que tu fais , je serais le enieme à te remercier mais plus je progresse grace à tes vidéos et conseils , plus je me sens obliger de ne pas me contenter de mettre un simple pouce bleu, meme si malgré tout ce commentaire me semble bien dérisoire comparé au travail et temps que tu consacres à ces vidéos pour nous aider
je bug sur flexbox depuis quelque jours ( avec aussi les absolute relativ float etc...), jai maté plein de tuto ( de openclassrooms ainsi que plusieurs chaines youtube) , je peux te dire que tu as la meilleure explication :) super tutoriel merci a toi je vais te suivre et m'abonné :)
j'ai du mettre la vidéo en lecture 0,75 tellement t'es speed x)
moi aussi mails tellement il explique bien que j ai tenu bon de terminer ma lecture ;)
Je kiffe la chemise en accord avec la miniature, du CSS de haut niveau ça :p
Le mec qui parle couramment le CSS.
Merci ! Un tutoriel super bien expliqué sur un système d'affichage tellement puissant! wow !
Ca donne un peu le mal de mer ces remonté et descente de page mais le tuto est très instructif ! Bravo et merci !
je regarde tellement de tuto de dev web que parfois j'ai l'impression que la pub pour WIX c'est ton générique...
xD
Tu sait Ad Blocker sa existe x)
mdr
😂
Salut tuto intéressant surtout que je suis en formation mais le souci c'est que tu est trop speed quand tu fait un tuto va doucement pour qu'on voit ou tu clique et aussi parle lentement on comprends mieux faut penser que les personnes qui regarde débute mais merci pour ta vidéo.
Franchement, il est trop fort
Merci...super clair. Un peu rapide par moment mais il suffit de revenir en arrière.
Super cool comme tuto, même si tu n'as pas parlé de l'impact d'un changement de direction (quand tu le passes en column) sur les autres propriétés flex. ^^
Je connaissais pas du tout Flex, mais c'est génial ! Je suis fan.
***** Oh non je touche plus au développement web depuis un moment, mais j'essaie de suivre ce qu'il y a de nouveau, ça facilite pas mal la vie.
Merci beaucoup !
Plein d'infos, merci. SI je puis me permettre, sur celui-là c'est super speed...
Merci pour cette vidéo, j'ai enfin compris après des semaines d'essais hasardeux ...
Hello, super ce tuto. dans la première partie de ton tuto (10 premières minutes), tu parles précisément d'un cas que j'ai mis en pratique la semaine dernière. Je n'ai juste pas réussi à aligner les éléments de la dernière ligne à gauche avec un espace similaire aux lignes du dessus, dans le cas où ils ne seraient pas au nombre prévu sur les premières lignes.
Je précise : 2 premières lignes de 4 élements (calé à gauche, calé à droite avec un espace équitable : display: flex; flex-wrap: wrap; justify-content: space-between; ). mais la dernière ligne si il elle n'a que 2 éléments, ils vont se caler à gauche à droite et rien au milieu, donc pas beau, pas logique. Comment calerais-tu les éléments de cette
dernières ligne à gauche (avec le même espace qu'au dessus donc) ? En espérant être assez clair... :)
TRES TRES TRES BON TUTO FLEXBOX
Super!!! bien expliqué comme toujours Merci
t'es un boss XD je me met au html/css depuis 3 jours j'ai du mal a tout retenir mais tu explique très bien et surtout tu utilise les bons mots, juste une chose peut tu préciser les raccourcis que tu utilise ? avec une image sur le coté ou le nom des touches que tu appuies ? C'est vraiment cool d'avoir accès a ce savoir qui plus est en français :D je m'abonne immédiatement tu fait du bon taff ! :D
T’es à quel niveau ?
Salut! Enfin je tombe sur un tutoriel super intéressant sur la Flexbox ! Désormais, j'ai ce qu'il faut pour affronter le responsive. MERCI Grafikart!!!!!!!
J'aurai juste une question: quand tu fais le menu horizontal tu lui mets juste une heigth: 60px et tu centres les éléments. Jusque là je comprends. Mais comment est-ce que le conteneur fait-il pour occuper toute la largeur de l'écran? J'ai hâte de lire ta réponse. Merci
Open classroom devrait acheter les droits de tes vidéos et les mettre sur leur site parce que tu expliques beaucoup mieux.
Super Tuto comme toujours. (j'ai énormement appris avec toi depuis deux mois)
J'ai une requête . Une Serie de tuto sur Java Edition Entreprise JEE serai d'une grande aide pour nous. Merci
Grafikart ne fais pas de Java donc je pense pas qu'il fasse de vidéo dessus ^^
Merci beaucoup pour cette video
merci pour ce cours !
Hello, merci !
J'avais commencer à lire via un site mais à l'utilisation ça donnait vraiment rien.
En tout cas, je pense que je vais mieux m'en sortir mais je vais continuer à regarder :-)
Merci beaucoup ! :)
Super vidéo :) Pouvez-vous lister les extensions que vous utilisez pour visual studio code ? je suis intéressé en particulier par celle que vous utilisez à 14:45 Merci d'avance !
Salut, moi aussi je cherche cette extension !!!
Dans cette vidéo j'utilise un autre éditeur mais vous pouvez faire la même chose dans Visual studio code en maintenant Shift + Alt et en sélectionnant avec le curseur
@@grafikart Un grand merci pour la réponse (et rapide en plus :D)
merci beaucoup meileur tuto
J'étais tombé sur un site du style de code combat mais uniquement pour ces règles. Il me semble que ça s'appelait flex frog ou un truc du genre. C'était vraiment sympa comme truc.
Voici: flexboxfroggy.com
C'est ça, merci ☺
génialissime ! merci ! juste une question ! quel est l'outil que tu utilises pour afficher la taille des images en pixels juste avec ton curseur ? ça me serais utile !!
je crois que avec le menu de développement (F12) tu peut afficher la taille en pixel d'une image en utilisant le raccourci clavier ctrl+shift.+C et en passant le curseur sur ton image
"Oh miracle" 22:14
En tout cas, super vidéo !
super tuto comme toujours mais j'ai du le voir 3 fois en coupant souvent car tu vas trop vite ^^ sinon impec les explications
cest vraiment incroyable
Bonjour,
Quelle est le live reload que tu utilises pour pouvoir actualiser après la sauvegarde de fichier et voir tout de suite sur chrome ?
J'utilise flo.js mais ce qui me dérange c'est de devoir toujours avec la console développeur ouverte ( F12) !
Help please thks !
Ca utilise plus Lorempicsum ? :p
Salut. J'ai failli l'utiliser il y a plusieurs mois pour un client mais le fait qu'il n'est pas ou mal supporté par Internet Explorer 9 et 10 m'a rebuté. C'est vrai qu'en termes de syntaxes, c'est bluffant. Bref, très bonne vidéo bien expliquée comme d'habitude.
Il y a certainement des polyfill pour aider à la comptabilité avec IE. ^^
Avec Modernizr, cela semble possible également de régler son compte à IE ;)
Merci pour l'idée en tout cas.
Bonne video merci, mais c'est quel IDE que vous utilisez ?
Dans cette vidéo j'utilise IntellijIDEA
merci
Tu utilises quoi comme logiciel pour éditer ton code ? il a l'air vachement bien ! merci
Ici il utilise l'IDE IntelliJ. :)
salut, pourquoi mettre le ".mosaic" et le ".mosaic img" se sont pas les même ? c'est quoi la différence ?
Cool
Excellente vidéo !
*Salut merci vraiment beaucoup j'ai une petite question, comment fais tu pour reload ta page en même temp que tu code !*
Normalement, il utiliser un live serveur local lancé depuis son éditeur de texte. Check le lien de sa page: localhost:3003
Beaucoup d'éditeur propose cette option, il suffit d'installer l'extension live server par exemple.
Salut,
Pour les menu j'ai essayé avec les sous menu mais les sous menu ne suivent pas, je ne sais pas trop comment faire ?
Merci
Salut, merci pour ta vidéo !
Je voulais juste savoir comment tu affiches la taille de ta fenêtre en px en haut a droite de celle-ci ?
Je te remercie :)
C'est chrome qui l'affiche quand j'utilise l'inspecteur, me semble pas avoir activé qqchose en particulier :(
@@grafikart tu es le best !
@@grafikart
Niquel la réponse rapide ! Merci Grafikart ça fonctionne :)
Je ne comprend pas un truc, c'est quoi cette syntaxe?? Pas du Chtemele en tous cas, à peine et un peu CSS .. Mais ça me semble trop simple.. peut on charger réellement des images? et faire un footer qui se déplace en fonction du contenu?
C'est un plugin? pour quelque chose ou un stand only..
Non ce n'est pas un plugin, c'est du CSS simple. cf : developer.mozilla.org/en-US/docs/Web/CSS/flex
Merci !
Super tuto !
Grand grand merci!
j'ai un probleme avec le flex dès que je l'utilise, j'ai ma balise qui apparait dans le navigateur !
Merci.
bonjour, j'aimerais centrer un élement sans que d'autre sois affecté par sa postion, c'est a dire qu'ils peuvent passer par dessous si ils veulent vu qu'ils pensent que l'objet centrer n'existe pas , et l'objet centrer de ma div doit etre vraiment centrer du coup . Du coup surement sortir de l'alignement et changer le z-index mais cela ne marche pas -_-# .
le css m'enmerde !
super bien expliqué merci beaucoup :p
You're a Beast... Man!!!
Suuuper mn frère !!! :Like:
Super tuto :) Merci
au passage, je trouve que les noms des propriétés Flexbox ont vraiment été mal choisis :/ pourquoi flex-start et pas juste "start", pourquoi avoir un préfix flex dans certains cas et pas dans d'autres, pourquoi avoir justify-content et align-content pour respectivement désigner l'alignement vertical puis horizontal ? même s'il me semble que pour être exacte c'est plutôt l'axe primaire puis secondaire en fonction de ce qu'on a choisis pour flex-direction... Bref c'est fouilli quoi
Ahah compl!tement d'accord. En fait ces propriétés servent aussi au grilles du coup je pense qu'ils ont voulu des noms génériques pour supporter de futur système de layout.
02:55 Non, pour moi par défaut les éléments sont alignés en ligne. On voit bien à 03:07 que quand tu tapes flex-direction: row; rien ne bouge.
flex-direction:row; est la valeur par défaut. "row=ligne". Donc c'est normalement que cela ne change rien.
@@tech-info69 à 02:55 il dit en colonne par défaut, j'ai vite compris que c'était un mot mod "reverse" :-). A moins que je me trompe
Bon j'avoue j'ai du te regarder en vitesse 0.75 j'ai trouver que tu aller et que tu parler assez vite avec le ralentissement on dirais juste t'est un peu bourrer sinon sa allez nickel xD
CIMER
c'est cool
Cest du html4 right?
HTML5
flexbox support for IE ?
IE11 support is a bit broken, you can readd more about it here : caniuse.com/#search=flexbox
merci pour toutes ces superbes videos en Fr!
je debute et du coup je cherche conseil... vaut il mieux apprendre et adopter bootstrap4 ou CSS flex pour les mises en pages responsive? (ou les2?)
Les deux, puisque Bootstrap 4 intègre la logique des flexbox. A mon avis, bien maitriser les flexbox permettra d'avoir certaines notions indispensables pour utiliser au mieux Bootstrap 4.
merci
Qui est là grâce à Aurélie ?
placehold it n'est plus disponible en 2024, c'est pour cela je n'ai pas continuer le cours
Ce n'est pas génant pour suivre cette vidéo. Si tu veux des images temporaire tu peux utiliser picsum.photos/ à la place.
@@grafikart merci
Complet mais tellement peu pédagogique...
Personne n’oblige à regarder
Cette vidéo pour le coup on voit quelle est vielle et que tu la fais à coté des autres... je comprends plus... j'y reviendrai plus tard...
O o,ok
Indispensable!
@grafikart Pourquoi séparer le body et le sidebar sur la page vu que sémantiquement ce dernier est contenu par le premier par définition. Je suis pas fan de cette façon de faire même si dans l'ensemble tu expliques bien!
trop rapide
Bien mais tu parle trop rapidement .
Mieux
Merci !