MultiStepForm

This project was generated with Angular CLI version 16.1.0 and is a solution for the Multi-step form challenge on Frontend Mentor.

Links

• Solution URL: https://github.com/Mathitarazonad/angular-multisteps-form
• Live Site URL: https://angular-multisteps-form.vercel.app/

Development server

Run ng serve or npm run start for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build or npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Table of contents

• MultiStepForm
  • Links
  • Development server
  • Build
• Table of contents
  • The challenge
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

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
• Extras made by myself:
  • Restart the form from zero
  • Remove addons in the confirmation step

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Angular - JS Framework
• TypeScript - JS strong typed language superset

What I learned

This is my first project using Angular framework, and I what I learned is that, Angular is quite a robust framework for developing, it's some hard to do bad practices when using it, because it has a more strict way of use it than other frameworks like React or Svelte.

But this causes that the learning process is harder than other frameworks, and it you don't have some experience working with other techonologies or just developing web applications it would be more complicated.

Also the syntax is a bit confusing than other ones, but I recently saw that Angular is changing its syntax to something like the one that uses Svelte, and that could reduce a lot the learning process on new developers.

It also uses TypeScript directly, so another challenge for developers who are entering this world. But it's important to understand that TypeScript is a very powerful tool at the time of developing, because its strong typing.

Useful resources

• Angular documentation

Author

• Frontend Mentor - @Mathitarazonad
• GitHub - @Mathitarazonad