Responsive Profile Card [CSS Flex]

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi Leticia Fernandes, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor

  Muito legal a sua customização, parabéns por ter ido além do que o desafio pedia! Aqui algumas dicas pra vc:

  1.Ao invés de usar <div> pro bloco contendo o título principal, ao invés use <h1>, porque cada página precisa de um h1 pro título principal e siga a sequência se você adicionar outro título como h1, h2 , h3…

  2.Use unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Para fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

  3.Para melhorar o workflow e ganhar tempo você pode codar toda sua solução usando px e no final selecionar todo código CSS E converter automaticamente pra rem tudo que for px com esse plugin do VSCODE https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem ou usar esse sitehttps://pixelsconverter.com/px-to-rem

  Aqui minha solução caso vc queira consultar:https://www.frontendmentor.io/solutions/fresh-prince-card-component-vanilla-css-easter-eggs-6Qe2CAE0H8

  👋 Espero que essas dicas te ajudem e que você continue no foco!

  Marked as helpful

  1

  ---

  

  Leticia Fernandes•50

  @lichtlePosted about 2 years ago

  @correlucas Muito obrigada pelas dicas, Lucas! Aplicarei no meu código agora mesmo e irei comparar com a sua solução.

  1
• 

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  Hi, Leticia... Nice work, you did amazing... I see that you used an entirely different color theme, it's beautiful. I have some suggestions though...

  1. I'll like to ask, why did you use div for every content??. You can use the different levels of headings, the p tag, pre tag, for your content and style them as you like. I feel like the purpose of div is for grouping contents. So I'll advise you change the div with class name to an h1 tag. That will solve ya accessibility issues.
  2. I also checked ya code, I don't see anything wrong with the way you wrote it tho. One thing to note is that if you are using the justify-content: center; to center a div, you also need to include align-items: center for it to work.

  Nice work once again. Hope this helps.

  Marked as helpful

  1

  ---

  

  Leticia Fernandes•50

  @lichtlePosted about 2 years ago

  @Aik-202 Thank you so much for your feedback, Assurance! I'll update the code using your tips as soon as I can.

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @lichtle You are welcome, I'm glad I could be of help.

  0