time tracking dashboard

Frontend Mentor – Zeiterfassungs-Dashboard

Willkommen!

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

Frontend-Mentor-Herausforderungen helfen Ihnen, Ihre Programmierfähigkeiten zu verbessern, indem Sie realistische Projekte erstellen.

Um diese Herausforderung zu meistern, benötigen Sie grundlegende Kenntnisse in HTML, CSS und JavaScript.

Die Herausforderung

Ihre Herausforderung besteht darin, dieses Dashboard so zu gestalten, dass es dem Design so nahe wie möglich kommt.

Sie können beliebige Tools verwenden, die Ihnen bei der Bewältigung der Herausforderung helfen. Wenn Sie also etwas haben, das Sie gerne üben möchten, probieren Sie es einfach aus.

Wenn Sie die Arbeit mit JSON-Daten üben möchten, stellen wir für die Aktivitäten eine lokale data.json Datei zur Verfügung. Das bedeutet, dass Sie die Daten von dort abrufen können, anstatt den Inhalt der .html Datei zu verwenden.

Ihre Benutzer sollten in der Lage sein:

• Sehen Sie sich das optimale Layout für die Website an, abhängig von der Bildschirmgröße Ihres Geräts
• Sehen Sie sich den Hover-Status für alle interaktiven Elemente auf der Seite an
• Wechseln Sie zwischen der Anzeige täglicher, wöchentlicher und monatlicher Statistiken

Brauchen Sie Unterstützung bei der Herausforderung? Treten Sie unserer Community bei und stellen Sie Fragen im #help -Kanal.

Erwartetes Verhalten

• Der Text für die Zeit des vorherigen Zeitraums sollte sich basierend auf dem aktiven Zeitrahmen ändern. Für „Täglich“ sollte „Gestern“ lauten, z. B. „Gestern – 2 Stunden“. Für „Wöchentlich“ sollte „Letzte Woche“ lauten, z. B. „Letzte Woche – 32 Stunden“. Für monatlich sollte es „Letzter Monat“ lauten, z. B. „Letzter Monat – 19 Stunden“.

Wo alles zu finden ist

Ihre Aufgabe besteht darin, das Projekt anhand der Designs im Ordner /design zu erweitern. Sie finden sowohl eine mobile als auch eine Desktop-Version des Designs.

Die Designs liegen im statischen JPG-Format vor. Die Verwendung von JPGs bedeutet, dass Sie Stile wie font-size , padding und margin nach bestem Ermessen festlegen müssen.

Wenn Sie möchten, dass die Designdateien (wir stellen Sketch- und Figma-Versionen zur Verfügung) das Design detaillierter prüfen können, können Sie sich als PRO-Mitglied anmelden.

Sie finden alle erforderlichen Assets im Ordner /images . Die Assets sind bereits optimiert.

Es gibt auch eine style-guide.md Datei mit den benötigten Informationen, wie z. B. Farbpalette und Schriftarten.

Erstellen Sie Ihr Projekt

Fühlen Sie sich frei, jeden Arbeitsablauf zu verwenden, mit dem Sie sich wohl fühlen. Im Folgenden finden Sie einen empfohlenen Prozess. Sie haben jedoch nicht das Gefühl, dass Sie die folgenden Schritte ausführen müssen:

1. Initialisieren Sie Ihr Projekt als öffentliches Repository auf GitHub. Durch das Erstellen eines Repos können Sie Ihren Code einfacher mit der Community teilen, wenn Sie Hilfe benötigen. Wenn Sie nicht sicher sind, wie das geht, lesen Sie sich diese Ressource zum Ausprobieren von Git durch.
2. Konfigurieren Sie Ihr Repository, um Ihren Code unter einer Webadresse 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 verschiedene Möglichkeiten, dies zu tun, und wir geben unten einige Empfehlungen.
3. Schauen Sie sich die Entwürfe an, um mit der Planung zu beginnen, wie Sie das Projekt angehen. Dieser Schritt ist von entscheidender Bedeutung, damit Sie mit CSS-Klassen vorausdenken können, um wiederverwendbare Stile zu erstellen.
4. Strukturieren Sie Ihren Inhalt mit HTML, bevor Sie Stile hinzufügen. Wenn Sie zuerst Ihren HTML-Code schreiben, können Sie sich besser auf die Erstellung gut strukturierter Inhalte konzentrieren.
5. Schreiben Sie die Basisstile für Ihr Projekt auf, einschließlich allgemeiner Inhaltsstile wie font-family und font-size .
6. Beginnen Sie mit dem Hinzufügen von Stilen oben auf der Seite und arbeiten Sie sich nach unten vor. Fahren Sie erst mit dem nächsten Abschnitt fort, wenn Sie zufrieden sind, dass Sie den Bereich, an dem Sie arbeiten, abgeschlossen haben.

