Frontend Mentor - Multi-step form solution

This is my solution to the Multi-step form challenge on Frontend Mentor challenge.

The challenge

The challenge is to create a responsive Multi-step form consisting of 3 pages for entering/selecting information, 1 page for summary and 1 thank you page. The users should be able to use the form efficiently from both mobile and desktop device.

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.

Links

• Live Site URL on which you can check out the project: https://adrianptrv.github.io/Multi-step_form_FE_Mentor

My process

1. Analyze the provided design pictures and build the HTML structure.
2. Add all of the CSS styles through SCSS, and make the website responsive.
3. Add the functionality of the Multi-step form with Typescript.

What I have used for building the project

• HTML
• SCSS
• TypeScript

Sreenshots

Mobile layout	Desktop layout