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 Coming Soon page using HTML CSS and JavaScript validation

@ameyadeokule

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


I had a problem with arranging the error message below the input element and have completed it to the best of my abilities. If someone can suggest a better solution it would be helpful. Any feedback is always appreciated and I will work on it.

Community feedback

@pikapikamart

Posted

Hey great job on this one. Functions properly and the layout resizes well when i'm going in mobile state. The desktop layout is good as well.

For that error message, I see that you are transitioning its display property. But it pushes down the elements below it a bit right? So instead of transitioning the display you can just transition the visibility property. So when making the error message hidden, all you have to add is visibility: hidden. Then if a user submits a wrong, transition it to visibility: visible . This way, you can avoid the effect of pushing the element below it.

Overall, your layout is awesome and you did a good job in here^^

1

@ameyadeokule

Posted

@pikamart Thanks for taking the time and reviewing my code. I'll work on the suggestions and make the web page better. I appreciate the feedback, thanks again

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