Exatamente, existe um mar de tecnologias hoje em dia, e isso é bom, temos mais opções, mas se o simples resolve, por que não usar? Obrigado pelo comentário!
Vídeo muito bom, no final o meu ficou alinhado em ordem vertical, dei uma olhada no seu código no GitHub e vi meu erro, deveria ter colocado um "DIV" para cada "card" e retirar aquele que cobria todos! Excelente resultado mano, brigadão pelo conteúdo!
Muito bem, primeiro por reconhecer que errou, afinal, como desenvolvedores, só definimos comandos para uma máquina atuar. Se passarmos comandos equivocados, a máquina atua de forma equivocada. Outro ponto é que lidar com códigos exige perícia e essa é uma das habilidades que um desenvolvedor aprimora com o tempo. Fico feliz por não ter se conformado com o resultado, mas teve a iniciativa de correr atrás do detalhe para realizar o ajuste que faltava.
Opa, nesse vídeo estava utilizando a extensão Tabnine: AI Autocomplete, você também pode gostar da extensão Auto Rename Tag, ela te ajuda a modificar as tags HTML/XML.
Nesse caso você precisa definir um layout para essa disposição, uma das possibilidades seria a seguinte: 1. Criar uma div com a propriedade display:flex para envolver as 3 imagens. (Nesse passo você está criando uma faixa com as 3 imagens uma ao lado da outra) 2. Replicar essa div que abraça as imagens por 3 vezes para formar as 3 linhas. (Aqui você está replicando 3 faixas com 3 imagens cada) 3. Por útlimo, criar uma div global que abraça essas div's que formam as linhas com a propriedade display:block. (Nesse último passo você organiza as faixas em bloco, uma faixa abaixo da outra)
Já fiz a versão desse projeto em 3x3, você pode acessar pelo GitHub, mas vou ver se consigo gravar pra galera. github.com/tricodando/card-html-css/tree/column-3x3
Provavelmente deve ser algum detalhe na folha de estilo css. Se preferir pode comparar o seu código com o projeto, esse é o link: github.com/tricodando/card-html-css
O vídeo ficou muito bom, só não ficou ótimo pq cortou o final da estilização do CSS, mas deu pra encontrar no GitHub através do link na descrição. De qualquer forma ganhou meu like.
HTML semântico sempre vai ajudar nas buscas, seo, até msm para pessoas com deficiência visual quando o HTML e semântico eles conseguem entender 100% seu site, quando não é simplesmente não aparece informações nenhuma nenhuma orientação ou descrição para eles. Então é boa prática se usar sempre semântico
O colega @hugocruz3613 respondeu perfeitamente, SEO e acessibilidade digital, inclusive a hashtag #PraCegoVer é uma campanha com objetivo de disseminar essa cultura de acessibilidade nas redes sociais, no HTML podemos aplicar esse conceito com o atributo 'alt' nas tags para definir audiodescrições e textos alternativos.
Provavelmente são as definições de altura e largura no arquivo css. Confere o seu código com o projeto no GitHub, esse é o link: github.com/tricodando/card-html-css
Oi, você pode conferir o projeto na íntegra no repositório do GitHub e comparar os códigos com calma. Acesse esse link: github.com/tricodando/card-html-css
Opa, foi no minuto 7:23? Se sim, eu só copiei o código do primeiro card pra adiantar os outros dois, De qualquer forma você pode acessar o projeto completo nesse link pra conferir e comparar: github.com/tricodando/card-html-css
Mano seu video e principalmente seu código é tão quebrado que só de copiar e colar (QUE NA TEORIA ERA PRA DA CERTO) da totalmente errado e não funciona!!!! kkkkkk mds quem concorda da like kkkk, pesquisa de satisfação
Fala Mateus, cara, clonei o projeto em dois ambientes com navegadores diferentes, tudo normal. Outras pessoas também conseguiram, é um projeto tão simples que nem tem dependências, verifica a pasta de assets, confere o path das imagens, deve está fazendo algo de errado aí. Abraço!
↗ Comunidade no Discord: discord.gg/jSAgxzhEH8
↗ Instagram: instagram.com/tricodando/
Vc não tem ideia do quanto me ajudou, obrigado 🤩
Que bom que te ajudei, isso me motiva a continuar e buscar melhorias. Continue focado!
Estou gostando. No meu tempo ainda não tinha html5 , cantos arredondados eram feitos com imagens editando os cantos.
Sim, antigamente era osso de criar alguns efeitos, ainda bem que as tecnologias vem evoluindo. Obrigado por estar acompanhando.
Que legal.. Parabéns!
Tão simples e agrega tanto no portfólio ao mesmo tempo!
❤
Exatamente, existe um mar de tecnologias hoje em dia, e isso é bom, temos mais opções, mas se o simples resolve, por que não usar? Obrigado pelo comentário!
cala a boca andrefelipe-uy2ru h
gyj
rye
r
y
r
Obrigado estou começando agora na área de HTML e CSS e este projeto vai me ajudar a criar um portifólio!
Muito bem, continue assim. Sucesos na carreira!
Vídeo muito bom, no final o meu ficou alinhado em ordem vertical, dei uma olhada no seu código no GitHub e vi meu erro, deveria ter colocado um "DIV" para cada "card" e retirar aquele que cobria todos! Excelente resultado mano, brigadão pelo conteúdo!
Muito bem, primeiro por reconhecer que errou, afinal, como desenvolvedores, só definimos comandos para uma máquina atuar. Se passarmos comandos equivocados, a máquina atua de forma equivocada. Outro ponto é que lidar com códigos exige perícia e essa é uma das habilidades que um desenvolvedor aprimora com o tempo. Fico feliz por não ter se conformado com o resultado, mas teve a iniciativa de correr atrás do detalhe para realizar o ajuste que faltava.
qual é o valor de border-radius no style.
No card é 12px, no botão do card 4px, você pode conferir todas as propriedades no projeto, o link está na descrição.
Que banca esse negócio de planejar o projeto no figma antes de botar a mão na massa! ❤
Sim, é bom ter uma visão mínima antes de iniciar qualquer projeto, eu prefiro rabiscar algo ou criar um protótipo de baixa fidelidade.
otimo video, qual extensão vc usa para completar os codigos?
Opa, nesse vídeo estava utilizando a extensão Tabnine: AI Autocomplete, você também pode gostar da extensão Auto Rename Tag, ela te ajuda a modificar as tags HTML/XML.
E se eu quiser adicionar 9 fotos 3 em cima 3 no meio e 3 em baixo ?
Nesse caso você precisa definir um layout para essa disposição, uma das possibilidades seria a seguinte:
1. Criar uma div com a propriedade display:flex para envolver as 3 imagens.
(Nesse passo você está criando uma faixa com as 3 imagens uma ao lado da outra)
2. Replicar essa div que abraça as imagens por 3 vezes para formar as 3 linhas.
(Aqui você está replicando 3 faixas com 3 imagens cada)
3. Por útlimo, criar uma div global que abraça essas div's que formam as linhas com a propriedade display:block.
(Nesse último passo você organiza as faixas em bloco, uma faixa abaixo da outra)
@@tricodandoPode fazer um vídeo explicando?
Já fiz a versão desse projeto em 3x3, você pode acessar pelo GitHub, mas vou ver se consigo gravar pra galera.
github.com/tricodando/card-html-css/tree/column-3x3
@@Gabs_zanforlin03160 ua-cam.com/video/Us7ugcmdvog/v-deo.html
Meus cards não estão ficando alinhados, um fica em cima o outro embaixo outro mais pro lado q o outro
Provavelmente deve ser algum detalhe na folha de estilo css. Se preferir pode comparar o seu código com o projeto, esse é o link: github.com/tricodando/card-html-css
Coloca um "DIV" para cada card seu, e tira aquele inicial que cobria todos por fora!
O vídeo ficou muito bom, só não ficou ótimo pq cortou o final da estilização do CSS, mas deu pra encontrar no GitHub através do link na descrição. De qualquer forma ganhou meu like.
Valeu, obrigado por avisar, vou cuidar com os cortes nos próximos.
Sabe me dizer o por quê tantas pessoas falam que é prejudicial ao código html escrever em divs ao invés do html semântico?
HTML semântico sempre vai ajudar nas buscas, seo, até msm para pessoas com deficiência visual quando o HTML e semântico eles conseguem entender 100% seu site, quando não é simplesmente não aparece informações nenhuma nenhuma orientação ou descrição para eles. Então é boa prática se usar sempre semântico
O colega @hugocruz3613 respondeu perfeitamente, SEO e acessibilidade digital, inclusive a hashtag #PraCegoVer é uma campanha com objetivo de disseminar essa cultura de acessibilidade nas redes sociais, no HTML podemos aplicar esse conceito com o atributo 'alt' nas tags para definir audiodescrições e textos alternativos.
Não consegui terminar, coloco as imagens mas ao abrir o Chrome fica apenas a imagens da uva em tela cheia, me ajuda onde estou errando?
Provavelmente são as definições de altura e largura no arquivo css. Confere o seu código com o projeto no GitHub, esse é o link: github.com/tricodando/card-html-css
valeu, obrigado
Obrigado a você! Continue acompanhando o canal. Abaço!
Ganhou mais um escrito parabéns🎉🎉🎉🎉🎉
Muito obrigado, fico feliz pelo comentário, abraço!
show!
Obrigado!
Ficou fera, irmão 🖥️♥️
Obrigado, continue acompanhando, esses feedbacks me motivam.
o link do discord esta dando invalido mano
Obrigado por avisar! discord.gg/jSAgxzhEH8
quantos pixel tem as imagens?
Olá, Fabrício, você pode conferir no repositório do projeto, segue o link: github.com/tricodando/card-html-css
Muito Obrigado amigo
Obrigado a você pelo feedback, bom saber que foi um conteúdo relevante. Bons estudos!
nossa vc explica direitinho, vlw👍🏼 já desenvolveu algum curso?
Obrigado pela atenção. Ainda não, mas estou amadurecendo a ideia de subir uma plataforma em alguma oportunidade.
O que é Emet?
emet abreviation... vc digita algo e o codigo se auto-completa.
Showww
Não funcionou, além disso você adicionou informações sem mostrar no vídeo o que complicou
Oi, você pode conferir o projeto na íntegra no repositório do GitHub e comparar os códigos com calma. Acesse esse link: github.com/tricodando/card-html-css
Tem como colocar links
Olá, para colocar links você pode usar essa tag de exemplo, basta substituir o endereço e o texto:
Texto do Link
Opa, parabéns pelo conteúdo me ajudou muito, tudo bem usar o projeto para postar no github?
Opa, que bom que ajudou. Claro pode usar sim, se possível compartilhe com +1 Dev!
muito rápido o vídeo, tiz tudo certinho, não ficou igual. eu uso o Firefox
Alguns detalhes podem mudar dependendo do navegador. Faça o download do projeto pra comparar, o link está na descrição.
tri booom de mAIS, HUI UHUI
Obrigado Monique, fiquei feliz :D com seu comentário.
Manda mais aiii tá tri bom
div nao é semantico entao atrapalha seu site eu sei disso pq eu estudo com o gusmao tropa do ini1b avançando ao profi
A parte mais importante, sobre imagem tu cortou do vídeo kkkk no final não entendi porra nenhuma
Opa, foi no minuto 7:23? Se sim, eu só copiei o código do primeiro card pra adiantar os outros dois, De qualquer forma você pode acessar o projeto completo nesse link pra conferir e comparar: github.com/tricodando/card-html-css
@@tricodando Era sobre o código da imagem do primeiro card, mas valeu.
Mano seu video e principalmente seu código é tão quebrado que só de copiar e colar (QUE NA TEORIA ERA PRA DA CERTO) da totalmente errado e não funciona!!!! kkkkkk mds
quem concorda da like kkkk, pesquisa de satisfação
Fala Mateus, cara, clonei o projeto em dois ambientes com navegadores diferentes, tudo normal. Outras pessoas também conseguiram, é um projeto tão simples que nem tem dependências, verifica a pasta de assets, confere o path das imagens, deve está fazendo algo de errado aí. Abraço!