Flex-box and BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, the responsive state could be better since adjusting the screen starting from desktop up to the point before mobile breakpoint, the layout is small as well as the text which is hard to read. The mobile layout looks great.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag, since this limits the element's height based on the remaining screen's height. Instead replace it with min-height: 100vh this takes full height but lets the element's height expand.
  • Website image should be using website's name as the alt like alt="huddle", remember that website logo is a meaningful element on a site.
  • When using alt avoid using words that relates to "graphic" such as "image", img tag is already an image so no need to describe it as one.
  • Hero-section's img could be hidden since it is just a vector image so use alt="" and add aria-hidden="true" attribute on the img tag.
  • Social media could use ul since those are "list" of links.
  • Each a tag in the social media should be using either aria-label attribute or screen-reader element inside it. The value for whatever method you use should be the name of the social media like aria-label="facebook" on the a tag. You do this if there are no text-content inside the element that assistive tech could read.
  • The img inside the social media link could be hidden by the above method I mentioned, since those are only decorative images.
  • Lastly, check on the responsiveness of the site:>

  Aside from those, really great work on this one.

  Marked as helpful

  1

  ---

  

  Hernan Alex Choque Condori•235

  @HernanAlex61ChoqueCondori8Posted about 3 years ago

  @pikamart Thanks for the recommendations they helped me a lot to learn a little more about HTML and to use the "min-height" property with CSS. ✍(っ＾▿＾)💨

  1
• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi Hernan,

  Great work on this project! It looks well for both desktop and mobile views! You even implemented BEM methodology :)

  Good luck to your future projects!

  Marked as helpful

  1

  ---

  

  Hernan Alex Choque Condori•235

  @HernanAlex61ChoqueCondori8Posted about 3 years ago

  @fidellim thanks, Thanks for the help, that other people see my code and can give their opinion, it helps me a lot to improve and keep moving forward

  1

  

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  @HernanAlex61ChoqueCondori8 You got this! 🙂

  0