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.
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.
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.
Il y a également un fichier style-guide.md contenant les informations dont vous aurez besoin, telles que la palette de couleurs et les polices.
N'hésitez pas à utiliser n'importe quel flux de travail avec lequel vous vous sentez à l'aise. Voici un processus suggéré, mais ne vous sentez pas obligé de suivre ces étapes :
- Initialisez votre projet en tant que dépôt public sur GitHub. Créer un dépôt facilitera le partage de votre code avec la communauté si vous avez besoin d'aide. Si vous ne savez pas comment faire cela, lisez cette ressource Try Git.
- Configurez votre dépôt pour publier votre code à une adresse web. Cela sera également utile si vous avez besoin d'aide pendant un défi, car vous pouvez partager l'URL de votre projet avec l'URL de votre dépôt. Il existe plusieurs façons de le faire, et nous fournissons quelques recommandations ci-dessous.
- Consultez les designs pour commencer à planifier comment vous allez aborder le projet. Cette étape est cruciale pour vous aider à anticiper les classes CSS pour créer des styles réutilisables.
- Avant d'ajouter des styles, structurez votre contenu avec HTML. Écrire votre HTML en premier peut vous aider à vous concentrer sur la création d'un contenu bien structuré.
- Écrivez les styles de base pour votre projet, y compris les styles de contenu généraux, tels que
font-familyetfont-size. - Commencez à ajouter des styles en haut de la page et travaillez vers le bas. Ne passez à la section suivante que lorsque vous êtes satisfait de la zone sur laquelle vous travaillez.
Comme mentionné ci-dessus, il existe de nombreuses façons d'héberger votre projet gratuitement. Nos hôtes recommandés sont :
Vous pouvez héberger votre site en utilisant l'une de ces solutions ou l'un de nos autres fournisseurs de confiance. Lisez plus sur nos hôtes recommandés et de confiance.
Nous vous recommandons fortement de remplacer ce README.md par un personnalisé. Nous avons fourni un modèle dans le fichier README-template.md dans ce code de démarrage.
Le modèle fournit un guide pour ce qu'il faut ajouter. Un README personnalisé vous aidera à expliquer votre projet et à réfléchir à vos apprentissages. N'hésitez pas à modifier notre modèle autant que vous le souhaitez.
Une fois que vous avez ajouté vos informations au modèle, supprimez ce fichier et renommez le fichier README-template.md en README.md. Cela le fera apparaître comme le fichier README de votre dépôt.
Soumettez votre solution sur la plateforme pour que le reste de la communauté puisse la voir. Suivez notre "Guide complet pour soumettre des solutions" pour obtenir des conseils sur la façon de le faire.
N'oubliez pas, si vous cherchez des commentaires sur votre solution, assurez-vous de poser des questions lors de la soumission. Plus vous êtes spécifique et détaillé avec vos questions, plus vous avez de chances d'obtenir des retours précieux de la communauté.
Il existe plusieurs endroits où vous pouvez partager votre solution :
- Partagez la page de votre solution dans le canal #finished-projects de la communauté.
- Tweetez @frontendmentor et mentionnez @frontendmentor, en incluant les URL du dépôt et de la version en ligne dans le tweet. Nous serions ravis de voir ce que vous avez construit et de vous aider à le partager.
- Partagez votre solution sur d'autres réseaux sociaux comme LinkedIn.
- Bloguez sur votre expérience de construction de votre projet. Écrire sur votre flux de travail, vos choix techniques et parler de votre code est une excellente façon de renforcer ce que vous avez appris. Les grandes plateformes pour écrire sont dev.to, Hashnode, et CodeNewbie.
Nous fournissons des modèles pour vous aider à partager votre solution une fois que vous l'avez soumise sur la plateforme. N'hésitez pas à les modifier et à inclure des questions spécifiques lorsque vous cherchez des retours.
Plus vous êtes spécifique dans vos questions, plus il est probable qu'un autre membre de la communauté vous donne des commentaires.
Nous adorons recevoir des commentaires ! Nous cherchons toujours à améliorer nos défis et notre plateforme. Donc, si vous avez quelque chose à mentionner, envoyez un email à hi[at]frontendmentor[dot]io.
Ce défi est entièrement gratuit. Veuillez le partager avec toute personne qui le trouvera utile pour pratiquer.
Amusez-vous bien en construisant ! 🚀
Ce projet a été réalisé par Christen Dijoux.