time tracking dashboard

Frontend Mentor - Tableau de bord de suivi du temps

Accueillir!

Merci d'avoir relevé ce défi de codage front-end.

Les défis Frontend Mentor vous aident à améliorer vos compétences en codage en construisant des projets réalistes.

Pour relever ce défi, vous avez besoin d'une compréhension de base de HTML, CSS et JavaScript.

Le défi

Votre défi est de créer ce tableau de bord et de le rendre aussi proche que possible de la conception.

Vous pouvez utiliser tous les outils de votre choix pour vous aider à relever le défi. Donc, si vous avez quelque chose que vous aimeriez mettre en pratique, n'hésitez pas à l'essayer.

Si vous souhaitez vous entraîner à travailler avec des données JSON, nous fournissons un fichier data.json local pour les activités. Cela signifie que vous pourrez extraire les données de là au lieu d'utiliser le contenu du fichier .html .

Vos utilisateurs doivent pouvoir :

• Afficher la mise en page optimale du site en fonction de la taille de l'écran de leur appareil
• Voir les états de survol pour tous les éléments interactifs de la page
• Basculez entre l'affichage des statistiques quotidiennes, hebdomadaires et mensuelles

Vous voulez du soutien pour relever le défi ? Rejoignez notre communauté et posez des questions sur le canal #help .

Comportement attendu

• Le texte de la période précédente doit changer en fonction de la période active. Pour Quotidien, il faut lire "Hier", par exemple "Hier - 2 heures". Pour Hebdomadaire, il faut lire "Semaine dernière", par exemple "Semaine dernière - 32 heures". Pour le mois, il faut lire « Mois dernier », par exemple « Mois dernier - 19 heures ».

Où trouver tout

Votre tâche consiste à créer le projet selon les conceptions contenues dans le dossier /design . Vous trouverez à la fois une version mobile et une version de bureau du design.

Les dessins sont au format statique JPG. L'utilisation de JPG signifie que vous devrez faire preuve de votre meilleur jugement pour des styles tels que font-size , padding et margin .

Si vous souhaitez que les fichiers de conception (nous fournissons les versions Sketch et Figma) inspectent la conception plus en détail, vous pouvez vous abonner en tant que membre PRO.

Vous trouverez tous les éléments 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 aurez besoin, telles que la palette de couleurs et les polices.

Construire votre projet

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 obligé de suivre ces étapes :

1. Initialisez votre projet en tant que référentiel public sur GitHub. La création d'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 procéder, lisez cette ressource Try Git.
2. Configurez votre référentiel pour publier votre code sur une adresse Web. Cela sera également utile si vous avez besoin d'aide lors d'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 procéder et nous proposons quelques recommandations ci-dessous.
3. Parcourez les conceptions pour commencer à planifier la manière dont vous allez aborder le projet. Cette étape est cruciale pour vous aider à anticiper la création de styles réutilisables par les classes CSS.
4. Avant d'ajouter des styles, structurez votre contenu avec HTML. Écrire d'abord votre code HTML peut vous aider à concentrer votre attention sur la création d'un contenu bien structuré.
5. Écrivez les styles de base de votre projet, y compris les styles de contenu généraux, tels que font-family et font-size .
6. Commencez à ajouter des styles en haut de la page et travaillez vers le bas. Ne passez à la section suivante qu'une fois que vous êtes satisfait d'avoir terminé le domaine sur lequel vous travaillez.

Déployer votre projet

Comme mentionné ci-dessus, il existe de nombreuses façons d’héberger votre projet gratuitement. Nos hôtes recommandés sont :

• Pages GitHub
• Vercel
• Netlifier

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 de confiance.

Créez un README.md personnalisé

Nous vous recommandons fortement d'écraser ce README.md par un fichier 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 sur ce qu'il faut ajouter. Un README personnalisé vous aidera à expliquer votre projet et à réfléchir sur 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 fichier README de votre référentiel.

Soumettre votre solution

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 procéder.

N'oubliez pas que si vous recherchez des commentaires sur votre solution, assurez-vous de poser des questions lors de sa soumission. Plus vos questions sont précises et détaillées, plus vous avez de chances d'obtenir de précieux commentaires de la communauté.

Partager votre solution

Il existe plusieurs endroits où vous pouvez partager votre solution :

1. Partagez votre page de solution dans le canal #finished-projects de la communauté.
2. Tweetez @frontendmentor et mentionnez @frontendmentor , y compris le dépôt et les URL en direct dans le tweet. Nous serions ravis de jeter un œil à ce que vous avez construit et de vous aider à le partager.
3. Partagez votre solution sur d'autres réseaux sociaux comme LinkedIn.
4. Blog sur votre expérience dans la construction de votre projet. Écrire sur votre flux de travail, vos choix techniques et parler de votre code est un excellent moyen de renforcer ce que vous avez appris. Les excellentes plates-formes sur lesquelles é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. Veuillez les modifier et inclure des questions spécifiques lorsque vous recherchez des commentaires.

Plus vos questions sont précises, plus il est probable qu'un autre membre de la communauté vous fasse part de ses commentaires.

Vous avez des commentaires à nous faire ?

Nous aimons recevoir des commentaires ! Nous cherchons toujours à améliorer nos défis et notre plateforme. Donc, si vous avez quelque chose que vous aimeriez mentionner, veuillez envoyer un e-mail à hi[at]frontendmentor[dot]io.

Ce défi est entièrement gratuit. Veuillez le partager avec toute personne qui le trouvera utile pour la pratique.

Amusez-vous à construire !