Designo Multi-page App using NextJs and Formik

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

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.

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!!!

Wow... It's amazing