Criando um layout responsivo com CSS Grid e Object-fit

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

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

  • @danimichely2723
    @danimichely2723 3 ปีที่แล้ว +30

    Nenhuma aula é básica de mais, amigo. Existem pessoas em vários níveis de programação que pertencem a sua audiência.
    Obrigada por compartilhar!

    • @WillianJustenCursos
      @WillianJustenCursos  3 ปีที่แล้ว +3

      Exatamente, por isso que eu resolvi postar =)

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

      Falou tudo, esse vídeo me esclareceu e me ensinou muito, obrigado pelo conteúdo valioso =)sucesso mano

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

    Vc me ajudou muitíssimo, pois estava com dificuldades de fazer meu grid layout, ficar responsivo.
    Muito obrigado. Estou inscrito há muito tempo no seu canal do TH-cam.
    Gostaria de receber atualizações, claro se seu tempo permitir, para sempre estar atualizado com suas lições.
    Desejo ÊXITO em seus empreendimentos, pois vc é merecedor.
    Abraços.

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

    Excelente, exatamente a aula que eu procurava . Muito obrigado 👊🏾🙏🏻 Didática incrível .

  • @vedovelli
    @vedovelli 3 ปีที่แล้ว +20

    Maravilhoso! Zero media query! 👏🏻👏🏻👏🏻👏🏻

  • @AldecirSantos-nm6pm
    @AldecirSantos-nm6pm ปีที่แล้ว

    Olá Willian
    Muito legal as suas aulas.
    Está de parabéns !!!

  • @jlisboababy1980
    @jlisboababy1980 2 ปีที่แล้ว

    Ganhou mais um inscrito, gostei bastante da aula, aprendi muito, e em tão pouco tempo resolve muitos problemas que tinha quando se trata de site responsivo, valeu mesmo pela aula

  • @flavioeduardodiasdasilva3703
    @flavioeduardodiasdasilva3703 2 ปีที่แล้ว

    Exatamente o que eu estava procurando ....muito obrigado !!!!

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

    Show de bola, bem objetivo e claro. Ganhou um inscrito

  • @eric_dos_reis
    @eric_dos_reis 3 ปีที่แล้ว +2

    O grid-gap é da sintaxe antiga, agr o standard é gap. O gap tbm aceita o valor da row e da column na mesma declaração -> gap: . Muito bom o vídeo, passei como reforço para os estagiários daqui da empresa.

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

      Oh, interessante! Não tava ciente dessa nova sintaxe! Valeu pela adição =D

  • @GaragemClassica
    @GaragemClassica 2 ปีที่แล้ว

    Era exatamente o que eu tava procurando! Obrigado

  • @biomelo8501
    @biomelo8501 3 ปีที่แล้ว

    Me ajudou muito! Muita facilidade na didática

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

    Que issooooooo
    Sem Media Query.
    CSS nunca é demais
    Manda mais...

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

      Te fiz uma pergunta no curso de React Avançado que eu acho que daria um belo vídeo aqui para o TH-cam (pode ser um daqueles da série de vídeos rápidos).
      Resumindo...
      Como faço para trabalhar com Diretórios de Backend e Frontend no mesmo repositório do GIT mas no deploy para o Netlify e para o Heroku conseguir identificar cada um deles de forma separada (sem precisar separá-los em dois, por exemplo)?
      Ex.: github.com/lipex360x/reactavancado-landingpage
      Tenho seu curso de Git e não vi nada do tipo sendo abordado (também valeria um update por lá)
      Abraços ;)

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

    Muito bom, era o que eu precisava meus parabéns!

  • @tomsantos220
    @tomsantos220 2 ปีที่แล้ว

    rapaz que aula maravilhosa !!!

  • @ulissessm
    @ulissessm 2 ปีที่แล้ว

    Melhor aula sobre css grid que já vi, parabéns, sensacional.

  • @renangoncalves9125
    @renangoncalves9125 3 ปีที่แล้ว +2

    Eu sempre aprendo coisa nova com os videos do WJ. Parabéns!

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

    Faz um tempo que estou mais atuando no mundo mobile nativo. Assisti o vídeo aguardando pela inserção do media query e ao final vi uma nova maneira de fazer responsividade de modo simples e objetiva hehe. Excelente conteúdo Willian. Abs!

  • @caioo320
    @caioo320 3 ปีที่แล้ว +2

    esse quadro do Tlou 2 é sensacional huahuaua. Vídeo mt bom s2

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

      Eita, e conseguiu ver nessa bolinha? Ahhaha
      Mas sim, esse quadro é meu xodó, jogo perfeito ♥️

  • @douglasmontezano
    @douglasmontezano 2 ปีที่แล้ว

    Muito Bom, obrigado por compartilhar. Sua didática é muito boa, Parabéns!

  • @alissonbrinques8446
    @alissonbrinques8446 2 ปีที่แล้ว

    muito bom video, parabens willian!

  • @Joao.Gabriel7
    @Joao.Gabriel7 3 ปีที่แล้ว +3

    Que vídeo Massa! Direto e bem mais explicativo do que muito tutorial por aí 😅 Muito obrigado por mais um excelente tutorial, tá fazendo muita diferença! Abraços.

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

    o grande Willian, suas explicações foram muito boas....vc usou exemplos que amplificaram nosso entendimento...valeu mesmo fera!!....ganhou mais 1 inscrito!!

  • @alancristiano__
    @alancristiano__ 3 ปีที่แล้ว

    pra que media querie né sudhudsh sensacional o conteudo ! precisava de algo assim, parabéns

  • @ivanrabelo1558
    @ivanrabelo1558 3 ปีที่แล้ว

    parabens mano pela aula. show!

  • @xJeFagundes
    @xJeFagundes 3 ปีที่แล้ว

    Vim buscar um conhecimento(que não foi abordado no vídeo) mas aprendi outras coisas que me ajudaram. Valeu ;)

  • @luiz.henrique9
    @luiz.henrique9 3 ปีที่แล้ว +1

    Obrigado pela explicação, ótima didática. Outra forma pouco comentada de fazer isso é usando o columns (column-count, column-width, etc), também sem media query.

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

    Muito bacana..parabéns.

  • @erikaharada2152
    @erikaharada2152 3 ปีที่แล้ว

    Suas aulas são muito boas , parabéns!!!

  • @umbronzealeatorio5976
    @umbronzealeatorio5976 3 ปีที่แล้ว

    Foda demais!, sua aula foi muito boa e direto ao ponto, boa!

  • @luizaavelino5358
    @luizaavelino5358 3 ปีที่แล้ว +2

    Sonhando com um curso seu de CSS!! Amo sua didática

    • @WillianJustenCursos
      @WillianJustenCursos  3 ปีที่แล้ว

      Quem sabe no futuro? Ahahha

    • @opcoesdenegocio7948
      @opcoesdenegocio7948 3 ปีที่แล้ว +2

      Sonho junto aqui também.
      Mas tem muita coisa legal que é passada no curso de React Avançado (mesmo não sendo o foco principal do curso)

  • @eduardofrancisco7678
    @eduardofrancisco7678 3 ปีที่แล้ว

    E ai aula incrivel como sempre. O se tiver um tempo manda uns videos sobre modal.

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

    Ja cheguei dando o like! Tambem estou ensinando minha esposa. Tem algum roadmap para compartilhar? Quem sabe nao sai um video disso. hehe Queria fugir um pouco da trilha dada em faculdade. Mais uma vez, video excelente! Abracos!

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

      Não tenho um roadmap mt bem formado não, mas posso tentar elaborar algo para um vídeo sim..

    • @AntonioCarlosCDavid
      @AntonioCarlosCDavid 3 ปีที่แล้ว

      @@WillianJustenCursos Obrigado! ;)

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

    ajudou demais Willian. Vlw

  • @PedroPaulo-rr7cz
    @PedroPaulo-rr7cz 3 ปีที่แล้ว

    Video top, parabens pela didatica

  • @juantgarcia
    @juantgarcia 3 ปีที่แล้ว

    Muito bom!! Sabe me dizer como deixar responsivo utilizando o grid-template-areas ?

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

    Valeu Garoto, excelente didática, abraço!!!

  • @marcusnunes5970
    @marcusnunes5970 2 ปีที่แล้ว

    Muito bom, obrigado

  • @NeroDantesco
    @NeroDantesco 3 ปีที่แล้ว +2

    Nossa cara ótimo video sempre muito bem explicado e direto ao ponto obg estava precisando desse video seria bom de vez em quando conteudos basicos como esse parabens pelo conteudo

  • @MontanhaIEQ
    @MontanhaIEQ 3 ปีที่แล้ว

    Obrigado !

  • @MarcosSilva-wv4ie
    @MarcosSilva-wv4ie 2 ปีที่แล้ว

    Sensacional!!!

  • @oreidosites
    @oreidosites 3 ปีที่แล้ว

    Parabéns, excelente video!! Me ajudou a entender como fazer cards responsivos e centralizados

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

    Muito bom!!!

  • @guilhermeluis9302
    @guilhermeluis9302 3 ปีที่แล้ว

    o auto-fit só funciona dentro do repeat()? Tenho algo assim grid-template-columns: minmax(600px, 3fr) minmax(200px, 1fr) e queria jogar o item para baixo quando chegar a x width da tela, similar ao flex-wrap. Obrigado! Não encontrei no Google rs

  • @beinyourguard
    @beinyourguard 3 ปีที่แล้ว +3

    Grid e Flexbox são o alicerce de qualquer layout hoje

    • @markzumq644
      @markzumq644 3 ปีที่แล้ว

      Realmente! Só estou usando grid ultimamente.

  • @renato_reboucas
    @renato_reboucas 3 ปีที่แล้ว +2

    explicação muito top

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

      Uai, mas como chegou aqui se o vídeo ainda está privado? Ahahahha

    • @renato_reboucas
      @renato_reboucas 3 ปีที่แล้ว

      @@WillianJustenCursos pelo seu canal mesmo

  • @sacanagerodemerda
    @sacanagerodemerda 3 ปีที่แล้ว

    como faço para colocar lorem ?

  • @wmarceloalves
    @wmarceloalves 2 ปีที่แล้ว

    uma dúvida o display grid é usado para construir um layout completo, header, main, footer? e caso sim, qual seria a melhor forma de fazer?

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

    Sou iniciante, e noto que pra fazer css eu mais customizo layouts de outros doq realmente crio os meus, n sou mt bom de css, isso e normal? Tem uns 5 dias que aprendi css

  • @JarbasPneuCareca
    @JarbasPneuCareca 2 ปีที่แล้ว

    ae mno, tem como vc fazer um tutorial de animação de efeitos q só aparecem quando vc rola a tela pra baixo.
    tipo, vc vai descendo a tela, e a animação vai surgindo pela lateral.

  • @oguivictor
    @oguivictor 3 ปีที่แล้ว +2

    Um dia eu compro o React avançado, didática boa demais.

  • @LeandoLopes
    @LeandoLopes 3 ปีที่แล้ว

    Faz um video mostrando o seu fluxo de trabalho com o Git, vc utiliza direto no VSCODE?

  • @Lucas94467
    @Lucas94467 3 ปีที่แล้ว

    Tem como fazer uma aula sobre como ter ideia para front, onde encontrar bons conteudos, etc?

  • @gabrieldelima4377
    @gabrieldelima4377 3 ปีที่แล้ว

    Muito top cara parabéns
    Solucionou minhas dúvidas
    Será q vc poderia me dar uma ajuda?
    Nesse mesmo template seu teria como colocar um botão para liberar mais fotos?
    Exemplo de início mostrar 8 imagens e um botão "ver mais"
    quando clicar nesse botão ele exibir mais 8 fotos abaixo...

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

    Se esse vídeo der dinheiro, quero 50%

  • @user-bl9mg9ef4g
    @user-bl9mg9ef4g 3 ปีที่แล้ว

    Boa tarde como eu coloco esse texto em cima da imagem mas em baixo tipo quando a pessoa passa o mause em cima da imagem aparece o texto obrigado tô pedindo ajuda pq não entendo de programação uso o TH-cam pra aprender ganhou inscrito abraço

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

    conteudo foda

  • @inhassu950
    @inhassu950 2 ปีที่แล้ว

    god men