Cards Responsivos com HTML e CSS

Поделиться
HTML-код
  • Опубликовано: 15 ноя 2024

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

  • @ruanqueiroz5928
    @ruanqueiroz5928 Год назад

    Incrível como mulheres conseguem explicar mil vezes melhor, parabéns pelo conteúdo está ajudando muito 🫶

  • @alexiacaroline9752
    @alexiacaroline9752 3 года назад +31

    Conheci teu canal a três dias atrás! E tu me ensinou mais do que eu aprendi em 3 anos no meu curso técnico de informática para internet. Muito obrigada mesmo, sério, teus vídeos são perfeitos! Já compartilhei teu canal com os meus amigos do curso

    • @giovanna.moeller
      @giovanna.moeller  3 года назад +5

      Obrigada!! Fico feliz demais lendo isso!

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

      essas coisas não se aprende na faculdade, na vdd na faculdade se aprende tudo, menos o que o mercado de trabalho precisa, essas coisas vc aprender em qualquer cursinho de Alura, Udemy e RUclips

  • @thainavieira427
    @thainavieira427 3 года назад +7

    Moça continue com esses vídeos, estão me ajudando demais durante meu curso! Obrigada por disponibilizar esse conhecimento de forma gratuita! ❤️❤️

  • @moisescristiano4404
    @moisescristiano4404 Год назад

    Melhor explicação de todas. Por favor, grave mais vídeos de tutoriais. Um dev pedindo ajuda aqui.

  • @Dorivan29
    @Dorivan29 2 месяца назад

    Procurava uma idéia dessa para um projeto real, obrigado pela ajuda. Continue com os vídeos. Parabéns e SUCESSO. Mais um inscrito, LIKE!

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

    Que didática sensacional, vou até salvar o vídeo para futuras consultas

  • @gaiek
    @gaiek 2 года назад

    ótimo trabalho, vídeos como esse ajudam muito os navatos na área.

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

    Menina que top seu conteúdo , estou migrando da área Comercial para TI, e sinto falta de assuntos mais atuais, belíssimo trabalho, e ainda mais feliz por ser uma mulher, empoderada🙌

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

      Essa também é minha visão do famigerado empoderamento feminino. Pena que a mídia alimenta outro tipo de "poder".

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

    Que perfeito! Muito obrigada, você tem uma excelente didática e realmente explica cada linha que insere no código. PARABÉNS pela forma de transmitir conhecimento. Desejo muito sucesso ao canal, com certeza vai crescer bastante! Obrigada pelos conhecimentos, tirou minhas dúvidas sobre posicionamento de imagem e texto com flexbox, o assunto que estou estudando atualmente. Gratidão 💜💜

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

    Que maravilha de tuto... me inscrever para acompanhar novos vídeos. Parabéns pela iniciativa de dividir conhecimentos.

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

    Achei teu canal pelo tiktok e tô amando
    Didática mto boa e fácil de entender

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

    Parabéns Giovanna! Estou gatinhando nesse incrível mundo da programação. Aínda estou aprendendo HTML Tenho visto muitos vídeos e eis que me deparo com o seu. O que te dizer? Show de Bola menina! Simpática, humilde, e muita clareza nas explicações.
    Parabéns "Professora" !
    Sugestão: Faça um vídeo falando sobre sua formação, sobre quando e porque decidiu fazer programação, se trabalha Free lance ou para alguma Empresa etc...
    Grande abraço!

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

    Que bacana seu conteúdo viu alem de ser simpaticíssima, assisti o primeiro vídeo agora e já vou me inscrever no canal e conferir mais do conteúdo parabéns moça !!!!!!

  • @julyajoplin6148
    @julyajoplin6148 Год назад

    que vídeo lindo útil perfeito eu amo esse vídeo sempre volto aqui

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

    Maravilhoso conteúdo!!! Parabéns! Didática, conhecimento, praticidade, clareza e determinação no domínio do assunto. Me ajudou bastante a entender muitos detalhes que eu precisava aprender. Obrigada por esse vídeo fenomenal, continue assim! :-)

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

    Muito bom o vídeo, parabéns!
    Estava com um trabalho da faculdade para entregar e ajudou muito, explicação 1000x melhor que a do professor!

  • @AmodeusR
    @AmodeusR 3 года назад +9

    2:14 Você pode simplesmente digitar "lorem" sozinha ou seguido do número de palavras que você quer junto e apertar tab que será gerado um Lorem no próprio VSCode, sem necessidade de pegar online ou coisa do tipo :)
    Aliás, o aninhamento de seletores que você faz, além de ser exaustivo escrever tanto e poluir desnecessariamente o arquivo CSS, não é boa prática pois pode causar problemas de especificidade no código e dar uma dor de cabeça bem maior. Sendo assim, o ideal é evitar ao máximo aninhamento, especialmente grandes seletores aninhados e, sempre que possível, optar pelo uso de classes. Um dos métodos convencionados em nomenclatura CSS muito conhecido é um chamado BEM, recomendo a qualquer um que busque aprendê-lo, é fácil, simples, intuitivo, vai garantir menos problemas de especificidade no seu código, além de ser um padrão de mercado internacional.

    • @MarcosFelipe-up9lc
      @MarcosFelipe-up9lc 2 года назад

      Onde posso aprender sobre o BEM?

    • @moisescristiano4404
      @moisescristiano4404 Год назад

      Cara, ela já deve saber isso. Só pelo domínio e senso que ela tem com CSS e o Design dá pra ver que ela já tem muita prática. Ela deve ter optado por escrever as classes assim pra quem estiver assistindo saber quem tá dentro de quem. E melhor copiar o Mussum Ipsum à gerar lorem com tab, fueda-se. kkkk

    • @AmodeusR
      @AmodeusR Год назад

      @@moisescristiano4404 Não importa se ela sabe, importa se ela está ensinando certo ou não. Escrever seletores aninhados gera facilmente problema de especificidade e, quanto mais a base de código cresce, mais imprevisível fica o comportamento de estilização. Ensinar uma forma de programar que no futuro vai acarretar em grandes dores de cabeça, ou que logo mais terão que aprender corrigir a forma que aprenderam para aprender da forma correta.
      No fim, isso não é sobre ela, mas sobre quem está *aprendendo* dela. E se você prefere perder tempo indo na internet atrás de texto placeholder em vez de usar o sistema embutido no próprio VSCode, é sua escolha, não será eu que estará perdendo tempo mesmo.

    • @moisescristiano4404
      @moisescristiano4404 Год назад

      @@AmodeusR Ser programador ou qualquer outra profissão envolve estudo constante. E isso inclui desaprender e ter noções, por mais iniciante que seja. Você está partindo do princípio que as pessoas que estão aprendendo são crianças que não entendem nada de nada. Mas não é assim. Já vi até cursos onde professores negligenciavam semântica, preferiam métodos old school, ou mesmo faziam de qualquer jeito, e estão onde estão. O crescimento e atualização é uma escolha do estudante, não depende do professor. A aula dela foi maravilhosa e perfeita, mas você preferiu "ensinar" e apontar defeitos. Acho que quem tem mais que aprender aqui, é você.

    • @AmodeusR
      @AmodeusR Год назад

      @@moisescristiano4404 Já ouviu falar de crítica construtiva? Pois é. Em nenhum momento xinguei ou desmereci o que ela fez, apenas a aconselhei em como *melhorar o seu código,* que adivinha? É uma habilidade fundamental para qualquer ser humano que deseja crescer na vida precisa, *especialmente* programadores. Se ela ou você não querem melhorar, apenas ignore o que eu disse ora, mas existe um punhado de pessoas que querem o mais e o melhor pra ir além do medíocre ou suficiente.
      Se a sua inspiração é negligenciar semântica, escrever código legado e fazer de qualquer jeito, fique à vontade com a sua mediocridade. Eu escolho olhar pro futuro e dar o meu melhor para que eu consiga o melhor pra minha vida. Quem quer o melhor pra si que ouça os conselhos que eu dei, os que não querem, que fiquem com sua mediocridade.
      Afinal, não vai ser eu que vai estar sofrendo depurando CSS pra entender porque diabos um determinado estilo não tá sendo aplicado, então só siga o conselho se quiser.

  • @maxsueloliveira4087
    @maxsueloliveira4087 2 года назад

    Muito bom, suas páginas ficam muito bonitas!!!
    Pra dar o espaçamento entre os itens usa o "gap" do flex box, que ai você não precisa ficar controlando as bordas

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

    Ganhou mais um fã, por favor continue, sua didática é estupenda!

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

    manja demais em, está me ajudando muito. Meus parabéns pelo vídeo.

  • @caetanomartinazzo8240
    @caetanomartinazzo8240 3 года назад +9

    Reza a lenda que ela dá coração em quem escreve"reza a lenda que ela da coração em quem escreve"

  • @evandrorodrigues8431
    @evandrorodrigues8431 2 года назад

    Ótimo conteúdo! Caso eu queira inserir um HEADER, posso inserir sem alterar os cards (css)?

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

    Explica muito bem, melhor que muitos cursos, parabéns!

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

    Excelente explicação!! Parabéns.

  • @fenixmiranda
    @fenixmiranda 2 года назад

    Excelente!!! Parabéns pela didática

  • @sergio.808s
    @sergio.808s 2 года назад

    no momento de dar espaço nos elementos dentro do cartão eu costumo usar flex e justify-content: space-evenly , o margin é mais recomendável ?

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

    Olá, estou perdidamente apaixonado pelo seu canal, o conteúdo é muito bom, pelo fato de ser um projeto real e não uns bloquinhos sem vida. Amei

  • @dos.santos.trader
    @dos.santos.trader 3 года назад

    Sobre os botões, qual a diferença de usar ou ?

  • @Gabriella-wm9fx
    @Gabriella-wm9fx 2 года назад

    Que código clean. Amei o seu vídeo! Todo apoio para o canal 💕

  • @rayprata
    @rayprata 3 года назад +3

    Perfeitaaaaaaa, explica muito bem! Já quero um curso seu de css

  • @felipe.py3
    @felipe.py3 6 месяцев назад

    Vídeo massa e ótima didática!

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

    Esse método de usar classes filhas é muito útil, sempre me deparava com problemas assim, obrigado!!

  • @lucasalmeida5022
    @lucasalmeida5022 Год назад

    Sou dev backend e preciso melhorar minhas habilidades no front, esse vídeo me ajudou muito, obrigado!!!

  • @na_panfletos_e_cartoes
    @na_panfletos_e_cartoes 2 года назад

    Aqueles carreteis de lojas (propagandas) encontradas no facebook segue a mesma linha?

  • @Matheuspaltian
    @Matheuspaltian 2 года назад

    parabens pelo teu video guria!! muito bom o conteudo! Me inscrevi aqui

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

    Muito bom! Tudo muito perfeito mesmo! Pode me tirar umas duvidas?
    É melhor especificar as classes o máximo que der? Tipo main.cards é melhor que .cards nesse caso, ou sempre depende se tiver muita coisa no código?
    E também sobre as cores e imagens, você pega em algum lugar ou você mesmo seleciona essas cores e gradientes incríveis?

    • @giovanna.moeller
      @giovanna.moeller  3 года назад +1

      Simmm eu prefiro especificar!! E sou eu mesma que faço hahahah mas sempre tiro inspirações da net!

  • @Thom.Zille.
    @Thom.Zille. 3 года назад

    Ótimo vídeo, muito bem explicado e objetivo. Parabéns!

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

    acho que é por causa do meu monitor que n é dos melhores mas pra mim n deu pra ver a caixa do card eu tive que mudar o background color do body pra ficar umpouco mais escuro pra dar de ver mas fora isso muito bom vídeo, explica de mais. continue com o bom conteúdo.

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

    Muito bom o seu vídeo, fiz uma alteração de cores aqui para a minha pagina , vou mandar no instagram

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

    Quando puder grava um vídeo abordando um pouco mais sobre deixar o site responsivo.

  • @robsonfranciscojose9871
    @robsonfranciscojose9871 Год назад

    Maravilhoso😊
    Continue fazendo ótimos conteúdos
    Já ganhou um +1 subscritor leal

  • @eduardoalmeida4692
    @eduardoalmeida4692 Год назад

    Muito bom, ajudou um iniciante. Obrigado

  • @antonioalexandrecordeirosa293
    @antonioalexandrecordeirosa293 Год назад

    Show de bola!Parabens!

  • @leticiaalmeida6498
    @leticiaalmeida6498 2 года назад

    Muito boa a explicação , muito obrigadaa

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

    Muito boa a explicação, muito obrigado pelo video! Ajudou muito.

  • @rogeriocurtio7683
    @rogeriocurtio7683 2 года назад

    Estou fazendo o projeto aqui em casa vamos começar hehe

  • @vroxlon
    @vroxlon 2 года назад

    só uma dica que pode não parecer mudar muita coisa, mas é interessante vc utilizar o padding com unidade EM ao invés de PX já que vc está utilizando VH em é unidade relativa e quando vc utiliza PX ele não se adapta muito bem de acordo com o view port

  • @isabellemedeiros82
    @isabellemedeiros82 2 года назад

    Obrigadaaaa pelo conteúdoooo! Simplesmente sensacional! Já assisti uma 10 vezeeees kkkkkkkkk

  • @analisedesenvolvimento9469
    @analisedesenvolvimento9469 2 года назад

    Quando você digita:
    main.cards section.card e finalmente img {} no CSS
    você está basicamente percorrendo um caminho para chegar até a tag que você quer estilizar ?
    Gostaria de entender qual é a diferença de escrever apenas IMG{} no CSS entre escrever da forma que você escreveu ?
    Muito obrigada pelo vídeo, me ajudou muito!

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

    Até que enfim esse vídeo saiu. hahaha
    Cadê o botãozin para ser membro?

  • @kmg3169
    @kmg3169 Год назад

    Thank you very much, your content is wonderful!

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

    Muito bom, esta de parabéns!

  • @luhrodrigues45
    @luhrodrigues45 2 года назад

    Didática maravilhosa!

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

    Parabéns, Aprendi muito

  • @codinginrainbows513
    @codinginrainbows513 2 года назад

    muito legal! qual o modelo do teclado que tu usa?

  • @maycondouglas3179
    @maycondouglas3179 2 года назад

    Nem sei se vc vai ver isso, mas...tenho um "colega" que diz que não se deve usar a unidade de medida px(nem em padding e margin) nos projetos, que isso é coisa de "site barato". O que você acha disso ? Concorda ? Ele tá certo ?

    • @giovanna.moeller
      @giovanna.moeller  2 года назад +1

      oie! depende muitooo, não tem muito um certo e errado, e nem “site barato” hauahauah usar medidas responsivas é o melhor a se fazer, mas isso não significa que nunca deve ser usado px! abraços!

    • @maycondouglas3179
      @maycondouglas3179 2 года назад

      @@giovanna.moeller Obg !

  • @Lsantos021-z1x
    @Lsantos021-z1x Год назад

    Quando se coloca largura a altura já faz um cslculo automático pra ficar proporcional só que a imagem é grande então sempre fica estranha pq diminui muito geralmente isso o" object-fit na classe da img.."

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

    Giovanna sensei, domo arigatou! 🙇🏻

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

    muito bom o vídeo..estou estudando frontend e esse vídeo me fez perceber o quanto preciso me dedicar ao CSS, rs..mesmo sabendo que em um futuro não muito distante irei utilizar algum framework CSS

    • @giovanna.moeller
      @giovanna.moeller  3 года назад +1

      vem pro css puro hahahah

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

      @@giovanna.moeller juro que estou tentando

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

      @@guilhermedenardi1077 eu também tô batendo muita cabeça em aprender todas as propriedades do css sem usar framework, já to com 2 meses estudando só css e nunca terminei de tanta propriedade que tem.

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

    Que vídeo maravilhoso, muito obrigado pelo conteúdo!

  • @alexandrenogueira8680
    @alexandrenogueira8680 2 года назад

    Muito bom, parabéns!

  • @skyjl482
    @skyjl482 11 месяцев назад

    Muito massa, adorei

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

    tá me ajudando muito no meu aprendizado viu!!!!

  • @TheFernandojrcoroa
    @TheFernandojrcoroa 2 года назад

    porque você chama o nome da tag antes do nome da classe no css? é realmente necessário?

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

    Muito show, parabéns! Me ajudou muito nessa parte de tornar responsivo. Quando tiver tempo, se possível, grava um video sobre "Conceitos básicos de Grid Layout - CSS", só se possível. Ta bom ?! kk

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

    Como eu faço para que toda vez que for adicionado mais de 3 cards, o último for para baixo? Seu vídeo é muito bom e bem explicado, me ajudou muito. Obrigado!! ❤️❤️❤️

  • @felipechagas8003
    @felipechagas8003 2 года назад

    Parabéns pelo conteúdo, só acho que deveria ser mais frequente, e ter mais projetinhos, vc tem futuro.

  • @HailtonAssisdaSilva-jx3fn
    @HailtonAssisdaSilva-jx3fn Год назад

    Esse canal ainda existe? Tem curso gratuito de html5? Se ainda existir e tiver eu vou me inscrever. Bom dia.

  • @eusouchris
    @eusouchris 2 года назад

    qual a extensão que voce usa? M it? Enlit? nao consegui ouvir o nome direito kkkk

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

    Que vídeo foda! Parabéns!

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

    Muito legal, parabens pelo conteudo!

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

    Que sensacional! Já fiz. 😍

  • @granacomaweb
    @granacomaweb Год назад

    Muito boa suas explicações, moça... bem clara para falar, assim bem fácil para entendermos, parabéns

  • @lucassoares4044
    @lucassoares4044 Год назад

    video muito bom vlw mesmo, eu consegui fazer

  • @estagiarioyt
    @estagiarioyt Год назад

    Por que ao invés de usar firstChild e lastChild, não seria melhor usar o gap do flex-box?

    • @giovanna.moeller
      @giovanna.moeller  Год назад +2

      na época que esse vídeo foi lançado o gap do flex não tinha muita compatibilidade com navegadores, no Safari por exemplo não funcionava, hoje acredito estar bem melhor!!

  • @laurindo_nick
    @laurindo_nick 8 месяцев назад

    moça onde você achou esses icons?

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

    Obrigado pelo conteúdo! :)

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

    Qual o temaaa que vc usa?

  • @ricardobruffatto5228
    @ricardobruffatto5228 2 года назад

    Qual fonte tu tá usando?

  • @augustosilva33
    @augustosilva33 Год назад

    Não ficou legal .
    No Motorola .
    Na verticsl corta div primeira .
    Na horizontal as div fica inblock .

  • @candidofinda9647
    @candidofinda9647 2 года назад

    Muito bom o seu video

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

    Simplesmente amei!!!

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

    Muito top!!!

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

    oi eu tenho um html que preciso fazer consegue me ajudar?

  • @a_catarin4971
    @a_catarin4971 2 года назад

    você me salvou muito moça, obg❤❤❤

  • @linecker94
    @linecker94 2 года назад

    Não entendi nada sobre colocar a img dentro da div e não vi mudança nenhuma.

  • @candidofinda9647
    @candidofinda9647 2 года назад

    Excelent jovem

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

    MEUDEUS VC SALVOU MINHA VIDA!!! OBG

  • @devdofuturo
    @devdofuturo Год назад

    Thanks girl code!

  • @adrianom.4741
    @adrianom.4741 3 года назад +1

    Acho que ensinar assim com pequenos projetos é bem melhor do que ficar só mostrando tag, códigos sem aplicação visível...

  • @shiratorr
    @shiratorr 2 года назад

    Por que ao invés de digitar main.cards section.card .icon, vc nao escreveu simplesmente .icon?

  • @Eu_Brunolb
    @Eu_Brunolb 5 месяцев назад

    ficou muito legal

  • @brazilianplayers4926
    @brazilianplayers4926 Год назад

    cara eu curti o tutorial mas tem um grave problema, sempre que for fazer videos, tenta fazer com fundos escuros, mds é tanto brilho que nao consigo ver o video direito

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

    por deus ensina a usar o visual code

  • @vi_developer
    @vi_developer 2 года назад

    adoreiii !!

  • @ihorzhuk4949
    @ihorzhuk4949 2 года назад

    Привет(Hi). You're doing well.(у тебя все круто)

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

    De mais 🥰

  • @codetechannel
    @codetechannel Год назад

    Som do teclado é terapêutico ksksks

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

    Massa

  • @rogeriocurtio7683
    @rogeriocurtio7683 2 года назад

    Muito 10 : - )