TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 พ.ย. 2024
  • #frontend #webdev #webdesign
    A CSS GRID é uma ótima maneira para organizar e estruturar nosso conteúdo HTML em nossas páginas na web. Nesse vídeo eu mostro um pouco dessa abordagem e como podemos criar layouts muito mais facilmente e sem dor de cabeça.
    🌟 Links comentados no vídeo e outros interessantes 🌟
    📺 Playlist Curso Web Fundamentos: HTML e CSS.
    • CURSO Web Fundamentos:...
    🎁 CURSO Web Design Fundamentos. Aprenda HTML CSS e Javascript
    serfrontend.co...
    ✅ Crie interfaces melhores com VARIÁVEIS do CSS (a.k.a custom properties)
    • Crie interfaces melhor...
    ✅ Como criar um "Dark🌜 e Light☀️ Theme Toggle" usando HTML, CSS e Javascript.
    • [FÁCIL e PASSO-A-PASSO...
    ✅ Como criar Tema Light/Dark só com HTML e CSS? (sem JAVASCRIPT)
    • Como criar Tema Light/...
    ✅ Como usar as pseudo-classes :has(), :is() e :where() do CSS para construir um switch theme só com HTML e CSS? (sem JAVASCRIPT)
    • Como usar as pseudo-cl...
    ✅ FAÇA o seu PORTFOLIO se DESTACAR frente aos demais
    • 🤩 FAÇA o seu PORTFOLIO...
    ✅ [CSS] Misturar cores SEM SOFRER com color-mix()
    • [CSS] Misturar cores S...
    ✅ 2 PORTIFÓLIOS (FRONT-END) INCRÍVEIS analisados juntos. Só vem.
    • 2 PORTIFÓLIOS (FRONT-E...
    ✅ Como criar PÁGINAS WEB com HTML e CSS a partir de design do FIGMA
    • Como criar PÁGINAS WEB...

ความคิดเห็น • 55

  • @michaelwilly.
    @michaelwilly. 8 หลายเดือนก่อน +1

    Cara, obrigado de coração!! Didática incrível, parabéns!!

    • @serliv
      @serliv  8 หลายเดือนก่อน +1

      Muito obrigado Michael. Valeu mesmo

  • @chule9850
    @chule9850 ปีที่แล้ว +1

    Vc explica muito bem 🎉😊👏👏

    • @serliv
      @serliv  ปีที่แล้ว +1

      😍😍😍 muito obrigado ☺️

  • @georgesilva2800
    @georgesilva2800 10 หลายเดือนก่อน

    nem assistir o video inteiro, mas só pelo começo e com o pouco conhecimento que tenho, tenho certeza o video será top

    • @serliv
      @serliv  10 หลายเดือนก่อน

      Valeu George

  • @DevGuedes
    @DevGuedes 6 หลายเดือนก่อน

    Olá meu mestre, bom dia!
    Que aula fantástica hein?
    Até hoje só uso flex pq não faço ideia de como usar grid. Mas depois desta aula vou tentar usar mais o grid.
    Professor aproveitando o ensejo, explica por favor quais as diferenças mais acentuadas em grid e flex. Quando usar um e quando usar o outro, ou até mesmo quando combinar ambos.
    Obrigado de verdade por tua disposição.

    • @serliv
      @serliv  5 หลายเดือนก่อน

      Muito obrigado. Sugestão anotada. Valeu mesmo

  • @geovaalves365
    @geovaalves365 3 หลายเดือนก่อน

    Aula surpreendente e fantástica!

    • @serliv
      @serliv  2 หลายเดือนก่อน

      Muito obrigado 😃

  • @quartorama1
    @quartorama1 27 วันที่ผ่านมา

    Muito bom conteúdo!

    • @serliv
      @serliv  27 วันที่ผ่านมา

      Muito obrigado 😃

  • @rubenscostadasilva1010
    @rubenscostadasilva1010 ปีที่แล้ว

    Show de aula. Estou inscrito no seu canal. Muito obrigado. D'us lhe abençõe e aos seus familiares.

    • @serliv
      @serliv  ปีที่แล้ว

      Amém Rubens. Desejo o mesmo pra ti. Abração

  • @gustavorob8515
    @gustavorob8515 ปีที่แล้ว

    Melhor professor que já tive, Parabéns

    • @serliv
      @serliv  ปีที่แล้ว

      Opa. Muito obrigado pelo elogio. Valeu mesmo. Forte abraço Gustavo

  • @marcotellojr.9725
    @marcotellojr.9725 ปีที่แล้ว

    Show de bola, estou estudando e aprendi recentemente a usar CSS Grid, mas foi de uma maneira diferente. Vou por em prática a sua aula e agregar ao conhecimento.
    Da forma que aprendi em aula seria utilizando a grid areas!

    • @serliv
      @serliv  ปีที่แล้ว +1

      Sim. É isso mesmo. Há outras maneiras de trabalhar com CSS grid. O importante é conhecer outras abordagens e assim poder decidir qual você prefere dependendo do cenário.

  • @Duarte_DAvila
    @Duarte_DAvila ปีที่แล้ว

    Bela Aula, Obrigado pelo seu tempo, Prezado. 👏✌👍

    • @serliv
      @serliv  ปีที่แล้ว +1

      Eu que agradeço. Forte abraço

  • @leonardomaia4770
    @leonardomaia4770 ปีที่แล้ว

    qualidade e didática como sempre excelente, obrigado!

    • @serliv
      @serliv  ปีที่แล้ว

      Eu que agradeço Leonardo. Forte abraço

  • @jhonatansantos2531
    @jhonatansantos2531 ปีที่แล้ว

    Que aula maravilhosa, ta de parabéns! A explicação foi sensacional, obrigado professor!

    • @serliv
      @serliv  ปีที่แล้ว

      Eu que agradeço Jhonatan. Abração

  • @neelsergio549
    @neelsergio549 6 หลายเดือนก่อน

    otima aula

    • @serliv
      @serliv  6 หลายเดือนก่อน

      Muito obrigado 😃

  • @pauloedson9698
    @pauloedson9698 ปีที่แล้ว

    Top demais

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado Paulo. Forte abraço

  • @waldirjunior1414
    @waldirjunior1414 ปีที่แล้ว

    Aula top ..

    • @serliv
      @serliv  ปีที่แล้ว

      Obrigado 😃

  • @josealcantara9571
    @josealcantara9571 9 หลายเดือนก่อน

    Muito bom mesmo

    • @serliv
      @serliv  9 หลายเดือนก่อน

      Valeu José. Abração

  • @gleydsonbrito1717
    @gleydsonbrito1717 ปีที่แล้ว

    Simplesmente fantástico

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado Gleydson. Abração

  • @rogerio8710
    @rogerio8710 ปีที่แล้ว

    Valeu pela aula.

    • @serliv
      @serliv  ปีที่แล้ว

      Eu que agradeço Rogério. Abração

  • @josecarlostavaresribeiro6584
    @josecarlostavaresribeiro6584 ปีที่แล้ว

    Olá boa essa aula, como coloco imagem e texto nessas grids

    • @serliv
      @serliv  ปีที่แล้ว

      Oi José. Precisa mesmo escrever as tags corretas dentro das grid cells.

  • @Paul0-Cardos0777
    @Paul0-Cardos0777 4 หลายเดือนก่อน

    Show🎉

  • @exa3460
    @exa3460 ปีที่แล้ว

    Muito bom, estou no comeco do video ainda mas grid me lembrou bastante o estudo de tabelas

    • @serliv
      @serliv  ปีที่แล้ว

      hahahaha.. Lembra em como organizar as informações, mas é bem diferente por ser muito mais flexível e mais fácil de dar manutenção

    • @exa3460
      @exa3460 ปีที่แล้ว

      @@serliv Sim, sim eu falo no quesito de pensar nos spans de coluna e linha, sei que não é bom usar tabela pra fazer os layouts

    • @serliv
      @serliv  ปีที่แล้ว

      @@exa3460 exatamente isso. Lembra muito mesmo a forma de pensar. Abração

  • @helder-rangel
    @helder-rangel 5 หลายเดือนก่อน

    Que tal fazer uma página responsiva a partir desse layout? Mais de 70% doa scessos são com dispositivos móveis, em muitos sites na internet.

    • @serliv
      @serliv  5 หลายเดือนก่อน

      Muito obrigado pela sugestão Helder

  • @acctualy4073
    @acctualy4073 ปีที่แล้ว

    olá professor tudo bem? não entendi muito bem a parte final do video, o que significa esse > * no seu codigo?

    • @serliv
      @serliv  ปีที่แล้ว

      significa qualquer elemento que é filho direto (ou seja, o primeiro filho). Eu ensino isso e muito no meu curso de HTML e CSS. Tem uma playlist completa e gratuita aqui no youtube e tenho também o curso na udemy (link na descrição) que está atualizado e possui mais conteúdo. Dê uma conferida se tiver interesse

  • @chvc
    @chvc ปีที่แล้ว

    Muito bom!!! Criar layout's no CSS é uma arte kkkk. E como ficaria, pra no caso de eu querer que o nav fique sempre fixo no topo da página ao usuário rolar a tela?

    • @derem1827
      @derem1827 ปีที่แล้ว

      sticky, ou tu pode deixar teu header como fixed.

    • @serliv
      @serliv  ปีที่แล้ว

      Como o Derem falou. E vc precisa ver se vale a pena manter dentro do grid ou não. (eu tentaria deixar fora, uma vez que deve ser fixo.. mas pode depender de como deve se comportar em telas menores)

  • @daviamerico2268
    @daviamerico2268 5 หลายเดือนก่อน

    Nao entendi, o numero total de declarações no grid template rows na verdade é o numero de grid columns

  • @fmoliveira30
    @fmoliveira30 9 หลายเดือนก่อน

    Cara deixa ele responsivo tb. Pode ser?

    • @serliv
      @serliv  9 หลายเดือนก่อน

      Valeu. muito obrigado pela sugestão

  • @devRafaelSilva
    @devRafaelSilva ปีที่แล้ว

    Vice poderia trazer sites para os inscritos fazer

    • @serliv
      @serliv  ปีที่แล้ว

      Boa Rafael. Obrigado pela sugestão