todo app frontend mentor

Frontend Mentor - Todo App

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 bonne compréhension de HTML, CSS et JavaScript.

Le défi

Votre défi est de créer cette application TODO 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 de l'application 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
• Ajouter de nouveaux todos à la liste
• Mark Todos comme complet
• Supprimer Todos de la liste
• Filtre par tous / Todos actifs / complets
• Effacer tous les todos terminés
• Basquer la lumière et le mode sombre
• Bonus : glisser et déposer pour réorganiser les éléments de la liste

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 les fichiers de conception (nous fournissons des versions Sketch & Figma) afin d'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 , 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 Vercel. Nous avons plus d'informations sur le déploiement de votre projet avec Vercel 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 Vercel car c'est un service incroyable et extrêmement simple à installer. Si vous souhaitez utiliser Vercel, voici quelques étapes à suivre pour commencer:

1. Inscrivez-vous à Vercel et passez par le flux d'intégration, en vous assurant que votre compte GitHub est connecté en utilisant leur intégration Vercel pour GitHub.
2. Connectez votre projet à Vercel à partir de la page "Importer Project", en utilisant le bouton "From Git Repository" et en sélectionnant le projet que vous souhaitez déployer.
3. Une fois connecté, chaque fois que vous git push , Vercel créera un nouveau déploiement et l'URL de déploiement sera affiché sur votre tableau de bord. 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. Voici notre "Guide complet pour soumettre des solutions" pour vous aider à le faire.
2. Partagez votre page de solution 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!

Sponsors communautaires

Un grand merci à nos sponsors communautaires!

• Zero to Mastery est une ressource d'apprentissage incroyable pour tout ce qui concerne le développement Web. Dirigés par Andrei Neagaiie, les cours sont un contenu de haute qualité et couvrent un large éventail de compétences en demande.
• Diversifier la technologie est une ressource incroyable pour les personnes sous-représentées dans la technologie. Le site propose des listes d'emplois pour tous ceux qui recherchent de nouvelles opportunités. La section des ressources est également pleine de liens utiles pour plonger!
• Triplebyte est une très belle offre si vous cherchez un nouveau rôle. C'est un service gratuit qui vous permet de prendre un quiz confidentiel. En fonction de vos résultats, les entreprises vous présenteront leurs rôles vacants!