No video

Cards Responsivos com HTML e CSS

  Рет қаралды 49,277

Giovanna Moeller

Giovanna Moeller

3 жыл бұрын

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...

Пікірлер: 134
@alexiacaroline9752
@alexiacaroline9752 3 жыл бұрын
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 жыл бұрын
Obrigada!! Fico feliz demais lendo isso!
@vroxlon
@vroxlon 2 жыл бұрын
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 KZfaq
@thainavieira427
@thainavieira427 3 жыл бұрын
Moça continue com esses vídeos, estão me ajudando demais durante meu curso! Obrigada por disponibilizar esse conhecimento de forma gratuita! ❤️❤️
@caetanomartinazzo8240
@caetanomartinazzo8240 3 жыл бұрын
Reza a lenda que ela dá coração em quem escreve"reza a lenda que ela da coração em quem escreve"
@AmodeusR
@AmodeusR 2 жыл бұрын
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.
@aparecidoaugustobenedito3102
@aparecidoaugustobenedito3102 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!
@ruanqueiroz5928
@ruanqueiroz5928 Жыл бұрын
Incrível como mulheres conseguem explicar mil vezes melhor, parabéns pelo conteúdo está ajudando muito 🫶
@lucasraymundo4167
@lucasraymundo4167 Жыл бұрын
Que didática sensacional, vou até salvar o vídeo para futuras consultas
@amandacarvalho2045
@amandacarvalho2045 2 жыл бұрын
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 💜💜
@carinaemerencio7334
@carinaemerencio7334 3 жыл бұрын
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 2 жыл бұрын
Essa também é minha visão do famigerado empoderamento feminino. Pena que a mídia alimenta outro tipo de "poder".
@moisescristiano4404
@moisescristiano4404 Жыл бұрын
Melhor explicação de todas. Por favor, grave mais vídeos de tutoriais. Um dev pedindo ajuda aqui.
@juhbm
@juhbm 2 жыл бұрын
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! :-)
@rayprata
@rayprata 3 жыл бұрын
Perfeitaaaaaaa, explica muito bem! Já quero um curso seu de css
@justroroni1562
@justroroni1562 3 жыл бұрын
Achei teu canal pelo tiktok e tô amando Didática mto boa e fácil de entender
@gabrielcarlesso5946
@gabrielcarlesso5946 2 жыл бұрын
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!
@marceloprates8153
@marceloprates8153 3 жыл бұрын
Explica muito bem, melhor que muitos cursos, parabéns!
@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
@gaiek
@gaiek 2 жыл бұрын
ótimo trabalho, vídeos como esse ajudam muito os navatos na área.
@felipe.py3
@felipe.py3 3 ай бұрын
Vídeo massa e ótima didática!
@biancolorencini4360
@biancolorencini4360 2 жыл бұрын
Ganhou mais um fã, por favor continue, sua didática é estupenda!
@contatoinforlive
@contatoinforlive 3 жыл бұрын
Que maravilha de tuto... me inscrever para acompanhar novos vídeos. Parabéns pela iniciativa de dividir conhecimentos.
@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
@giovanna.moeller
@giovanna.moeller 3 жыл бұрын
muuuito obrigada!!! ❤️
@lucasalmeida5022
@lucasalmeida5022 Жыл бұрын
Sou dev backend e preciso melhorar minhas habilidades no front, esse vídeo me ajudou muito, obrigado!!!
@kaiotrajano6490
@kaiotrajano6490 3 жыл бұрын
Esse método de usar classes filhas é muito útil, sempre me deparava com problemas assim, obrigado!!
@julyajoplin6148
@julyajoplin6148 Жыл бұрын
que vídeo lindo útil perfeito eu amo esse vídeo sempre volto aqui
@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 !!!!!!
@antonioalexandrecordeirosa293
@antonioalexandrecordeirosa293 Жыл бұрын
Show de bola!Parabens!
@Gabriella-wm9fx
@Gabriella-wm9fx 2 жыл бұрын
Que código clean. Amei o seu vídeo! Todo apoio para o canal 💕
@Matheuspaltian
@Matheuspaltian Жыл бұрын
parabens pelo teu video guria!! muito bom o conteudo! Me inscrevi aqui
@eduardoalmeida4692
@eduardoalmeida4692 9 ай бұрын
Muito bom, ajudou um iniciante. Obrigado
@skyjl482
@skyjl482 8 ай бұрын
Muito massa, adorei
@isabellemedeiros82
@isabellemedeiros82 2 жыл бұрын
Obrigadaaaa pelo conteúdoooo! Simplesmente sensacional! Já assisti uma 10 vezeeees kkkkkkkkk
@franciscoadesousa4112
@franciscoadesousa4112 3 жыл бұрын
Excelente explicação!! Parabéns.
@rogeriocurtio7683
@rogeriocurtio7683 2 жыл бұрын
Estou fazendo o projeto aqui em casa vamos começar hehe
@guilhermeflorencio1333
@guilhermeflorencio1333 2 жыл бұрын
manja demais em, está me ajudando muito. Meus parabéns pelo vídeo.
@Thom.Zille.
@Thom.Zille. 3 жыл бұрын
Ótimo vídeo, muito bem explicado e objetivo. Parabéns!
@leticiaalmeida6498
@leticiaalmeida6498 Жыл бұрын
Muito boa a explicação , muito obrigadaa
@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.
@fenixmiranda
@fenixmiranda Жыл бұрын
Excelente!!! Parabéns pela didática
@DownGaming
@DownGaming 3 жыл бұрын
Bom demaaaais esse canal! To fazendo um site pra mim e esta me ajudando muito.
@willianbatista2052
@willianbatista2052 3 жыл бұрын
Que vídeo maravilhoso, muito obrigado pelo conteúdo!
@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!
@nicolasoliveira9917
@nicolasoliveira9917 3 жыл бұрын
Que sensacional! Já fiz. 😍
@Gustavo9245
@Gustavo9245 3 жыл бұрын
Muito bom o seu vídeo, fiz uma alteração de cores aqui para a minha pagina , vou mandar no instagram
@HunterintheQ
@HunterintheQ 2 жыл бұрын
Didática maravilhosa!
@thalitaalbuquerque4602
@thalitaalbuquerque4602 3 жыл бұрын
Quando puder grava um vídeo abordando um pouco mais sobre deixar o site responsivo.
@giovanna.moeller
@giovanna.moeller 3 жыл бұрын
já tem mais vídeo aqui sobre no canal
@vinicius2k332
@vinicius2k332 3 жыл бұрын
Muito boa a explicação, muito obrigado pelo video! Ajudou muito.
@raphael1728
@raphael1728 Жыл бұрын
Muito boa suas explicações, moça... bem clara para falar, assim bem fácil para entendermos, parabéns
@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 жыл бұрын
vem pro css puro hahahah
@guilhermedenardi1077
@guilhermedenardi1077 3 жыл бұрын
@@giovanna.moeller juro que estou tentando
@pablosalazar8945
@pablosalazar8945 2 жыл бұрын
@@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.
@robsonfranciscojose9871
@robsonfranciscojose9871 10 ай бұрын
Maravilhoso😊 Continue fazendo ótimos conteúdos Já ganhou um +1 subscritor leal
@vivianezzt
@vivianezzt 2 жыл бұрын
tá me ajudando muito no meu aprendizado viu!!!!
@adaltofreire4109
@adaltofreire4109 2 жыл бұрын
Muito bom, esta de parabéns!
@lucassoares4044
@lucassoares4044 Жыл бұрын
video muito bom vlw mesmo, eu consegui fazer
@a_catarin4971
@a_catarin4971 Жыл бұрын
você me salvou muito moça, obg❤❤❤
@alexandrenogueira8680
@alexandrenogueira8680 2 жыл бұрын
Muito bom, parabéns!
@LeonardoSantos-jk1tp
@LeonardoSantos-jk1tp Жыл бұрын
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.."
@nivaldonilngn
@nivaldonilngn 2 жыл бұрын
Parabéns, Aprendi muito
@jorge2766
@jorge2766 2 жыл бұрын
Que vídeo foda! Parabéns!
@vi_developer
@vi_developer 2 жыл бұрын
adoreiii !!
@mininusequeci
@mininusequeci Жыл бұрын
Thanks girl code!
@heisenpiusca6940
@heisenpiusca6940 3 жыл бұрын
Muito legal, parabens pelo conteudo!
@gabrielledossantossoares7727
@gabrielledossantossoares7727 3 жыл бұрын
Simplesmente amei!!!
@giovanna.moeller
@giovanna.moeller 3 жыл бұрын
❤️❤️❤️
@candidofinda9647
@candidofinda9647 2 жыл бұрын
Muito bom o seu video
@Eu_Brunolb
@Eu_Brunolb 2 ай бұрын
ficou muito legal
@Macdest1
@Macdest1 3 жыл бұрын
Giovanna sensei, domo arigatou! 🙇🏻
@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
@gunzur
@gunzur 2 жыл бұрын
Massa
@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
@willamy2211420
@willamy2211420 2 жыл бұрын
Top
@candidofinda9647
@candidofinda9647 2 жыл бұрын
Excelent jovem
@yurisouza4587
@yurisouza4587 2 жыл бұрын
MEUDEUS VC SALVOU MINHA VIDA!!! OBG
@Edu_Duarte43
@Edu_Duarte43 3 жыл бұрын
Obrigado pelo conteúdo! :)
@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!! ❤️❤️❤️
@onlydollar.trading
@onlydollar.trading 2 жыл бұрын
Sobre os botões, qual a diferença de usar ou ?
@felipechagas8003
@felipechagas8003 2 жыл бұрын
Parabéns pelo conteúdo, só acho que deveria ser mais frequente, e ter mais projetinhos, vc tem futuro.
@rogeriocurtio7683
@rogeriocurtio7683 2 жыл бұрын
Muito 10 : - )
@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 ?
@ronaldo0grande
@ronaldo0grande 2 жыл бұрын
animal, curti pra caralho
@adrianom.4741
@adrianom.4741 2 жыл бұрын
Acho que ensinar assim com pequenos projetos é bem melhor do que ficar só mostrando tag, códigos sem aplicação visível...
@na_panfletos_e_cartoes
@na_panfletos_e_cartoes 2 жыл бұрын
Aqueles carreteis de lojas (propagandas) encontradas no facebook segue a mesma linha?
@evandrorodrigues8431
@evandrorodrigues8431 2 жыл бұрын
Ótimo conteúdo! Caso eu queira inserir um HEADER, posso inserir sem alterar os cards (css)?
@raeldosbeats
@raeldosbeats 2 жыл бұрын
Muito top!!!
@jhonathan4883
@jhonathan4883 3 жыл бұрын
De mais 🥰
@thalitaalbuquerque4602
@thalitaalbuquerque4602 3 жыл бұрын
Top!
@vitorpetri1376
@vitorpetri1376 3 жыл бұрын
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 жыл бұрын
Simmm eu prefiro especificar!! E sou eu mesma que faço hahahah mas sempre tiro inspirações da net!
@codinginrainbows513
@codinginrainbows513 2 жыл бұрын
muito legal! qual o modelo do teclado que tu usa?
@ihorzhuk4949
@ihorzhuk4949 2 жыл бұрын
Привет(Hi). You're doing well.(у тебя все круто)
@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!
@marceloaugsutodev
@marceloaugsutodev Жыл бұрын
nenhum, ela apenas escreve demais KKKKKKKKKKKK
@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 Жыл бұрын
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!!
@erislandia
@erislandia 3 жыл бұрын
😍😍😍
@linecker94
@linecker94 2 жыл бұрын
Não entendi nada sobre colocar a img dentro da div e não vi mudança nenhuma.
@codetechannel
@codetechannel Жыл бұрын
Som do teclado é terapêutico ksksks
@thaiseribeiro147
@thaiseribeiro147 2 жыл бұрын
por deus ensina a usar o visual code
@HailtonAssisdaSilva-jx3fn
@HailtonAssisdaSilva-jx3fn Жыл бұрын
Esse canal ainda existe? Tem curso gratuito de html5? Se ainda existir e tiver eu vou me inscrever. Bom dia.
@lucasribeirodeoliveira694
@lucasribeirodeoliveira694 3 жыл бұрын
Primeiro a dar like
@TheFernandojrcoroa
@TheFernandojrcoroa 2 жыл бұрын
porque você chama o nome da tag antes do nome da classe no css? é realmente necessário?
@laurindo_nick
@laurindo_nick 5 ай бұрын
moça onde você achou esses icons?
@juansantiago2664
@juansantiago2664 2 жыл бұрын
m a r a v i l h o s a
@augustosilva33
@augustosilva33 Жыл бұрын
Não ficou legal . No Motorola . Na verticsl corta div primeira . Na horizontal as div fica inblock .
@itzsena1688
@itzsena1688 3 жыл бұрын
oi eu tenho um html que preciso fazer consegue me ajudar?
HTML Full Course - Build a Website Tutorial
2:02:32
freeCodeCamp.org
Рет қаралды 7 МЛН
Alternando entre Light Mode/Dark Mode com CSS e Javascript Puro
14:50
Giovanna Moeller
Рет қаралды 4,5 М.
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 11 МЛН
Survive 100 Days In Nuclear Bunker, Win $500,000
32:21
MrBeast
Рет қаралды 149 МЛН
Desafio Front-end Mentor #1 - Card de Resumo do Pedido - HTML/CSS
35:36
Giovanna Moeller
Рет қаралды 22 М.
Entendendo sobre position no CSS
12:09
Giovanna Moeller
Рет қаралды 72 М.
Como fazer três CARDS com HTML5 e CSS3 | GabiCode
13:31
GabiCode
Рет қаралды 6 М.
Criando um formulário de login responsivo com HTML e CSS
23:17
Giovanna Moeller
Рет қаралды 88 М.
Card transparente usando HTML5, CSS3 e JavaScript - animações e efeitos.
30:38
CSS GRID na PRÁTICA - Tutorial Completo
25:21
Fernanda Kipper | Dev
Рет қаралды 35 М.
CARD COM BOTÃO DE LER MAIS E MENOS | HTML, CSS e JAVASCRIPT
20:18
Larissa Kich
Рет қаралды 14 М.
#ScriptFE: CSS Grid - Layout responsivo em 15 minutos
14:38
Násser Yousef Ali
Рет қаралды 51 М.
CSS Grid Layout e Flexbox - Quando Utilizar
39:09
Origamid
Рет қаралды 648 М.