3 column preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Paula Rodrigues,

  Congratulation on completing another frontend mentor challenge. Excellent work! I have some suggestions regarding your solution:

  • Page should contain a level-one heading. To tackle the accessibility issues in this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only.

  • What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.

  • In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.

  • Add border-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set border-radius to individual corners.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute, you can expose your site to performance and security issues.

  • line-height: 25pxUse a unitless line-height value to Avoid unexpected results. You can read more in mdn

  Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Oi de novo Paula, parabéns pelo desafio!

  Acabei de ver sua solução e ficou mto boa, vc colocou os cards pra crescerem o tamanho inteiro da tela propositadamente pra diferenciar um pouco do design do desafio?

  O design em sì tá mto bom, caso vc queira aproximar do estilo do desafio seria bom colocar o alinhamento vertical com flex e uma margem pra separar os cards das bordas. Alguns elementos estão fixos, como o bota por exemplo que está sentado com width: 100% isso pode causar problemas pq ele fica com a largura fixa e fica mais difícil de ajustar com o tamanho da tela. O ideal seria usar um valor real pro container tipo max-width: 1110px pro container e porcentagem ou valores relativos tipo % ou vh/VW pros cards de modo que eles se ajustem como base no valor inicial do container.

  Aqui minha solução caso vc queira ver como fiz tudo usando grid e os exemplos anteriores:

  https://www.frontendmentor.io/solutions/3-column-preview-card-vanilla-css-custom-design-and-hover-states-e5uAfmUT71

  Continue no foco

  Marked as helpful

  0

  ---

  

  Paula Rodrigues•250

  @paulaabroPosted about 2 years ago

  @correlucas foi um erro, tava seguindo o figma e lá não tá com background. Amei as cores da sua solução. Vc tem alguma sugestão de onde aprender grid?

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @paulaabro eu aprendi grid com um tutorial que ensina o básico e necessário https://youtu.be/rg7Fvvl3taU com esse tutorial consegui fazer a maioria dos desafios até agora e tô até preferindo grid q flex pra mta coisa

  e com esse site aqui que mostra o design do grid e o código como ele foi criado https://gridbyexample.com/examples/

  Vale mto a pena dps da uma olhada

  Marked as helpful

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @paulaabro Paula, esse erro de acessibilidade vc tá tendo pq não colocou nenhum heading h1. Eu sei que o painel de report mostrou uma coisa com o language, mas é só trocar algum dos h2 por h1.

  1