3 column preview card component

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.

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