Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Card component with accessible contrast, custom properties, and BEM

#accessibility#bem

@JulioCinquina

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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. However, this is not ideal if I were to reuse the card component in a page with more content. I'm also not sure if a heading tag is even the best option for a card title.

I used "max-width: min(80%, 300px)" to make the card width match the design, as well as to prevent it from going edge to edge on small screens, but I'm using a "magic number" here. Is there a better approach to this?

Any other comments are more than welcome. Thank you!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

@JulioCinquina

Posted

@ApplePieGiraffe Thank you!

1

@buddhi-ashen

Posted

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

@JulioCinquina

Posted

@buddhi-ashen Thank you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord