Signup Form using NextJS, TailwindCSS and React Hook Form
Solution retrospective
What did you find difficult while building the project? I found creating the mobile and desktop layouts quite difficult. I asked the community for help on this got a nudge in the right direction (use flex) so I got there in the end! I spent a lot of time tweaking the mobile and desktop layouts to get it as close as possible, this was something I was not expecting. But ultimately, I'm learning and I enjoyed the process!
Which areas of your code are you unsure of? I think my tailwindCSS code has not been written suitably for tablet layout (e.g. an iPad). I didn't have a design to go on. Does anyone have any suggestions on what to do so that it looks better?
Do you have any questions about best practices? I have put my react hook form code within my SignUpForm component. As a result, there's quite a lot of code in one file. Is there a better way of doing this? I feel like the validation code should be in it's own component but I didn't want to overcomplicate things!
Opinions on Accessibility I have changed the text colour for the sign up link ("By clicking the button, you are agreeing to our) so that it would pass WCAG 2.0. As Frontend Mentor uses axe-core for running tests on accessibility violations, perhaps future designs should consider things like appropriate colour contrast? It would mean then I wouldn't have to deviate from the design then!
This is not meant to be harsh criticism, please don't take it that way. Frontend Mentor does great work, and I'm thankful they have given me this chance to improve my skills :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hi
Interesting that you’ve mentioned accessibility but you’ve made the solution unreadable because of the pale background and white text. That background color was much better before on the original design
Other feedback
- title goes in head not body
- you don’t need the nested div to make the screen full height - you can put those classes on main directly. Any it needs to be MIN-height 100vh (not height )
- in fact there are loads of divs on this that shouldn’t be needed
- the h1 should be ONE element, not two. You can limit its max width in ch
- use strong not b
- error message containers should have aria live on it
- error message containers are ideally programmatically linked to their inputs with a unique ID on the error message container and aria-describedby on the input pointing to that ID
- you have a label that says first name for the last name input
- email input should be type email
- use autocomplete attributes
- the button should be aria-describedby the ID of the terms and conditions paragraph
- the content looks extremely narrow on my mobile. Consider reducing the page padding / form margin (whichever way you have used to create space from screen edges). A css min() function could be a good approach if you want to try it
Marked as helpful
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