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

social_link_profile_Responsive

@Graciano1997

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

@R3ygoski

Posted

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 helpful

1

@Graciano1997

Posted

@R3ygoski realmente estou muito grato pelas recomendações.

Agora vou implementar no projecto.

obrigado por me ajudar a melhorar

1

@Graciano1997

Posted

@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

@R3ygoski

Posted

Olá 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 helpful

0

@Graciano1997

Posted

@R3ygoski entendi, obrigado acabei de refinar a solução

1

@Squing0

Posted

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 helpful

1

@Graciano1997

Posted

@Squing0 thank for your recommendations.

this helps me to improve to my best version. Again thanks

0

@Graciano1997

Posted

@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 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