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
Your session has expired please log in again.

Submitted

Responsive landing page using Nx Monorepo

@carlosalzatep

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

Community feedback

P

@jairovg

Posted

Hi Carlos, congrats on your solution; it really pleases me to see implementations using what was discussed in our mentorship sessions; here are some comments that might help you to improve your solution:

Accessibility and semantics

  • You may enhance the form experience adding some attributes to the input element like: aria-required so not just the form has a native validation status but any assistive technology to be able to correctly mention it; and aria-describedby so assistive technology would be able to give a better context on the input when the user has an error on it, and finally an aria-invalid="true" when it has an error state.
  • The span.warning-msg may have an aria-live="assertive" attribute so the assistive technologies may read out loud any error message.
  • Regarding your ul.logos-list element; it may be wrapped in a nav to enhance its semantics and also, each link should have a descriptive text, it's not enough with the alternative text in the images.
  • There is also an accessibility issue related to the same element, as the anchors do not have any other state but their default one. Any user who tries to navigate on the page using the keyboard may get lost once it sets the focus on any of these elements.

Styles

  • You may want to remove the focus state in the input element and instead handle a focus-within in the form, in order to remove the odd rounded outline present in the input in tablets and desktop devices.
  • Your request access button misses its focusstate.

I hope you find it useful. I'm happy to look at your solution if you make other changes.

Marked as helpful

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