social_link_profile_Responsive

Community feedback

• 

  Bernardo Poggioni•5,360

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

  1

  ---

  

  Graciano Henrique•140

  @Graciano1997Posted 7 months ago

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

  Agora vou implementar no projecto.

  obrigado por me ajudar a melhorar

  1

  

  Graciano Henrique•140

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

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  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

  

  Graciano Henrique•140

  @Graciano1997Posted 7 months ago

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

  1
• 

  Lyle Patterson•60

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

  1

  ---

  

  Graciano Henrique•140

  @Graciano1997Posted 7 months ago

  @Squing0 thank for your recommendations.

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

  0

  

  Graciano Henrique•140

  @Graciano1997Posted 7 months ago

  @Graciano1997

  Hello, I have already implemented your suggestions . would you mind to check it ? it will help me too much

  0