Skip to content
Submitted over 3 years ago

Ping coming soon page with HTML, CSS

Ctrl+FJ•810
@FlorianJourde
A solution to the Ping single column coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everybody ! For this challenge, I trained myself using a clean form validation, thanks to @pikamart & @Yazdun for their advices !

I tried to make it smooth and nice looking, even if it's simple, tell me what you think about it !

Code

Please log in to post a comment

Log in

Community feedback

  • Yazdun•1,310
    @Yazdun

    Thanks for the shoutout ! Glad I could help. This looks great, Keep up the good work 👏

    Marked as helpful
  • Alex•2,010
    @AlexKMarshall

    Visually this looks good, and I like the transitions on the button and the input border, nice touch.

    There are a few issues with the markup though.

    Your input has a label element, but it's empty. There needs to be some kind of text in there, something like 'Email address'.

    Your validation messages are always in the html. This means that someone using a screen-reader will always hear the message 'Please Provide a valid email address' and 'Form submission success' regardless of whether they have entered anything in the input, or submitted the form.

    You'll need to use javascript to insert these elements at the right point, so they only appear in the document when they are supposed to. And if the input is invalid, you should set the aria-invalid attribute on the input element too.

    Here's an example of how to do that https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute

    The other issues with the markup are highlighted in the submission report, mainly links without any text in them.

    Marked as helpful
  • Ctrl+FJ•810
    @FlorianJourde

    I can't generate any new report, do you know if it's normal ?

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