Card component with accessible contrast, custom properties, and BEM

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Hey, Julio Cinquina! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Great work on this challenge! 👍 Your solution looks great! 🙌

  Since this is an isolated component, using an h1 tag for the heading might be fine. In an actual website, though, you're right in that you'd probably want to use a different heading tag for that element (such as an h2 or h3). I'd still keep it as a heading element though, since it is a heading for the card.

  Choosing to add a max-width to the card component was a good choice. You probably don't need to use the min function, however. A simple em or rem value should work (e.g., max-width: 30rem).

  Hope you find these suggestions helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2

  ---

  

  Julio Cinquina•270

  @JulioCinquinaPosted over 2 years ago

  @ApplePieGiraffe Thank you!

  1
• 

  buddhi-ashen•40

  @buddhi-ashenPosted over 2 years ago

  What tag should I use for the card title to give it the best HTML semantics? I used <h1> for the title of the card, since it is the only <h1> in the page. - add classes for h1,. it make your code more accessible.easy to use in css.

  use different heading tags. like h3 or h2

  cheeres for your challenge!

  1

  ---

  

  Julio Cinquina•270

  @JulioCinquinaPosted over 2 years ago

  @buddhi-ashen Thank you!

  0