Skip to content

elian-dev/multi-step-form-main

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

My process

Links

Built with

  • Semantic HTML5 markup
  • Custom HTML elements
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • ASTRO.js
  • SASS - For styles

What I learned

I learn how to prepare my project for future API integrations, and the complexity of managing a global state with vanilla js. I wanted to use some observer APIs and learn more about them. My estimated time to finish this task was 3 days, but at the end it takes me one week, so I needed to continue practicing.

Continued development

  • How to estimate the time
  • Analyze the componentization
  • How to create more reusable functions

Useful resources

  • Web components with custom elements - This helped me because Astro doesn't let access to browsers API, and I was working with the local storage and observing events in the dom.

Author