Cards Responsivos com HTML e CSS
HTML-код
- Опубликовано: 1 окт 2024
- Oie pessoal! Nesse vídeo explico como criar cards responsivos utilizando HTML e CSS. Qualquer dúvida só deixar um comentário aqui, espero que gostem!
Me sigam também no instagram: / girl.coding
Código do projeto: github.com/gio...
Reza a lenda que ela dá coração em quem escreve"reza a lenda que ela da coração em quem escreve"
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
Obrigada!! Fico feliz demais lendo isso!
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
Acho que ensinar assim com pequenos projetos é bem melhor do que ficar só mostrando tag, códigos sem aplicação visível...
Moça continue com esses vídeos, estão me ajudando demais durante meu curso! Obrigada por disponibilizar esse conhecimento de forma gratuita! ❤️❤️
Não ficou legal .
No Motorola .
Na verticsl corta div primeira .
Na horizontal as div fica inblock .
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!
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.
Onde posso aprender sobre o BEM?
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
@@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.
@@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ê.
@@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.
Привет(Hi). You're doing well.(у тебя все круто)
Aqueles carreteis de lojas (propagandas) encontradas no facebook segue a mesma linha?
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
Esse canal ainda existe? Tem curso gratuito de html5? Se ainda existir e tiver eu vou me inscrever. Bom dia.
O legal de seus vídeo é que mostra a aplicação e num fica enrolando mostrando ferramentas com exemplos sem contextualizar aplicação. Tipo fala de um If mas num mostra em algo real.
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 ?
parabens pelo teu video guria!! muito bom o conteudo! Me inscrevi aqui
qual a extensão que voce usa? M it? Enlit? nao consegui ouvir o nome direito kkkk
Thank you very much, your content is wonderful!
porque você chama o nome da tag antes do nome da classe no css? é realmente necessário?
Estou fazendo o projeto aqui em casa vamos começar hehe
Não entendi nada sobre colocar a img dentro da div e não vi mudança nenhuma.
Além de gata é inteligente, armaria faz isso não.
Perfeitaaaaaaa, explica muito bem! Já quero um curso seu de css
Que didática sensacional, vou até salvar o vídeo para futuras consultas
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!
video muito bom vlw mesmo, eu consegui fazer
Quando puder grava um vídeo abordando um pouco mais sobre deixar o site responsivo.
já tem mais vídeo aqui sobre no canal
m a r a v i l h o s a
Muito bom, ajudou um iniciante. Obrigado
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 💜💜
Muito boa a explicação , muito obrigadaa
Som do teclado é terapêutico ksksks
teclado: tectectectectectectectectectectectectectectectectectectec
o texto na tela: "card"
você me salvou muito moça, obg❤❤❤
muito legal! qual o modelo do teclado que tu usa?
Por que ao invés de usar firstChild e lastChild, não seria melhor usar o gap do flex-box?
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!!
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! :-)
Maravilhoso😊
Continue fazendo ótimos conteúdos
Já ganhou um +1 subscritor leal
moça onde você achou esses icons?
Por que ao invés de digitar main.cards section.card .icon, vc nao escreveu simplesmente .icon?
mais criterios de especificidade :D
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
Vídeo massa e ótima didática!
Excelente explicação!! Parabéns.
Incrível como mulheres conseguem explicar mil vezes melhor, parabéns pelo conteúdo está ajudando muito 🫶
Melhor explicação de todas. Por favor, grave mais vídeos de tutoriais. Um dev pedindo ajuda aqui.
por deus ensina a usar o visual code
Thanks girl code!
Ótimo conteúdo! Caso eu queira inserir um HEADER, posso inserir sem alterar os cards (css)?
animal, curti pra caralho
Show de bola!Parabens!
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?
Simmm eu prefiro especificar!! E sou eu mesma que faço hahahah mas sempre tiro inspirações da net!
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.."
Sobre os botões, qual a diferença de usar ou ?
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 ?
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!
@@giovanna.moeller Obg !
ficou muito legal
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
Qual fonte tu tá usando?
manja demais em, está me ajudando muito. Meus parabéns pelo vídeo.
Parabéns pelo conteúdo, só acho que deveria ser mais frequente, e ter mais projetinhos, vc tem futuro.
Muito massa, adorei
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🙌
Essa também é minha visão do famigerado empoderamento feminino. Pena que a mídia alimenta outro tipo de "poder".
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.
Sou dev backend e preciso melhorar minhas habilidades no front, esse vídeo me ajudou muito, obrigado!!!
Até que enfim esse vídeo saiu. hahaha
Cadê o botãozin para ser membro?
Obrigadaaaa pelo conteúdoooo! Simplesmente sensacional! Já assisti uma 10 vezeeees kkkkkkkkk
Qual o temaaa que vc usa?
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 !!!!!!
adoreiii !!
Muito bom o seu vídeo, fiz uma alteração de cores aqui para a minha pagina , vou mandar no instagram
Muito bom o seu video
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!! ❤️❤️❤️
oi eu tenho um html que preciso fazer consegue me ajudar?
que vídeo lindo útil perfeito eu amo esse vídeo sempre volto aqui
ótimo trabalho, vídeos como esse ajudam muito os navatos na área.
Excelent jovem
Giovanna sensei, domo arigatou! 🙇🏻
Muito 10 : - )
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!
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!
nenhum, ela apenas escreve demais KKKKKKKKKKKK
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
Que maravilha de tuto... me inscrever para acompanhar novos vídeos. Parabéns pela iniciativa de dividir conhecimentos.
Muito boa a explicação, muito obrigado pelo video! Ajudou muito.
Excelente!!! Parabéns pela didática
tá me ajudando muito no meu aprendizado viu!!!!
Esse método de usar classes filhas é muito útil, sempre me deparava com problemas assim, obrigado!!
Massa
Ganhou mais um fã, por favor continue, sua didática é estupenda!
Ótimo vídeo, muito bem explicado e objetivo. Parabéns!
Top
MEUDEUS VC SALVOU MINHA VIDA!!! OBG
Meu display não funcionou no código :(
Parabéns, Aprendi muito
Achei teu canal pelo tiktok e tô amando
Didática mto boa e fácil de entender
Muito legal, parabens pelo conteudo!
Que código clean. Amei o seu vídeo! Todo apoio para o canal 💕
Que vídeo maravilhoso, muito obrigado pelo conteúdo!
Explica muito bem, melhor que muitos cursos, parabéns!
Obrigado pelo conteúdo! :)
Que vídeo foda! Parabéns!
Muito bom, esta de parabéns!
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
muuuito obrigada!!! ❤️
Muito bom, parabéns!