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.
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.
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
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 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
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!
![ลองสุ่มไอโฟน 990 โกงมั้ย? [ โกงมั้ยครับ ep.101 ] | DOM](http://i.ytimg.com/vi/bfsWe0j492k/mqdefault.jpg)
↗ Comunidade no Discord: discord.gg/jSAgxzhEH8
↗ Instagram: instagram.com/tricodando/
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
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!
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.
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.
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.
Showww
valeu, obrigado
Obrigado a você! Continue acompanhando o canal. Abaço!
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.
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.
Ganhou mais um escrito parabéns🎉🎉🎉🎉🎉
Muito obrigado, fico feliz pelo comentário, abraço!
Ficou fera, irmão 🖥️♥️
Obrigado, continue acompanhando, esses feedbacks me motivam.
Muito Obrigado amigo
Obrigado a você pelo feedback, bom saber que foi um conteúdo relevante. Bons estudos!
show!
Obrigado!
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.
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 th-cam.com/video/Us7ugcmdvog/w-d-xo.html
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.
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 link do discord esta dando invalido mano
Obrigado por avisar! discord.gg/jSAgxzhEH8
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
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
O que é Emet?
emet abreviation... vc digita algo e o codigo se auto-completa.
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!
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
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.
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
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!