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

3-column preview card component solution

P
Christian 80

@christianb3ll

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any comments or recommendations welcome!

I opted to do each bit of the card as an article tag. Would a section have been more appropriate? Still trying to get to grips with proper semantics.

Also, I opted to use a link rather than a button. What is the best practice there?

Community feedback

evfjunior 25

@evfjunior

Posted

Hey, good work! The article tag is used when you have self-contained information. For example, if the user sees that bit of text, it's already enough to understand it. So, you did well making the cards as article elements. The section tag is often used when you need a heading right after it. For example, for features, contact, pricing, about, etc. It will wrap related content. You can have for example, multiple articles inside a section. Now, let's correct some issues. When using img tags, you have to use the alt attribute to describe the image content. That will help screen readers to assist visually impaired users. If you use a link as a button, add the attribute role="button". Nice work and keep on coding!

Marked as helpful

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