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

Social proof section

@LucianoOliveira1

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


EN: This is my solution for the Social proof section challenge. Feel free to leave any feedback about the solution or the code! Thank you very much in advance!

PT: Esta é a minha solução para o desafio Social proof section. Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Luciano, congrats on finishing the challenge! pretty good job in my opinion

If I have your permission I would like to give you some advices.

Good job with your semantics I like how you used sections two separated all the semantic related content, but you could also have used the article tag in your div class='profile', it fits perfectly the semantic of being an article each one of them.

Also don't forget that each section need to have at least one heading, for example, in the names of the profiles you could have used h2 or h3 instead of just a p.

For the styles I would only advice to increase a bit the size of the general layout cause it looks a bit tiny compared to the solution.

But anyway you did a great job, hope this feedback helps you in your future projects!

Marked as helpful

1
Lucas 👾 104,420

@correlucas

Posted

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

Sua solução ficou muito boa cara, a unica coisa que ficou faltando foi o alinhamento para todos elementos verticalmente centralizados que você pode fazer usando min-height: 100vh e usar as propriedades flex pra alinhar, segue o código abaixo:

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

Outra coisa que você pode fazer, como o David comentou ali, é usar as tags semanticas pra segurar os grandes blocos de informação, lembre-se que div sao so elementos de blocos sem significados entao de preferencia sempre a tags semanticas, por exemplo o texto do card que tem uma citação, voce pode usar <blockquote> que é uma tag usada para quote/citação.

Aqui uma lista com todas TAGS SEMANTICAS do html: https://www.w3schools.com/html/html5_semantic_elements.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