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

Product Card Component

@franc014

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • What did you find difficult while building the project?
  • Do you believe that for card components like this one, it's ok for titles to use a <h1> tag? Or, ist it preferable to use just a <span> or <p> tag?
  • What do you think of using utility classes and then updating any specific properties using the element class?

Community feedback

@kbousquet

Posted

For this project, the most difficult thing for me was making it responsive. I've been studying frontend development for about a year now, mostly focusing on the JavaScript side, so I never tried making a size-responsive page before beyond simple flexbox.

Regarding using heading tags for quicker formatting, I'd say you are fine using them for now as long as you keep in mind that they are actually used for structural hierarchy of a document. Later down the road, if you're designing professional websites, accessibility of your webpage will become a concern. The different heading tags actually serve as indicators of sections, which tells screen readers how to jump around a page. At that point in your career, you will need to make sure the header tag you're using is appropriate.

2

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