All solutions

• ✅ Responsive: Desktop and Mobile
• ✅ Form Validation
• ✅ Steps form
• ✅ A11y
• ➖ Unit tests (soon..)
• ➖ Dark Mode (soon..)

This challenge, from the moment I saw it, seemed very interesting to me, and I really liked the design of how navigation is handled throughout this multi-step form. Superficially, it looks simple, but it took a little more time than expected. I focused on correctly validating the fields and ensuring smooth navigation, applying best practices for accessibility (which I am learning). I also used BEM naming conventions for CSS classes to have a better workflow in creating responsive views. I started, as always, with a mobile-first approach.

I would appreciate it if you could review it and let me know if there are any corrections/improvements or any processes that would make a difference. Your feedback is valuable for improvement!

This challenge represents a new solution proposed as an improvement to the corrections mentioned in my initial attempt by @jairovg. I focused on enhancing accessibility (A11Y) and conducted audit using the ChromeVox extension to observe how a Screen Reader navigates through the page. Additionally, I performed an audit using the Lighthouse tool to assess both accessibility and DOM semantics.

I modularized the application's components and defined their styles in each Single File Component (SFC) to ensure easy reusability. I applied the BEM methodology and utilized SCSS for enhanced synergy.

I would appreciate feedback on this solution. If there are opportunities for improvement or if there are better practices that can be employed, please let me know!