Easybank landing page solution

Community feedback

• 

  BrunoMoleta•700

  @brunomoletaPosted 7 months ago

  Hello Hanif,

  Semantics: It is best practice to contain all content within distinct regions such as the header, main, and footer.

  But your three section tags are direct children of the body, it's best if a main tag wraps them up.

  Also, the anchor with #menu-btn does not redirect the user to another page, so it is a button.

  As according to MDN a Button:

  The <button> HTML element is an interactive element
  activated by a user with a mouse, keyboard, 
  finger, voice command, or other assistive technology. 
  Once activated, it acts, such as 
  submitting a form or opening a dialog.
  

  Sizing: I'd also advise you about the mockup image in the hero section. You set the width and height using percentages(%), but I believe the responsiveness is better off with fixed sizes. Because when I opened your app on my machine, the images appeared disproportionally big.

  In my day-to-day activities on the web, I increase the zoom of the content by default on the Firefox settings and the font size. Our app must accommodate that user action.

  Same on the Logo image where you set it with rem, but it would be with a fixed size. Typography size depends from user to user, so it's well suited with the rem unit. However, when we use properties such as padding we ought to test and see if it increases user experience. It probably makes sense to use fixed amounts in some cases and dynamic in others. What do you think?

  Last but not least, congrats on the use of Intersection Observer API.

  Best regards from Brazil :)

  1