Design comparison
Solution retrospective
Next time I will use a Css Framework.
I was out. But now I just come back
What challenges did you encounter, and how did you overcome them?No challenge
What specific areas of your project would you like help with?Any
Community feedback
- @R3ygoskiPosted 6 months ago
Olá Graciano, parabéns pela conclusão do seu projeto. Gostaria de dar algumas dicas quanto a ele.
A primeira é sobre algumas cores do seu projeto, como Lyle mencionou, a cor de fundo não é preto total, ela é um cinza escuro na verdade, ela é a cor que você utilizou no seu card, e o card é mais claro.
A respeito de semântica HTML, no lugar de
<section class="avatarContainer">
o mais correto é utilizar<main>
, isso porque esse é o seu conteúdo principal.Outra coisa é
<nav class="linkNavContainer">
não está semanticamente correto, isso porque<nav>
é utilizada para navegação interna de uma página, não existe uma tag semântica dedicada a links externos, então o mais correto é utilizar uma<ul>
e<li>
, isso porque de certa forma esses botões são uma lista.Sobre o CSS, no seu seletor
a
, o correto não é o::active
, mas sim o::hover
, isso porque o hover ativa ao passar o cursor por cima, e o active só ativa enquanto estiver clicando no elemento.E parabéns pelo seu projeto, continue praticando e se aprimorando, se precisar de ajuda, é só comentar aqui embaixo que tentarei ajudar da melhor forma possível.
Marked as helpful1@Graciano1997Posted 6 months ago@R3ygoski realmente estou muito grato pelas recomendações.
Agora vou implementar no projecto.
obrigado por me ajudar a melhorar
1@Graciano1997Posted 6 months ago@R3ygoski
ola, espero e desejo q estejas bem, agradeceria se voltasses a dar uma olhada neste projeto, terminei de implementar as vossas recomendações
1@R3ygoskiPosted 6 months agoOlá novamente @Graciano1997, dei uma olhada e você melhorou muitas partes do seu projeto, ele está ótimo parabéns!
Só que ele está com problema de responsividade, ele não fica estilizado de forma correta em telas entre 320px-374px, e nem em telas maiores que 1441px.
Isso está acontecendo por causa do @media, você configurou para que a estilização só fosse aplicada em telas entre 375px-1440px, mas isso não era necessário.
Para corrigir isso você pode pegar toda a estilização que está presente dentro do @media, e colocar ele fora do @media, assim deixando o @media vazio. Dessa forma ele vai aplicar em todas as telas a estilização.
E uma dica, nunca faça a estilização apenas dentro de @media, sempre faça ela fora, e utilize os @media para fazer com que a estilização fique de acordo com cada tamanho de tela.
Meus parabéns pelo esforço e dedicação em aprimorar o seu projeto, você deu um grande passo com isso, e está indo muito bem. Caso tenha ficado alguma duvida, já sabe, só perguntar abaixo.
Marked as helpful0@Graciano1997Posted 6 months ago@R3ygoski entendi, obrigado acabei de refinar a solução
1 - @Squing0Posted 6 months ago
Overall, quite a good design here. The background colour should not be pure black though and should instead be the off black provided in the style guide. You also need some more margins to make the main section here a bit taller to be closer to the design. Also consider using more semantic tags like 'main' for your main content in the page. Your mobile design also doesn't change here, a simple media query would fix this problem. Finally, try not to use rem instead of pixels when possible as this is a responsive measurement.
Marked as helpful1@Graciano1997Posted 6 months ago@Squing0 thank for your recommendations.
this helps me to improve to my best version. Again thanks
0@Graciano1997Posted 6 months ago@Graciano1997
Hello, I have already implemented your suggestions . would you mind to check it ? it will help me too much
0
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