Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pod request access landing page

Jérémy 1,020

@jrmydix

Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, here is my solution to this challenge. I don't really like the way I used to position the background image. If you know a better and more responsive way, please let me know. Also, if there is a better way to do the javascript I'd love to know too because I'm really new to this. Thanks!

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

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

@jrmydix

Posted

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

0

@optimusprime202

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord