Frontend Mentor - Multi-step form

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.

Overview

Figma Design

Outcome

Technologies

The technologies used in this project are:

• HTML & Tailwind & TypeScript
• Angular (animation, reactive forms)
• Unit testing (Jasmine)

Features

• Responsive Design: Ensures the form looks great on all devices.
• Form Validation: Real-time validation with meaningful error messages.
• Accessibility: Built with accessibility in mind.
• Animations: Smooth animations for form interactions.
• Unit testing: Comprehensive unit tests to ensure code reliability.
• Identical Design: Almost identical to figma design except what has to reconsider for accessibility.

Setup

To run this app in development mode open the terminal and write the following:

git clone https://github.com/Zakaria9375/fm-multi-step-form.git 
cd fm-multi-step-form  
npm install 
 
# you need to install angular cli to run this app in development mode
npm install -g @angular/cli

ng serve

Links

• Challenge Page
• Live Demo

Testing

Accessibility

This app has been crafted with a focus on accessibility, utilizing the Accessibility Linter, IBM Equal Access Accessibility Checker extension, and WCAG extension to adhere to accessibility best practices. Key features include:

• Zooming: Maintains content and functionality without loss when zooming.
• Keyboard-only navigation: All interactive elements are fully accessible, focusable, and clickable via keyboard.
• Static code analysis: Ensures no errors through the use of semantic HTML.
• Aria rules compliance: Proper implementation of ARIA (Accessible Rich Internet Applications) rules.
• Semantic HTML: Employs clean, semantic HTML when ever possible for better accessibility.

Accessibility Tests Screenshots

Unit Testing

This project uses Jasmine and karma for unit testing

Unit Tests Screenshots

To run and execute all the unit tests defined in the project after setting the app in development mode, open a new terminal and write the following:

ng test

Lighthouse report

Accessibility Tests Screenshots

Retrospectives

What went well ?

I am proud of accessbility, styling, clean markup, functionality

What could be improved ?

The weird way of fetching font at the initial load of the page.

About the Author

• Portfolio - Zakaria Ali
• Frontend Mentor Profile - @Zakaria9375
• Project by - Frontend Mentor team

Contributing

Want to contribute? Great! Here’s how you can help:

1. Fork the repo and create your branch from main.
2. Make your changes and test.
3. Issue that "pull" request!

License

Copyright (c) 2024-present, Zakaria Ali