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

Mobile first signup form, Parcel bundler, sass, show/hide password

@santu369

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


Experimented with reset css and did all the styling using saas. Implemented show/hide password and made the page accessible entirely via keyboard. Used Parcel Bundler for optimizing the build.

Let me know if there is room for any improvements. Comments are highly appreciated.

Community feedback

P
Daveā€¢ 5,245

@dwhenson

Posted

hey @santu369 great work on this one!! šŸ™Œ The page looks great and you've done nicely with adding the hidden labels to all those inputs! Here's some small points you might like to consider:

  1. I would make the focus style marker more obvious. I like the subtle design, but they need to clearly show people with poor vision where they are in the DOM. If you only want to show it for keyboard users you can use some code like this:
:focus-visible {
	outline: 3px dotted var(--clr-primary-100);
	outline-offset: 0.25rem;
}

:focus:not(:focus-visible) {
	outline: transparent;
}
  1. At the moment the errors are causing a bit of jank in the form when their value is toggled from display: none to display: block. To avoid this you could try setting them as visibility: hidden and then visibility: revert. This will keep the space they take up in the DOM, and hide and show the contents and should avoid the jank.

  2. At the minute, we are getting some validation from the browser and some from your JS, I would suggest adding the novalidate attribute to the form as the first function in your JS, this will stop the browser validation (e.g. on email). We are doing this in JS as if for any reason the JS fails, we can still enjoy the inbuilt browser validation.

I hope this gives you some good pointers!! Great work here and keep going!! šŸ‘ Cheers 'šŸ‘‹

1

@santu369

Posted

@dwhenson Hi Dave, Thanks for the detailed feedback. I have updated the solution and will keep these pointers in mind for future projects.

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