FM-MultiStepForm - Readme

My solution to the Frontend Mentor "Multi-Step Form" challenge

Caution

Please, don't look at my solutions until you have completed it yourself.

Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach. If you can't complete a challenge, skip it and come back to it later. Only look at someone else's solutions as a last resort, and treat it as a defeat.

Table of Contents

• FrontendMentor 🤔
  • What is it
  • Is it worth doing
• Overview ✨
  • About
  • Features
  • Technologies
  • Setup
  • Copyright
• Details 📜
  • User interface
  • Performance

FrontendMentor 🤔

What is it

FrontendMentor is a platform that provides real-world front-end coding challenges to help developers improve their skills. It offers projects ranging from simple layouts to complex web applications, allowing users to practice HTML, CSS, and JavaScript by building solutions that closely resemble professional work.

Is it worth doing

Frontend Mentor is a great resource for developers looking to gain hands-on experience by working on practical projects. The challenges help reinforce best practices, improve design implementation skills, and build a portfolio. However, since there is no automated grading system, feedback depends on community reviews, making it essential to engage with others for constructive criticism.

Overview ✨

About

My solution to the Frontend Mentor "Multi-Step Form" challenge. The project was created using Vue 3 with TypeScript. It was my first project using Vue. Although the challenge was easy, it gave me an opportunity to practice Vue basics, especially state management and communication between components.

Check out the live version of this project, as well as my Frontend Mentor profile.

Technologies

Languages:

• JavaScript
• TypeScript
• CSS
• HTML

Libraries and frameworks:

• Vue.js 3.5.13
• GoogleFonts

Programs:

• VSCode
• PowerToys
• ShareX
• GIMP

Features

Challenge requirements

• ✅ 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

Additions

• Phone number validation

Setup

• Use live version.

• Download this repository and:

  • Open project in VSCode
  • Run npm install
  • Run npm run dev
  • Open generated address in the browser

• Deployment for GitHub:

  • Add base: '/repo-name/' in vite.config.ts
  • Run npm run build
  • Rename /dist folder to /docs

Copyright ©️

I do not own the rights to the content of the challenges. All challenge data was downloaded and included only to provide context for the solutions.

Details 📜

User interface

Step 1

The first step requires the user to input their name, email, and phone number. The provided values are properly validated before proceeding to the next step.

Step 2

In the second step, the user can select a plan and change the billing period.

Step 3

The third step allows the user to pick additional options, with pricing dependent on the previously selected billing period.

Step 4

The fourth step is a summary of the user’s choices. It displays the selected options and the total price. The user can still go back and make changes.

Step 5

A simple thank-you message.

Performance

Warning

The accessibility score is lower because of the design's color contrast.

Desktop

Mobile