Designo Multi-page App using NextJs and Formik
Design comparison
Solution retrospective
Technologies used
- NextJs - Faster page routes handling
- Formik and Yup - form validations
- Tailwind - Faster element styling
I would like to have feedback on how I structured my components. There might be a better way for this solution.
Happy coding! 🥳
Community feedback
- @DrKlonkPosted over 3 years ago
Hi Jun Rey,
Overall the page looks great! I haven't used React or any of the other stuff you used. So I can't really help you out with your question. But it's interesting to see as a Vue guy myself.
I know it's probably not part of the challenge, but there were some minor usability things I've noticed while browsing around:
- Would be nice to scroll down to "England" when you press it from the home page
- Always nice to add asterisks to what is mandatory in the form
- Some phone number regex validation is almost always wanted
The tailwind css looks a bit daunting at first (all those classnames in the HTML, jeesh), but after looking into it a bit more, you've inspired me to mess around with it sometime.
Cheers and happy coding! Joran
1 - @obioraigboanusiPosted over 3 years ago
To improve on your pixel perfection abilities, You should always consider the specific screen size the design was created for, during the implementation.
For example, if the the mobile design is for 375px screen, set your emulator to a screen width of 375px. Also expand the design file to 100%.
By this you can actually determine if your implementation is consistent with the design.
Same approach applies to bigger screen too.
By merely looking at your implementation, you will notice that it's a way larger than the design.
I hope this helps too.
0 - @obioraigboanusiPosted over 3 years ago
Hi Jun, Your work looks great, but I noticed that : ~you used a div within a span element. The div is used to wrap an element or group elements for styling purposes. Hence, it should be used as a container. On the other hand, span is a text rendering element. It is used to wrap a piece of text within a text rendering semantic element like p, h1-6, li, a, etc. Never use the div to render text alone. Put the text in a 'p' and then put in a div as the case maybe. Never use span to wrap elements, use div.
I hope this helps.
Bravo!!!
0
Please log in to post a comment
Log in with GitHubJoin 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