Creating component using by HTML, SCSS and BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in general looks fine, just that the mobile layout, the layout is bit pushed on the top.

  Are you referring to mobile first approach? Or just like writing codes for mobile layout? I mean there is no best way to create a layout right, it depends for every developer since they may used different stylings to create the layout.

  Some other suggestions would be:

  • You don't need font-size: 16px on the body tag, since by default it uses 16px or 1rem.
  • Always have a main element on your page. This should wrap the main content of your page, this helps users to properly navigate your site. On this one, the .backGround selector should use main instead of div.
  • Avoid using height: 100vh on a large container, this makes the element's height limited to the remaining viewport/screen's height. On your .backGround selector, instead of that, replace it with min-height: 100vh as well.
  • alt value for the vector image should be alt="" and add an extra aria-hidden="true" attribute on the img. If an image is just decoration, especially if the image is just vector image, always hide it using the mentioned method. If the image is meaningful, then use meaningful alt value.
  • Also, when using alt avoid using words that relates to "graphic" such as "illustration, image, icon.." img is already an image, so no need to describe it as one.
  • Always have an h1 element on a page. For this one, since you use h2 on the order summary you could make the h1 a screen-reader only text, meaning it will use sr-only class. Look up on the net on how it is used.
  • The music-icon should be hidden as well, using the above method.
  • annual plan should be h3 not h4. Do not skip a level, if you use h4 make sure that h1, h2, h3 are present before it.
  • Lastly, maybe lowering down the height of the overall layout.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  Katya Ru•100

  @RuKatyaPosted about 3 years ago

  @pikamart Thank you for you feedback! I am learning how to make the optimal layout for mobile.

  0