Bereitstellung Ihres Projekts

Wie oben erwähnt, gibt es viele Möglichkeiten, Ihr Projekt kostenlos zu hosten. Unsere empfohlenen Gastgeber sind:

• GitHub-Seiten
• Vercel
• Netlify

Sie können Ihre Website mit einer dieser Lösungen oder einem unserer anderen vertrauenswürdigen Anbieter hosten. Lesen Sie mehr über unsere empfohlenen und vertrauenswürdigen Gastgeber.

Erstellen Sie eine benutzerdefinierte README.md

Wir empfehlen dringend, diese README.md mit einer benutzerdefinierten Datei zu überschreiben. Wir haben in diesem Startercode eine Vorlage in der Datei README-template.md bereitgestellt.

Die Vorlage bietet eine Anleitung zum Hinzufügen. Eine benutzerdefinierte README hilft Ihnen, Ihr Projekt zu erklären und über Ihre Erkenntnisse nachzudenken. Sie können unsere Vorlage jederzeit beliebig bearbeiten.

Nachdem Sie Ihre Informationen zur Vorlage hinzugefügt haben, löschen Sie diese Datei und benennen Sie die Datei README-template.md in README.md um. Dadurch wird es als README-Datei Ihres Repositorys angezeigt.

Senden Sie Ihre Lösung

Reichen Sie Ihre Lösung auf der Plattform ein, damit der Rest der Community sie sehen kann. Tipps dazu finden Sie in unserer „Vollständigen Anleitung zum Einreichen von Lösungen“.

Denken Sie daran: Wenn Sie Feedback zu Ihrer Lösung wünschen, stellen Sie beim Einreichen unbedingt Fragen. Je konkreter und detaillierter Sie Ihre Fragen formulieren, desto höher ist die Chance, dass Sie wertvolles Feedback von der Community erhalten.

Teilen Sie Ihre Lösung

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

1. Teilen Sie Ihre Lösungsseite im #finished-projects- Kanal der Community.
2. Twittern Sie @frontendmentor und erwähnen Sie @frontendmentor , einschließlich der Repo- und Live-URLs im Tweet. Wir schauen uns gerne an, was Sie erstellt haben, und helfen Ihnen, es weiterzugeben.
3. Teilen Sie Ihre Lösung auf anderen sozialen Kanälen wie LinkedIn.
4. Bloggen Sie über Ihre Erfahrungen beim Aufbau Ihres Projekts. Das Schreiben über Ihren Arbeitsablauf, Ihre technischen Entscheidungen und das Durchsprechen Ihres Codes ist eine hervorragende Möglichkeit, das Gelernte zu festigen. Tolle Plattformen zum Schreiben sind dev.to, Hashnode und CodeNewbie.

Wir stellen Vorlagen zur Verfügung, die Ihnen helfen, Ihre Lösung zu teilen, nachdem Sie sie auf der Plattform eingereicht haben. Bitte bearbeiten Sie sie und fügen Sie spezifische Fragen hinzu, wenn Sie Feedback einholen möchten.

Je konkreter Sie Ihre Fragen formulieren, desto wahrscheinlicher ist es, dass ein anderes Mitglied der Community Ihnen Feedback gibt.

Haben Sie Feedback für uns?

Wir freuen uns über Feedback! Wir sind stets bestrebt, unsere Herausforderungen und unsere Plattform zu verbessern. Wenn Sie also etwas erwähnen möchten, senden Sie bitte eine E-Mail an hi[at]frontendmentor[dot]io.

Diese Herausforderung ist völlig kostenlos. Bitte teilen Sie es mit allen, die es für die Praxis nützlich finden.

Viel Spaß beim Bauen!