
Merci d'avoir consulté ce défi de codage frontal.
Les défis du mentor de frontend vous aident à améliorer vos compétences de codage en créant des projets réalistes.
Pour faire ce défi, vous avez besoin d'une compréhension de base de HTML, CSS et JavaScript.
Votre défi est de développer cette page de destination et de le faire paraître aussi près que possible de la conception.
Vous pouvez utiliser tous les outils que vous aimez pour vous aider à relever le défi. Donc, si vous avez quelque chose que vous aimeriez pratiquer, n'hésitez pas à essayer.
Vos utilisateurs devraient être en mesure de:
Vous voulez un soutien sur le défi? Rejoignez notre communauté et posez des questions dans la chaîne #Help .
Votre tâche consiste à construire le projet dans les conceptions à l'intérieur du dossier /design . Vous trouverez à la fois un mobile et une version de bureau de la conception.
Les conceptions sont au format statique JPG. L'utilisation de JPGS signifie que vous devrez utiliser votre meilleur jugement pour des styles tels que font-size , padding et margin .
Si vous souhaitez que les fichiers de conception (nous fournissons des versions Sketch & Figma) pour inspecter la conception plus en détail, vous pouvez vous abonner en tant que membre PRO.
Vous trouverez tous les actifs requis dans le dossier /images . Les actifs sont déjà optimisés.
Il existe également un fichier style-guide.md contenant les informations dont vous avez 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. Vous trouverez ci-dessous un processus suggéré, mais ne vous sentez pas comme vous devez suivre ces étapes:
font-family et font-size .Comme mentionné ci-dessus, il existe de nombreuses façons d'héberger gratuitement votre projet. 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. En savoir plus sur nos hôtes recommandés et fiables.
README.md personnalisé Nous recommandons fortement d'écraser ce README.md avec un personnalisé. Nous avons fourni un modèle à l'intérieur du fichier README-template.md dans ce code de démarrage.
Le modèle fournit un guide pour quoi 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 à README.md . Cela le fera apparaître en tant que fichier de réadme de votre référentiel.
Soumettez votre solution sur la plate-forme pour que le reste de la communauté puisse le voir. Suivez notre "Guide complet pour soumettre des solutions" pour des conseils sur la façon de procéder.
N'oubliez pas que si vous recherchez des commentaires sur votre solution, assurez-vous de poser des questions lorsque vous la soumettez. Plus vous êtes spécifique et détaillé avec vos questions, plus vous obtiendrez de précieux commentaires de la communauté.
Il existe plusieurs endroits où vous pouvez partager votre solution:
Nous fournissons des modèles pour vous aider à partager votre solution une fois que vous l'avez soumis sur la plate-forme. Veuillez les modifier et inclure des questions spécifiques lorsque vous recherchez des commentaires.
Plus vous êtes spécifique avec vos questions, plus il est probable qu'un autre membre de la communauté vous donnera des commentaires.
Nous aimons recevoir des commentaires! Nous cherchons toujours à améliorer nos défis et notre plateforme. Donc, si vous avez quelque chose que vous souhaitez mentionner, veuillez envoyer un e-mail à [at] frontendmentor [dot] io.
Ce défi est complètement gratuit. Veuillez le partager avec quiconque le trouvera utile pour la pratique.
Amusez-vous à construire!