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.

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• Go back to a previous step to update their selections
• 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
• Receive form validation messages if:
  • A field has been missed
  • The email address is not formatted correctly
  • A step is submitted, but no selection has been made

Screenshot

• The screenshots are located in screenshot folder

Links

• Solution URL: [https://github.com/mnacfil/frontendmentor-Multi-step-form]
• Live Site URL: [https://mnacfil-multistep-form.netlify.app/]

Built with

• CSS custom properties
• Flexbox
• CSS Grid
• React - JS library
• Styled Components - For styles

What I learned

How to dynamically save what user choose in plan and addOns and display in Summary, useContext API for storing state globally and update it whenver user choose Plan and Adds on

Continued development

Mobile Design, Optimization, Best practices.*

Author

• Frontend Mentor - @mnacfil
• LinkedIn - @MelvinNacfil