Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonials grid section

@LucianoOliveira1

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


EN: This was one of the challenges that seemed to be easier than they really are. As long as I did the mobile part, everything went well. However, when starting to work with the desktop version I had a little difficulty getting the size of the cards and the elements inside them (image and text) to be adjusted according to the resolution. For now, the closest I could get to the goal was this, but I'll study more so that I can adjust this in the future and don't have so much difficulty in the next challenges!

Feel free to leave any feedback about the solution or the code! Thank you very much in advance!

PT: Esse foi um dos desafios que pareciam ser mais fáceis do que realmente são. Enquanto fazia a parte do mobile, tudo ocorria bem. Porém, ao começar as trabalhar com a versão desktop eu tive um pouco de dificuldade em fazer com que o tamanho dos cards e os elementos dentro deles (imagem e texto) ficassem ajustados conforme a resolução. Por hora, o mais próximo que consegui chegar do objetivo foi isso, mas vou estudar mais para que eu que consiga ajustar isso futuramente e não tenha tanta dificuldade nos próximos desafios!

Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Fala Luciano, tudo bem? Parabéns pelo desafio!

Esse tutorial aqui vai te dar o passo a passo do zero pra fazer esse desafio ficar 100% igual e além de explicar a maioria das propriedades de GRID: https://www.youtube.com/watch?v=rg7Fvvl3taU

vc tem que adicionar o background cinza no body pra ele pegar a tela toda, nesse site atual ele nao pega a largura toda.

Seu html está funcionando, mas você pode melhorá-lo usando tags semânticas e substituir os divs, por exemplo, o parágrafo com a citação a tag de marcação <blockquote> desta forma você irá envolver cada bloco de elemento com a melhor tag. Lembre-se <div> é apenas um elemento de bloco sem nenhum significado.

Aqui um guia com todas tags semanticas: https://www.w3schools.com/TAgs/default.asp

👋 Espero ter ajudado e continue no foco!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord