https://github.com/coder-abdo/multi-step-form
https://github.com/coder-abdo/multi-step-form
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/coder-abdo/multi-step-form
- Owner: coder-abdo
- Created: 2024-07-13T00:43:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-13T01:05:54.000Z (almost 2 years ago)
- Last Synced: 2025-03-04T07:47:14.041Z (over 1 year ago)
- Language: Vue
- Homepage: https://multi-step-form-henna-chi.vercel.app
- Size: 144 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Multi-step form solution
This is a solution to the [Multi-step form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Author](#author)
## 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
### Links
- Solution URL: [frontend mentor solution URL](https://www.frontendmentor.io/solutions/multi-step-form-npGYkY3p7X)
- Live Site URL: [Vercel live site URL](https://multi-step-form-henna-chi.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Typescript
- Mobile-first workflow
- [Vue.js](https://vuejs.org/) - JS framework
- [Pinia.js](https://pinia.vuejs.org/) - Vue State-Management Library
- [Tailwind CSS](https://tailwindcss.com/) - For styles
## Author
- Website - [my portfolio](https://abdelmonaem-portfolio.vercel.app/)
- Frontend Mentor - [@coder-abdo](https://www.frontendmentor.io/profile/coder-abdo)
- Linkedin - [Abdelmonaem Shahat](https://www.linkedin.com/in/abdelmonaem-shahat/)