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

Componente do cartão de visualização de estatísticas

Augusto C 140

@weslei573

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@R3ygoski

Posted

Olá Augusto, parabéns pela conclusão do seu projeto, ele está bem semelhante ao design proposto.

Gostaria de te dar algumas dicas, notei que no seu seletor body tem uma propriedade de max-width: 1440px, a primeira vista isso parece que não causa problemas, mas em telas maiores como 1600px por exemplo, a imagem fica desalinhada, isso porque o body não chega até o limite da tela, para solucionar isso você pode remover esse max-width e no lugar colocar width: 100%.

Em relação à abordagem responsiva no desenvolvimento de projetos, gostaria de recomendar a adoção do Mobile-First Workflow. Esta metodologia prioriza a criação para telas menores, como 320px ou 375px, expandindo então para telas maiores. Este método é geralmente mais intuitivo e requer apenas o uso de (min-width: <valor>) para aplicar a responsividade. Além disso, se estiver familiarizado com o Tailwind CSS, essa abordagem pode ser ainda mais eficiente, visto que o Tailwind CSS opera por padrão seguindo o fluxo de trabalho Mobile-First.

Agora a respeito de semântica, notei que você utilizou algumas tags que poderiam ser ajustada para refletir melhor a semântica, duas delas seriam a div.section e a article.foto, no lugar dessa <div>, o que seria mais semanticamente correto que ela fosse uma <article> ao invés de div, e no article.foto, o mais correto seria que fosse uma <figure> ao invés de <article>.

E também sobre o HTML, eu gostaria de dar outras duas dicas, a primeira é sobre evitar estilização inline, por exemplo na sua <h1> tem uma <span> que tem esse tipo de estilização, isso em projetos pequenos não traz problemas graves, mas em projetos grandes isso pode atrapalhar muito na manutenção do código. E também sobre a mistura de inglês com português ao nomear classes, isso também não tem problema em projetos pessoais e pequenos, mas em projetos grandes e de muitas pessoas isso pode vir a ser um problema.

E novamente, parabéns por ter concluído seu desafio, ele ficou realmente muito bem feito e semelhante ao design proposto, caso tenha surgido alguma duvida sobre algo que falei, sinta-se a vontade para perguntar aqui nos comentários, que tentarei responder da melhor forma possível.

Marked as helpful

0

Augusto C 140

@weslei573

Posted

Gratidão pelas dicas @R3ygoski

1

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