Frontend Mentor - Formulaire Multi-Étapes
Bienvenue ! 👋
Merci de vous intéresser à ce défi de codage front-end.
Les défis de Frontend Mentor vous aident à améliorer vos compétences en codage en construisant des projets réalistes.
Pour réaliser ce défi, vous devez avoir une bonne compréhension de HTML, CSS et JavaScript.
Le défi
Votre défi consiste à construire ce formulaire multi-étapes et à le rendre aussi proche que possible du design.
Vous pouvez utiliser tous les outils que vous souhaitez pour vous aider à compléter le défi. Donc, si vous avez quelque chose que vous aimeriez pratiquer, n'hésitez pas à l'essayer.
Vos utilisateurs doivent pouvoir :
- Compléter chaque étape de la séquence
- Revenir à une étape précédente pour mettre à jour leurs sélections
- Voir un résumé de leurs sélections à l'étape finale et confirmer leur commande
- Voir la disposition optimale de l'interface en fonction de la taille de l'écran de leur appareil
- Voir les états de survol et de focus pour tous les éléments interactifs de la page
- Recevoir des messages de validation de formulaire si :
- Un champ a été oublié
- L'adresse e-mail n'est pas correctement formatée
- Une étape est soumise, mais aucune sélection n'a été faite
Vous avez besoin de soutien pour ce défi ? Rejoignez notre communauté et posez vos questions dans le canal #help.
Où trouver tout le nécessaire
Votre tâche consiste à construire le projet selon les designs dans le dossier /design. Vous trouverez une version mobile et une version desktop du design.
Les designs sont en format JPG statique. L'utilisation de JPG signifie que vous devrez utiliser votre meilleur jugement pour des styles tels que font-size, padding et margin.
Si vous souhaitez les fichiers de design (nous fournissons des versions Sketch & Figma) pour inspecter le design en détail, vous pouvez vous abonner en tant que membre PRO.
Tous les actifs nécessaires pour ce projet sont dans le dossier /assets. Les images sont déjà exportées à la taille correcte de l'écran et optimisées.
Nous incluons également des fichiers de polices variables et statiques pour les polices requises pour ce projet. Vous pouvez choisir de lier aux polices Google Fonts ou d'utiliser les fichiers de polices locales pour héberger les polices vous-même. Notez que nous avons supprimé les fichiers de polices statiques pour les poids de polices qui ne sont pas nécessaires pour ce projet.