Frontend Mentor - Multi-step form solution

This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: https://github.com/JuaniSilva/multi-step-form
• Live Site URL: https://github.com/JuaniSilva/multi-step-form/deployments/activity_log?environment=github-pages

My process

Built with

• Semantic HTML5 markup (I tried)
• Flexbox
• Mobile-first workflow
• React - JS library
• Typescript
• TailwindCSS - For styles

What I learned

I learn how to create multi step forms, even though I dont feel like my solution is the best way to do it but it's the one that I came up. Also how to

Continued development

I would like to continue improving my react skills, learn more hooks and build larger apps.

Useful resources

• Tailwind cheatsheet - This helped to look up class names really fast

Author

• Website - Juani Silva
• Frontend Mentor - @JuaniSilva
• Twitter - @Juani_Silva13