3-Columns Preview Card Component using HTML CSS, CSS GRID AND FLEXBOX

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovgPosted about 1 year ago

  Hi PMZ, congrats on your solution; here are some comments that might help you to improve it:

  Accessibility and semantics

  • This is your heading map:

    Frontend Mentor | 3-column preview card component
      2 Sedans
      2 suvs
      2 luxury
  

  All headings should have a hierarchy and a meaning. You can check this checklist provided by Deque University to learn some best practices related to headings that will help you improve your structure. You may use a .sr-only class so the missing page title may be visually hidden and help to enhance the assistive technologies experience.

  • There is an axe-core ruleset that should be considered. It's related to the document title, in this case, the best practice that may be applied is Put all unique information first. ...company’s name or brand ... should go after the unique content... So the suggested document title should be 3-column preview card component | Frontend Mentor.
  • There is another tag you may use for your .box element instead of a div to improve its semantics.

  Styles

  • Do not let the browser have its native focus state to provide a unique experience across devices. Each browser may use this outline differently.
  • It's better to use colour tokens based on their semantic use rather than their colour names. It's better for future refactors or a theme feature.
  • I invite you to modularize your styles instead of having all of them in a single file. You may use CSS naming methodologies that may help you with this.

  I hope you find it useful. I'm happy to look at your solution if you make other changes.

  1