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

Ping single column coming soon page

@giorgianvatra

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all,

All the feedback is highly appreciated.

Thank you, Giorgian

Community feedback

P

@andreasremdt

Posted

Hey Giorgian,

Congrats on finishing this challenge, your solution looks good! I found a few issues that you might want to fix:

  • The interactive elements (input, buttons) don't have clear focus or hover states, which should definitely be added for a better user experience and accessibility.
  • The input and button are not within a form, which makes you lose some important functionality like pressing Enter to submit and send it. This also hurts accessibility.
  • The error appears once I try to submit with an invalid email, which is great. However, once I type in a correct email address and submit, the error stays there, which is confusing to users. A good practice would be to hide the error when the email is correct and the user leaves the input (blur), presses the button, or even while typing (input event). So, make sure that you add an else condition in your JavaScript for when the email is valid.
  • Using regular expressions for validation is a common practice, but I don't recommend using these for emails, as there are tons of variants out there, and hardly any of them get it right. Some are too strict, others are too lax, and most don't cover all edge cases. Browsers these days already offer APIs to validate input. I recommend you look into constraint validation, which makes it so much easier validating HTML forms.
  • The social icons at the bottom are wrapped inside a button. I think that's okay for this challenge, as there's no action behind these; I would still advice using an a element, as social links tend to redirect you to a different website, whereas buttons are more suitable for triggering interactive JavaScript.

I hope my feedback helped you out, let me know if you have any questions. Keep up the great work!

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