Maroufle ton CSS avec Flexbox et CSS-Grid ! (Amélie Benoit)

Поделиться
HTML-код
  • Опубликовано: 6 май 2019
  • Vous galérez encore à centrer vos éléments verticalement ou à avoir une version responsive de la disposition de vos éléments dans une page ? Vous utilisez encore des librairies externes comme bootstrap pour le layout ? Arrêtez tout ! Flexbox et CSS-grid sont faits pour vous. Intégrés nativement, Flexbox permet de gérer la disposition des éléments de votre page, tandis que CSS-grid permet de créer des layouts. Ces deux modules vont simplifier votre HTML, votre CSS, et donc votre vie !
  • НаукаНаука

Комментарии • 33

  • @kevingerola7215
    @kevingerola7215 5 лет назад +11

    Content de m'être perdu sur youtube ce soir! Ça m'aide énormément dans la compréhension de flexbox et gris. En tout cas c'est le feu!

  • @domaincontroller
    @domaincontroller 4 года назад +14

    03:20 float
    05:03 flexbox
    14:39 css grid

  • @ggousier
    @ggousier 4 года назад +5

    Tellement vrai ce qu'elle raconte sur le CSS d'avant ^^ . L'impression de bidouillage et bricolage permanent. Tout ça m'avait fait haïr le CSS. Je sens que les temps ont changé ;) Je vais regarder cette vidéo avec la plus grande attention. :)

  • @jonathanles7699
    @jonathanles7699 2 года назад +1

    très bonne explication de flexbox et grid je pêchai depuis un petit temps dessus merci pour cette clarté

  • @web-atelier
    @web-atelier 4 года назад +3

    Super explication simple et claire de flexbox, merci.
    Laurent.

  • @Isa-dq4jw
    @Isa-dq4jw 2 года назад +2

    Une pépite ! Merci pour cette excellente intervenante et vidéo ! Merci 🙏🙏🙏

    • @ameliebenoit2871
      @ameliebenoit2871 2 года назад +1

      Aaw merci Isa, ça fait super plaisir ! 😊

  • @MrDavidz66
    @MrDavidz66 3 года назад +2

    Ton approche simple et tes explications de flexbox vont m'aider...
    M'étant formé seul sur le net,j'ai créé un site et je me suis concentré que sur le modèle "grid"(plus simple a se représenter je trouve) mais j'ai des difficultés avec la partie responsive(media query...)...,ton explication des flexbox vont peut être m'aider du coup.merci

  • @sacavin3942
    @sacavin3942 3 года назад +4

    Juste un mot, "parfait"

  • @thomash7247
    @thomash7247 3 года назад +1

    Merci pour ce cours de qualité.

  • @stoyannvelten5231
    @stoyannvelten5231 3 года назад +2

    j ai applaudit a la fin tellement cela m aide

    • @ameliebenoit2871
      @ameliebenoit2871 3 года назад

      hahaha j'aurai aimé voir ça !! Contente que ça t'ait aidé :D

  • @TomCodeur
    @TomCodeur 4 года назад +1

    Excellente présentation !

  • @issaoumarou2419
    @issaoumarou2419 3 года назад +1

    Parfait.. vraiment excellent

  • @MrTompitch
    @MrTompitch 3 года назад +1

    On est loin des et des float: left 😂
    On oublie Bootstrap, on profite de la joie de flexbox et CSS Grid, ça change la vie !
    Super présentation !
    Merci

  • @_Greenflag_
    @_Greenflag_ 2 года назад +1

    Bonne conférence
    Juste peut-être un peu plus d'exemples de Grid : )

  • @mathilde1537
    @mathilde1537 3 года назад

    et quand c'est pas compatible avec IE, etc, comment kon fait ?
    non sérieusement comment faire pour asseoir la compatibilité avec tous les navigateurs ? merci de votre aide !!

  • @christophec8589
    @christophec8589 5 лет назад +3

    Merci pour le brillant talk
    Les Slides sont ici : github.com/abenoit/flexbox-cssgrid/blob/master/Maroufle%20ton%20CSS.pdf

    • @ameliebenoit2871
      @ameliebenoit2871 5 лет назад +1

      Ça fait plaisir ! Merci beaucoup Christophe :D
      Et merci aussi pour le partage des slides !!

    • @christophec8589
      @christophec8589 5 лет назад +1

      @@ameliebenoit2871 Mais de rien. La demo fut très très claire. Je me suis dit pourquoi suis-je encore à faire mes layouts avec des trucs à 12 colonnes ?

  • @nounjopagnol1299
    @nounjopagnol1299 5 лет назад +1

    entre flex et grid que nous conseillez vous?

    • @kevingerola7215
      @kevingerola7215 5 лет назад +2

      Si vous regardez en entier son avis est donné à la fin !

    • @ameliebenoit2871
      @ameliebenoit2871 4 года назад +2

      Bonjour ! Comme je l'explique dans la vidéo (à la fin essentiellement), cela dépend pas mal des cas et des contraintes !
      Dans le cas d'une répartition d'éléments sur une ligne ou une colonne, Flexbox suffit généralement. Grid peut-être utilisé pour des layouts plus complexes et / ou sur deux dimensions :)

    • @nicolasgrenier5808
      @nicolasgrenier5808 4 года назад

      Grid peut tout à fait remplacer flexbox, c’est plus puissant, mais ceux qui connaissent flexbox aiment bien le marier avec grid, parce qu’ils trouvent que c’est un beau mariage.

    • @minute_illimitee
      @minute_illimitee 3 года назад

      Commence par utiliser une grille et dans les parties de ta grille tu peux utiliser des flexbox .

    • @ameliebenoit2871
      @ameliebenoit2871 3 года назад

      @@nicolasgrenier5808 J'ai récemment trouvé un cas ou Grid ne peut se substituer a Flexbox; Par exemple avec une grille avec un nombre d'items et de colonnes dynamiques, et si l'on souhaite distribuer l'espace du tableau sur la dernière ligne dans le cas ou on a moins d'items restants que de colonnes. C'est assez spécifique, mais lorsqu'il s'agit d'allouer de l'espace dynamiquement, on peut se retrouver bloqué par la "rigidité" des colonnes.
      Dans tous les cas, utilisez ce qui fonctionne le mieux pour votre besoin et pour vous. Le but est d'avoir un design solide et un code clair / maintenable à la fin 😄

  • @joelpoudiougo7447
    @joelpoudiougo7447 4 года назад +1

    Les femmes sont merveilleuses

  • @marsouin48
    @marsouin48 3 года назад

    Pédagogie bof ! Cours magistral peu adapté à ce type de formation...

    • @ameliebenoit2871
      @ameliebenoit2871 3 года назад +4

      Bonjour ! Je tiens juste a préciser que c'est d'un talk de conférence, en conséquence il ne s'agit pas d'un cours mais ici d'une introduction.
      Un talk de 25 minutes ne peut se substituer a une formation - qu'elle soit faite via un cours magistral ou en autodidacte !
      Merci et bonne journée 🙂

    • @skllbk
      @skllbk 3 года назад

      @@ameliebenoit2871 Bonjour, pourrais-je faire un transfert de votre mémoire à la mienne pour les informations concernant le code en général? J'ai une machine pour ça, fonctionnelle et non-dangereuse s'il vous plaît !

    • @xavierv2659
      @xavierv2659 2 года назад +2

      @Cactus XXX :
      C'est pas un cours, juste une présentation, et une bonne présentation d'ailleurs...