Card para web com HTML e CSS Puro
HTML-код
- Опубликовано: 24 авг 2024
- ↗️ Comunidade no Discord: / discord
↗️ Instagram: / tricodando
Olá Dev, nesse laboratório vamos comentar sobre a importância de se utilizar sketchs(esboços) como uma etapa para antecipar problemas.
Em seguida vamos codar 3 cards, componentes muito utilizados na web com HTML e CSS puro. Então bora tricodar.
Projeto: github.com/tri...
Você também pode gostar
Minicurso Python: • Minicurso de Python - ...
Minicurso Algoritmo: • Minicurso de Algoritmo...
↗ Comunidade no Discord: discord.gg/dBAsk7UV
↗ 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
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!
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!
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.
valeu, obrigado
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.
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.
Muito Obrigado amigo
Obrigado a você pelo feedback, bom saber que foi um conteúdo relevante. Bons estudos!
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!
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.
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.
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.
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
show!
Obrigado!
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
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
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.
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
div nao é semantico entao atrapalha seu site eu sei disso pq eu estudo com o gusmao tropa do ini1b avançando ao profi
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
tri booom de mAIS, HUI UHUI
Obrigado Monique, fiquei feliz :D com seu comentário.
Manda mais aiii tá tri bom
O que é Emet?
emet abreviation... vc digita algo e o codigo se auto-completa.
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.