Skip to content

El-Cassegrain/multi-step-form

Repository files navigation

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

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

screenshot

Links

My process

I have coded the HTML/CSS part first, then I implemented Vue3 with the composition API. I used Pinia for the values store that going through the app.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Vue - JS library
  • Vite.js - Vue framework
  • Bootstrap 5 - For some helpfull utility classes

What I learned

I learned a lot in this challenge, I really did a step behind in JS developpment. Especially with Vue.

Continued development

I can't wait to do another challenge with Vue3 ! I really love this tool, and everytime I writ a single line of JS, I'm improving myself.

Author