Pod request access landing page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, Jérémy! 👋

  Congratulations on finishing this challenge! 👏

  I notice that you only have the minified CSS, I would recommend having an unminified CSS. That way, people can give you feedback on your stylesheet without the need to understand Sass.

  About the background images, I used CSS background properties for the mobile and tablet layout, and for the desktop layout, I used pseudo-element and background properties. By doing that, I was making sure that the HTML only contains the necessary elements.

  Some feedback:

  • Accessibility
    • Usually, the logo is also a link to a home page, like for example the Frontend Mentor site. So, I would recommend wrapping the logo with a link element.
    • Remove all br elements from the heading and paragraph. Let lines wrap where they need to. br elements will be read out by screen readers. You don't need to accommodate for every screen size, so it's rare you'll ever need to use them. Read what MDN documentation says about it.
    • Use button with type="submit" instead of <input type="submit">. <input type="submit">` is a browser legacy.
    • Add aria-describedby attribute to the input element and add aria-live to the alert element. That way the screen reader will pronounce the error as soon as it is displayed.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍
  • JavaScript
    • I would recommend improving the email Regex since it is currently accepted this vanza@email as a valid email.
    • I would use JavaScript addEventListener instead of using onclick and onsubmit attribute to separate the HTML (presentation) and the JavaScript (functionality).
    • I would suggest using querySelector instead of getElementById. Use modern JavaScript instead.

  I hope this information is useful! Happy coding! 😁

  Marked as helpful

  1

  ---

  

  Jérémy•1,020

  @jrmydixPosted over 2 years ago

  @vanzasetia Thank you! Definitely was very helpful, I'll improve it :)

  0
• 

  optimusprime202•1,200

  @optimusprime202Posted over 2 years ago

  Hey @jrmydix, You did a lot of work today.

  0