Frontend Mentor - Multi-step form App

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
  • Environment Configuration
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

🔭 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

  ⚙️ Environment Configuration

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

📷 Screenshot

🖥️ Desktop

📱 Mobile

🔗 Links

Code:

Live:

⚙️ My process

🛠️ Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Position
• Mobile-first workflow
• Vue 3 - The Progressive framework
• Pinia - store library for Vue

🎓 What I learned

the use of the tag slot because with this tag I can reuse in several the styling and just change the information contained

To see how you can add code snippets, see below:

<template>
  <header>
    <h1 class="form__title">
      <slot name="title"> </slot>
    </h1>

    <p class="form__description">
      <slot name="description"></slot>
    </p>
  </header>
</template>

<template>
  <section class="form__wrapper">
    <TheHeader>
      <template v-slot:title>Personal info</template>
      <template v-slot:description
        >Please provide your name, email adress and phone number.</template
      >
    </TheHeader>
  </section>
</template>

🤵🏿Author

🙌 Acknowledgments

I want to thank God and my family for all the support