3 column-preview-card-component html and css

Community feedback

• 

  Mayank Arora•430

  @mayankdrvr

  Posted over 1 year ago

  Congratulations Grung for completing this challenge. Your design matches the solution very well.

  Here are a few observations-

  1. It is good practice to use semantic html elements for better web accessibility instead of simply using <div> tags.
  2. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
  3. In this challenge, the icons are purely ornamental, so the alt tag should be empty (alt="") to indicate to screen readers that they should be disregarded.
  4. Hovering over "Learn more" buttons is supposed to change the button color.
  5. The h1 heading can only be utilized once on a single page, yet in your content, it is employed multiple times.
  6. Below 475px width of screen, your design text gets partially hidden. In contemporary web development, the standard approach involves beginning with mobile-first content construction. This entails styling for small screens initially and subsequently employing media queries to adapt the design for larger screens, thus emphasizing performance and responsiveness. Try to create a design using css flexbox column-wise for small screen and then add media queries to design using css flexbox row-wise for larger screens.
  7. Add some padding between the contents inside the boxes and the border of the boxes. Use relative dimensions like rem wherever possible.

  Awesome solution and keep it up.

  00

  Marked as helpful