HTML e CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Valmir, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • remove all margin from main tag
  • remove all padding from body
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  0

  ---

  

  Valmir Santana•80

  @valmirsantanepePosted about 2 years ago

  @denielden Excelentes dicas.... Eu comecei estudar posicionamento de elementos usando flexbox e tbm unidades de medidas relativas, mas por esta naquela fase inicial ainda estou sentindo um pouco de dificuldade na hora de aplicar os conceitos na praticas. Muito obrigado pela disponibilidade em ajudar. Sempre que puder comente meus códigos. É muito bom ter pessoas mais experientes ajudando no processo de aprendizado.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @valmirsantanepe You are welcome and keep it up 😁

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Oi Valmir,

  Sua página do desafio não tá online por causa de um erro no Github Pages. Acabei de ver que você está tendo alguns problemas para configurar seu preview site Github Pages. Nos meus primeiros dias, tentei usar o Github Pages também, mas era muito chato de configurar.

  Se você quiser continuar usando o Github Pages, aqui é um guia que ensina configurar passo a passo:https://docs.github.com/en/pages/quickstart.

  Meu conselho se você quiser configurar seu site rápido e sem stress, meu conselho é você usar o vercel.com ou netlify.com que são plataformas realmente mais fáceis de usar para live sites e são totalmente user-friendly, em questão de 5min tá tudo pronto. Tudo o que você precisa fazer é conectar a conta do Github, importar o repositório e fazer o deploy. O melhor deles é Vercel e é o que uso para meus desafios.

  Corrigindo isso, você precisa atualizar a solução com o novo link e poderemos ver a solução e te ajudar.

  Marked as helpful

  0

  ---

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @valmirsantanepe Só atualizar o link da solução e mandar bala irmao! Jaja eu olho

  Marked as helpful

  1

  

  Valmir Santana•80

  @valmirsantanepePosted about 2 years ago

  @correlucas

  Oi Lucas, acabei de ver aqui que realmente está ocorrendo esse problema, porem no github pages a pagina esta disponível.

  Segue o link: https://valmirsantanepe.github.io/nft-preview-card-component-main/

  Agradeço mais um vez pelo feedback e não deixe de comentar meus códigos.... :D Forte abraço!

  0