Design comparison
Solution retrospective
Nothing in particular
What challenges did you encounter, and how did you overcome them?Many
What specific areas of your project would you like help with?Any help is accepted
Community feedback
- @R3ygoskiPosted 8 months ago
Olá novamente Leticia! Seu projeto ficou muito bom, ele se assemelha muito ao design proposto.
Notei que você utilizou tags
<button>
para fazer aquelas áreas de informação, o mais apropriado a usar ali seriam<div>
ou<span>. Usamos a tag
<button>` geralmente para criar algum elemento interativo.Quanto aos
<span>
dentro das tags<button>
, geralmente usamos o<span>
para agrupar ou aplicar estilo a textos. No entanto, como no seu projeto o texto funciona como um bloco independente, seria mais apropriado usar a tag<p>
ou até uma tag de cabeçalho.E sobre o a tag
<svg>
, ela acaba muitas vezes ficando verboso dentro do seu arquivo HTML, uma alternativa seria utilizar uma tag<img/>
, bastando apenas passar o diretório dele nosrc
.Por último, observei que você não implementou a responsividade no projeto. Isso faz com que o site fique desestruturado em telas menores, como as de celulares. Na pasta de design do projeto, você encontrará imagens específicas para desktop e mobile. A ideia é tornar o projeto responsivo, adaptando-o tanto para desktops quanto para dispositivos móveis.
Caso você tenha se interessado de ver sobre essa parte de responsividade, deixarei aqui dois links úteis: MDN - Media Query e W3School - Responsive Design.
Caso surja alguma dificuldade com a responsividade, já deixo aqui uma dica que seria de fazer o projeto em mobile-first workflow, talvez dessa forma seja mais intuitivo e simples para você compreender as media-query.
Se tiver alguma dúvida, basta comentar aqui que tentarei responder da melhor forma possível. E novamente, parabéns pelo seu projeto, ele ficou muito bom mesmo.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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