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

3-column

@LarissaGiovanna

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@R3ygoski

Posted

Olá Larissa, parabéns pela conclusão do desafio, seu projeto ficou muito bem feito.

Gostaria de te dar algumas dicas, a primeira é sobre o design, se você quiser fazer seus projetos ficarem mais próximos do Design proposto, eu recomendo uma extensão chamada, PerfectPixel, ela ajuda muito nisso.

A segunda dica é sobre o seu HTML, ele não está errado, mas ele não está semântico, o que é algo importante, já que auxilia na acessibilidade e SEO, por exemplo sua <div class="container"> poderia ser uma <section> e todas as <div class="block"> poderiam ser <article>. Ainda no HTML, sobre as tags <br> o mais correto é utilizar elas apenas para quando for iniciar um novo parágrafo.

Agora a respeito de CSS, gostaria de começar pelas fontes, geralmente quando vamos trabalhar com fontes, utilizamos a unidade de medida rem, isso porque ela é relativa, ela se adapta as configurações de fonte do usuário, o que ajuda na acessibilidade. Já o px não, ele é absoluto e não altera de tamanho.

Edit: Eu não tinha reparado de primeira, mas parece que você utilizou ID's repetidos, isso não é uma boa prática, o correto é usar um id individual para cada elemento, sem repetições. Geralmente usamos o ID para fazer uma referência ao Javascript, quando você precisar de fazer essa parte só de estilização, o mais correto é utilizar as classes. Aqui por exemplo:

<a id="more" href="#">Learn More</a>

Poderia ser trocado esse id="more" por class="link".

E novamente, parabéns pelo seu projeto, ele ficou bem feito, continue praticando, se algo que eu disse não tenha ficado claro, por favor, comente aqui embaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

1

@LarissaGiovanna

Posted

@R3ygoski Obrigada novamente pelas sugestões e dicas!

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