Mobile first pure html and css solution trying out BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. I think this is you first challenge here? If that's it, congrats^^. The site looks smaller in desktop though could be a bit more wider, though it is responsive which is great and the mobile state looks fine.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Always have a main element to wrap the main content of your page. On this one, the .card-container should be using the main instead of div.
  • The hero-section img could use a more descriptive alt value if you think the image is meaningful. Because using card header image as the text, it doesn't really describe what is the image itself right, so better using descriptive alt .
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "image" and others. An img is already an image/graphic so no need to describe it as one.
  • Your .card__statistics-container could have used ul since those are "list" of information about the company website. -Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.
  • Lastly, maybe widening the layout in desktop layout just a little bit:>>

  If you have any queries just drop it here okay. Aside from those, great work again on this one.

  1