todo app frontend mentor

Frontend Mentor - Todo App

Willkommen!

Vielen Dank, dass Sie sich diese Front-End-Codierungsherausforderung angesehen haben.

Mit Frontend Mentor Challenges können Sie Ihre Fähigkeiten in einem realen Workflow verbessern.

Um diese Herausforderung zu machen, brauchen Sie ein gutes Verständnis von HTML, CSS und JavaScript.

Die Herausforderung

Ihre Herausforderung besteht darin, diese Todo -App aufzubauen und sie so nahe wie möglich auszusehen.

Sie können alle Tools verwenden, die Sie Ihnen helfen möchten, die Herausforderung zu erfüllen. Wenn Sie also etwas haben möchten, das Sie üben möchten, können Sie es gerne versuchen.

Ihre Benutzer sollten in der Lage sein:

• Zeigen Sie das optimale Layout für die App je nach Bildschirmgröße des Geräts an
• Siehe Hover -Zustände für alle interaktiven Elemente auf der Seite
• Fügen Sie der Liste neue Todos hinzu
• Mark Todos als vollständig
• Löschen Sie Todos aus der Liste
• Filter durch alle/aktiven/vollständigen Todos
• Löschen Sie alle abgeschlossenen Todos
• Hell und dunkler Modus umschalten
• Bonus : Drag & Drop, um Elemente auf der Liste neu zu ordnen

Willst du Unterstützung für die Herausforderung? Treten Sie unserer Slack -Community bei und stellen Sie Fragen im #Help -Kanal.

Wo man alles finde

Ihre Aufgabe ist es, das Projekt auf die Designs im /design -Ordner zu erstellen. Sie finden sowohl ein Handy als auch eine Desktop -Version des Designs, an die Sie arbeiten können.

Die Designs sind im statischen JPG -Format. Dies bedeutet, dass Sie Ihr bestes Urteilsvermögen für Stile wie font-size , padding und margin verwenden müssen. Dies sollte dazu beitragen, Ihr Auge zu trainieren, um Unterschiede in Bereiche und Größen zu erkennen.

Wenn Sie die Entwurfsdateien möchten (wir stellen Sketch & Figma -Versionen an), um das Design detaillierter zu inspizieren, können Sie sich als Pro -Mitglied abonnieren.

Sie finden alle erforderlichen Vermögenswerte im Ordner /images . Die Vermögenswerte sind bereits optimiert.

Es gibt auch eine style-guide.md Datei, die die benötigten Informationen wie Farbpalette und Schriftarten enthält.

Aufbau Ihres Projekts

Nutzen Sie jeden Workflow, mit dem Sie sich wohl fühlen. Im Folgenden finden Sie einen vorgeschlagenen Prozess, aber Sie haben nicht das Gefühl, dass Sie folgende Schritte befolgen müssen:

1. Initialisieren Sie Ihr Projekt als öffentliches Repository auf GitHub. Dies erleichtert es, Ihren Code mit der Community zu teilen, wenn Sie Hilfe benötigen. Wenn Sie nicht sicher sind, wie Sie dies tun sollen, lesen Sie diese Versuchsressource durch.
2. Konfigurieren Sie Ihr Repository, um Ihren Code in einer URL zu veröffentlichen. Dies ist auch nützlich, wenn Sie während einer Herausforderung Hilfe benötigen, da Sie die URL für Ihr Projekt mit Ihrer Repo -URL teilen können. Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber wir empfehlen, Vercel zu verwenden. Wir haben weitere Informationen über die Bereitstellung Ihres Projekts mit Vercel unten.
3. Schauen Sie sich die Designs an, um zu planen, wie Sie das Projekt angehen. Dieser Schritt ist von entscheidender Bedeutung, damit Sie an CSS -Klassen nachdenken können, die Sie erstellen können, um wiederverwendbare Stile herzustellen.
4. Strukturieren Sie vor dem Hinzufügen von Stilen Ihren Inhalt mit HTML. Wenn Sie zuerst Ihr HTML schreiben, werden Sie Ihre Aufmerksamkeit auf die Erstellung von gut strukturierten Inhalten lenken.
5. Schreiben Sie die Basisstile für Ihr Projekt auf, einschließlich allgemeiner Inhaltsstile wie font-family und font-size .
6. Fügen Sie ganz oben auf der Seite Styles hinzu und arbeiten Sie ab. Gehen Sie nur mit dem nächsten Abschnitt über, sobald Sie froh sind, dass Sie den Bereich, an dem Sie arbeiten, abgeschlossen haben.

Bereitstellung Ihres Projekts

Wie oben erwähnt, gibt es eine Reihe von Möglichkeiten, Ihr Projekt kostenlos zu hosten. Wir empfehlen, Vercel zu verwenden, da es sich um einen erstaunlichen Service und extrem einfach eingerichtet ist. Wenn Sie Vercel verwenden möchten, finden Sie hier einige Schritte, um zu beginnen:

1. Melden Sie sich bei Vercel an und gehen Sie den Onboarding -Fluss durch, um sicherzustellen, dass Ihr Github -Konto mithilfe der Github -Integration angeschlossen ist.
2. Schließen Sie Ihr Projekt über die Seite "Projekt importieren" mit der Schaltfläche "From Git Repository" an und wählen Sie das Projekt aus, das Sie bereitstellen möchten.
3. Sobald Sie verbunden sind, erstellt Vercel jedes Mal, wenn Sie git push , eine neue Bereitstellung und die Bereitstellungs -URL wird in Ihrem Dashboard angezeigt. Sie erhalten auch eine E -Mail für jede Bereitstellung mit der URL.

Teilen Sie Ihre Lösung

Es gibt mehrere Orte, an denen Sie Ihre Lösung teilen können:

1. Senden Sie es auf der Plattform, damit andere Benutzer Ihre Lösung auf der Website sehen. Hier ist unser "vollständiger Leitfaden zur Einreichung von Lösungen", um Ihnen dies zu helfen.
2. Teilen Sie Ihre Lösungsseite in den #fed-projects -Kanal der Slack-Community.
3. Tweet @Frontendmentor und erwähnen Sie @Frontendmentor, einschließlich der Repo- und Live -URLs im Tweet. Wir würden uns gerne ansehen, was Sie gebaut haben und helfen, es zu teilen.

Feedback geben

Feedback ist immer willkommen. Wenn Sie also diese Herausforderung angeben müssen, senden Sie bitte eine E -Mail an Hi [an] Frontendmentor [dot] io.

Diese Herausforderung ist völlig kostenlos. Bitte teilen Sie es mit jedem, der es für das Üben nützlich empfindet.

Viel Spaß beim Bau!

Community -Sponsoren

Ein großes Dankeschön an unsere Community -Sponsoren!

• Zero to Mastery ist eine unglaubliche Lernressource für alle Webentwicklung. Unter der Leitung von Andrei Neagoie sind die Kurse wirklich qualitativ hochwertige Inhalte und decken eine breite Palette von nachgefragten Fähigkeiten ab.
• Diversify Tech ist eine erstaunliche Ressource für unterrepräsentierte technische Menschen. Die Website bietet Joblisten für alle, die neue Möglichkeiten suchen. Der Ressourcenabschnitt ist auch voller nützlicher Links zum Eintauchen!
• Triplebyte ist ein wirklich schönes Angebot, wenn Sie nach einer neuen Rolle suchen. Es ist ein kostenloser Service, mit dem Sie ein vertrauliches Quiz nehmen können. Basierend auf Ihren Ergebnissen werden Sie Unternehmen für ihre freien Rollen aufstellen!