Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

Intro component signup form master

@mmetwally0

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Would love to get feedback

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Mohamed! congrats on finishing the challenge!

Your HTML and CSS looks perfect for me, also the validation of the form is doing its job.

I would like to give you a little advice to improve the user experience, you can add some transitions to your buttons to get a better look of your web and make it look even more modern!

Try adding to your buttons transition: background-color 0.5s ease;, and you will see that the hover goes a lot smoother than before!

Hope my feedback helps you!, Good job and keep going!

Marked as helpful

1
Vanza Setia 27,795

@vanzasetia

Posted

Hi, Mohamed Metwally! 👋

Congratulations on finishing this challenge! 🎉

Here are some suggestions for improvements.

  • Input element always needs a label. In this case, you can use aria-label to give labels to the input elements.
  • On my desktop view, 1280px width, the layout form is filling the entire page. It should have enough space to create the desktop layout. 1440px width for the desktop layout is too late.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.
  • The native HTML validation for the email input is not good enough. If you try input d@d then it is a valid email. A valid email should have the top-level domain (e.g. .com, .org, etc). So, I suggest trying to validate the email input with regular expression.
  • There are some !important keywords in the stylesheet. This could be a sign there is something wrong with the stylesheet if you find yourself start using it. So, try to write the styling without !important.

Hope this helps! 🙂

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