four-card HTML & CSS - BEM

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi tucno21,

  Well done :D

  I have mainly checked your HTML structure and design, a few tips below:

  • this is project we can see as a one single page component so in this case we can use the h1 tag => in the header you can use the h1 with two spans (main-heading and sub-heading) or just h1 and h2 then rest of the headings h3 gradually;
  • alt text => don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image. In this project, icons have only decorative role - that's a reason why alt text should be provided as a empty (alt="") so these icons can be ignored by assistive technologies, such as screen readers => in this project images have only a decorative role so alt should be empty;
  • instead of four sections I'd recommend using divs as a wrappers because here divs are perfect for generic groupings of content;
  • I'd recommend learning BEM naming convention;
  • important: width and height => you gave explicit width and height, that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink;
  • check your project in your browser by using the inspector (especially tablets => your cards don't grow, no margin);
  • small design details => box shadow is very flat and it should more "fuzzy".

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  1