social media dashboard with theme switcher

Frontend Mentor - Tableau de bord des médias sociaux avec commutateur de thème

Accueillir!

Merci d'avoir consulté ce défi de codage frontal.

Les défis du mentor de frontend vous permettent d'améliorer vos compétences dans un flux de travail réel.

Pour faire ce défi, vous avez besoin d'une compréhension de base de HTML, CSS et un tout petit peu de JavaScript.

Le défi

Votre défi est de développer ce tableau de bord des médias sociaux 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:

• Afficher la disposition optimale du site en fonction de la taille de l'écran de leur appareil
• Voir les états de survol de tous les éléments interactifs de la page
• Bascule le thème de la couleur à leur préférence

Vous voulez un soutien sur le défi? Rejoignez notre communauté Slack et posez des questions dans la chaîne #Help .

Où trouver tout

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 pour travailler.

Les conceptions sont au format statique JPG. Cela signifie que vous devrez utiliser votre meilleur jugement pour des styles tels que font-size , padding et margin . Cela devrait aider à former votre œil à percevoir les différences dans les espacements et les tailles.

Si vous souhaitez le fichier de croquis afin d'inspecter la conception plus en détail, il est disponible à l'achat de la page Challenge sur la plate-forme.

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 , qui contient les informations dont vous avez 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 comme vous devez suivre ces étapes:

1. Initialisez votre projet en tant que référentiel public sur GitHub. Cela 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 Git.
2. Configurez votre référentiel pour publier votre code sur une URL. 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 votre URL Repo. Il existe plusieurs façons de le faire, mais nous vous recommandons d'utiliser Zeit maintenant. Nous avons plus d'informations sur le déploiement de votre projet avec Zeit ci-dessous.
3. Parcourez les conceptions pour commencer à planifier comment vous vous aborderons le projet. Cette étape est cruciale pour vous aider à penser à l'avenir pour les cours CSS que vous pourriez créer pour faire des styles réutilisables.
4. Avant d'ajouter des styles, structurez votre contenu avec HTML. Écrire votre HTML en premier peut vous aider à concentrer votre attention sur la création de 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. Passez à la section suivante une fois que vous êtes heureux que vous ayez terminé la zone sur laquelle vous travaillez.

Déploiement de votre projet

Comme mentionné ci-dessus, il existe un certain nombre de façons d'héberger gratuitement votre projet. Nous vous recommandons d'utiliser Zeit maintenant car c'est un service incroyable et extrêmement simple à installer. Si vous souhaitez utiliser Zeit, voici quelques étapes à suivre pour commencer:

1. Inscrivez-vous à Zeit maintenant et passez par le flux d'intégration, en vous assurant que votre compte GitHub est connecté en utilisant leur Zeit maintenant pour l'intégration GitHub.
2. Connectez votre projet à Zeit maintenant à partir de la page "Créer un nouveau projet", en utilisant le bouton "Nouveau projet à partir de GitHub" et sélectionnant le projet que vous souhaitez déployer.
3. Une fois connecté, chaque fois que vous git push , Zeit créera désormais un nouveau déploiement et l'URL de déploiement sera affichée sur votre tableau de bord Zeit. Vous recevrez également un e-mail pour chaque déploiement avec l'URL.

Partager votre solution

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

1. Soumettez-le sur la plate-forme afin que les autres utilisateurs voient votre solution sur le site. D'autres utilisateurs pourront vous donner des commentaires, ce qui pourrait aider à améliorer votre code pour le prochain projet.
2. Partagez votre référentiel et URL en direct dans le canal # fini-projects de la communauté Slack.
3. Tweet @Frontendmentor et mentionnez @Frontendmentor , y compris les URL Repo et Live dans le tweet. Nous aimerions jeter un œil à ce que vous avez construit et aider à le partager.

Donner des commentaires

Les commentaires sont toujours les bienvenus, donc si vous en avez à relever ce défi, 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!