@Keben21
What are you most proud of, and what would you do differently next time?
I need a comment on this please
Latest solutions
Responsive multi-step form with validation
#next#react#tailwind-css#zod#typescriptSubmitted 10 months ago
Latest comments
- @cyber-m
Hi It looks like you are off to a great start @Keben21, I noticed that you have horizontal scroll bar and those are usually better to be avoided. A simple solution in your case would be to remove
width: 100vw;from the body selector in your CSS file. I also noticed you got the wrong font, you can check which font is actually rendering using chrome>dev tools> computed tab>font. also you have an empty header element, you probably should remove it. keep up the good work! - @chrisdcastWhat are you most proud of, and what would you do differently next time?
Accessibility - I wanted to focus on making my form as accessible as possible and learned a lot in the process. I learned the importance of using inputs, buttons, and other vanilla html form elements as much as possible to utilize the browsers default accessibility functionality. If I have time in the future I'd like to go back in and update the font sizes in my CSS to some values calculated in
What challenges did you encounter, and how did you overcome them?:rootbased off of the user's REM font settings.React Hook Form - using default html form elements in react is a little tricky sometimes. Learning to use the react-hook-form package was a little bit of a learning curve, but once you get the hang of it it can run smoothly. It's just a shame that you have to download a package to work around React's design philosophy of controlled inputs in order to use a browsers default functionality for elements like radio buttons and tab order. It made me appreciate Svelte's design approach a bit more.
What specific areas of your project would you like help with?Accessibility - I'd love to be an expert in developing accessible websites and web apps. So any pointers would be greatly appreciated.
React - Any tips on developing for React would also be appreciated. There's always more to learn there and I'm fairly new to it.
@cyber-mHi Christopher, Great job! In terms of accessibility, I'm not an expert but I'm pretty sure your contrast ratio on your step number text is pretty low. You can check color contrast ratio using tool like Stark as a designer I more familiar with the Figma plugin but I know they also have chrome extension to check websites.
- @fernandogadebarros@cyber-m
Hey @fernandogadebarros, Great job! I really like how structured your project and how data is separated from functionality. I notice couple small things that you can fix real quick: The text of the last step button should be "Confirm" instead of "Next" I think the hover state of the text field should be with a purple border One way that was really helpful for me in order to match better the design is to put the design images in Figma, measurements are much easier that way.
Marked as helpful - @varunvermadevWhat are you most proud of, and what would you do differently next time?
helps in solving many blocked and clogged concepts in my mind learn various css classes upon completion happy to use the react very first time
What challenges did you encounter, and how did you overcome them?my biggest challange was how to navigate the through the form and how to make sure all the units of price changes upon changing to the yearly
What specific areas of your project would you like help with?optimizations
@cyber-mHi Varun, Good job overall! I would try to match better the design, you can put the design images in Figma so you'll be able to measure in a easy way. If you want to resize text according to screen size a good way to to so is using CSS clamp function here is an example:
font-size: clamp(1rem, 2.5vw, 2rem) - @RajanCP@cyber-m
@RajanCP Great job! I've noticed one little thing, that the style of the ordered list numbers doesn't match the design(for example look at the number 1 in the design you'll see it looks different)
- @MdZaferEqbal@cyber-m
Great work! @MdZaferEqbal, Just one small thing padding should be larger on desktop
Marked as helpful
