3-column preview card compone flexbox for desktop and grid for mobile

Community feedback

• 

  Thiago Correa•350

  @ThiagoBRG60Posted 11 months ago

  Oi 👋🏻!

  O seu 3-column card ta muito bom, aqui ta o meu feedback e algumas sugestões:

  1 - Você incluiu a tag main no seu body, isso é muito importante pra ter um html mais semântico e definir o conteúdo principal do seu site.

  2 - Mesmo sendo um projeto simples, eu recomendo você adicionar o texto alternativo das imagens, isso é muito importante pra acessibilidade e pessoas usando leitores de tela.

  3 - Você usou quebra de linhas <br> para deixar as palavras nos lugares certos, uma outra forma de ter o mesmo efeito poderia ser definindo o width dos parágrafos.

  4 - Novamente, mesmo sendo um projeto simples, sempre dê bons nomes para identificar os elementos, vi que você usou "card1, 2 e 3", você poderia usar por exemplo "card-sedans, card-suvs, card-luxury", o mesmo serve para os botões, apenas sugestão mesmo, pois acredite, nomes são muito importantes também.

  5 - A única coisa que eu vi faltando aqui foi o card não ser responsivo em todas as telas, telas menores como do iphone SE fazem o card vazar para fora da tela.

  Em geral está tudo ótimo, você fez um bom trabalho. Sucesso com os estudos e feliz natal pra você também ! 🤝🏻

  1

  ---

  

  kaike torres•190

  @kaiketorresPosted 11 months ago

  @ThiagoBRG60 valeu pelo feedback, a dica dos nomes que posso dar para minhas divs e uma boa, e sobre a responsividade ainda tenho dificuldade pra deixar tudo responsivo mas de pouco em pouco vou melhorando, feliz natal novamente e bons estudos pra vc❤️

  1

  

  Thiago Correa•350

  @ThiagoBRG60Posted 11 months ago

  @kaiketorres Entendo, responsividade é um pouco dificil mesmo, mas as vezes até mesmo ajustando elementos no proprio css sem media queries ja faz metade do trabalho, usando por exemplo width e max-width em um elemento, faz ele diminuir de tamanho caso a tela fique menor.

  por exemplo: um card precisa ter 400px de largura, voce pode definir o max-width para 400px, e colocar o width em 90 ou 80% por exemplo, porque assim que o a tela diminuir, o efeito do width vai ser aplicado, assim mesmo que a tela diminua, o card sempre vai diminuindo junto, na teoria pode ser meio confuso de entender, mas na prática você vai ver que é bem simples.

  0