Design comparison
Solution retrospective
acho que fui bem nesse desafio, com certeza tem algo a melhorar no projeto, porém não consegui identificar
i think i did well in this challenge, of course there is something to improve in the project, but i couldn't identify it
What challenges did you encounter, and how did you overcome them?tive alguns problemas em adivinhar o tamanho de alguns elementos, fui testando os tamanhos e vendo qual ficava mais parecido com o desafio
I had a bit of trouble guessing the size of some elements, since im not a pro member, so I tried out the sizes and saw which looked the most like the challenge
What specific areas of your project would you like help with?acho que o projeto esta bom, mas há sempre algo a melhorar, por isso, se houver algo no código que possa ser melhorado, gostaria de saber.
i think the project is good, but there is always something to improve, so if there is something in the code that could be improved, i would like to know.
Community feedback
- @R3ygoskiPosted 6 months ago
Olá novamente Kauê, parabéns, seu projeto ficou extremamente semelhante ao design proposto.
Uma dica, utilize uma extensão de navegador chamada PerfectPixel, porque ela ajuda bastante a deixar o projeto semelhante ao design.
Uma coisa que notei no seu CSS foi esse trehco:
.attribution > p
, esse operador>
serve para selecionar o filho direto do elemento, assim evitando de selecionar os netos. Mas no seu<footer class="attribution">
tem apenas uma tag<p>
, então esse operador acaba sendo redundante.Outra dica, agora a respeito de HTML, notei que faltou algumas partes de semântica, na sua
<div class="social-links">
você poderia trocar essa<div>
por<nav>
, isso porque essa<div>
está armazenando um conteúdo relacionado a navegação. Também<div class="profile">
que poderia ser tanto uma<section>
, quanto<article>
, isso devido a ser uma informação que está relacionada entre si.Agora uma coisa que notei que faltou. Quando passa o mouse sobre os botões (as tags
<li>
), ele não muda o cursor, para fazer com que o cursor altere e fique aparecendo aquele cursor de click, você pode adicionar esse propriedade nas suas<li>
:cursor: pointer;
E sobre o
attribution
, ele está muito pequeno, eu mal havia conseguido ver ele de primeira quando abri o site, isso pode até mesmo ser um problema de acessibilidade pra quem tivesse algum problema de visão. Para corrigir isso você pode colocar direto1rem
no font-size, ou utilizar umclamp()
para deixar mais dinâmico, eu utilizei umclamp(0.8325rem, 2vw, 1rem)
e deixou mais visível.Novamente, parabéns, seu projeto ficou muito bom mesmo, continue praticando e se aprimorando. Caso algo que eu tenha dito, não tenha ficado claro, por favor, comente abaixo, que tentarei ajudar da melhor forma possível.
Marked as helpful0@kauevecchiaPosted 6 months ago@R3ygoski Olá Bernardo, muito obrigado pelas dicas, eu tinha percebido que faltou um cursor: pointer no <li>, porém eu tinha tentado colocar no li:hover e não deu certo, agora que coloquei só no li como você disse, deu certo. Em relação ao font size do .attribution, eu vi que precisava mudar porém tinha esquecido, mas já corrigi. E obrigado pelas outras dicas, vou tentar melhorar isso nos próximos projetos.
1 - @0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
MAKING ACCESSIBLE LINKS:
- The links like
Github
,Frontend Mentor
are needed to be actual<a>
elements. But currentlya
elements are empty without any actual values in it.
- This is the current markup,
<ul> <li> <a href="#"></a> GitHub </li> <li> <a href="#"></a> Frontend Mentor </li> ..... </ul>
- In order to make this solution accessible, we need to utilize
<a>
elements. Here's the example
<ul> <li> <a href="#">GitHub</a> </li> <li> <a href="#">Frontend Mentor</a> </li> ..... </ul>
- In the above example, we wrapped the links with actual
a
elements. We moved the text likeGithub
fromli
toa
because after refactoring the code witha
we need to style them instead ofli
elements.
- As i said you need to style
a
elements instead of stylingli
, so that we could achieve an accessible solution.
- If you have any questions or need further clarification feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0
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