social media dashboard with theme switcher

Frontend Mentor - Social Media Dashboard mit Themenschalter

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, benötigen Sie ein grundlegendes Verständnis von HTML, CSS und einem kleinen Stück JavaScript.

Die Herausforderung

Ihre Herausforderung besteht darin, dieses Social -Media -Dashboard aufzubauen und es 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:

• Sehen Sie sich das optimale Layout für die Site je nach Bildschirmgröße des Geräts an
• Siehe Hover -Zustände für alle interaktiven Elemente auf der Seite
• Schalten Sie das Farbthema zu ihrer Präferenz um

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 Skizzendatei wünschen, um das Design ausführlicher zu untersuchen, können sie auf der Challenge -Seite auf der Plattform gekauft werden.

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 jetzt, Zeit zu verwenden. Wir haben weitere Informationen über die Bereitstellung Ihres Projekts mit Zeit 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 jetzt, Zeit zu verwenden, da es sich um einen erstaunlichen Service handelt und extrem einfach zu werden. Wenn Sie Zeit verwenden möchten, finden Sie hier einige Schritte, um zu beginnen:

1. Melden Sie sich jetzt bei Zeit an und gehen Sie den Onboarding -Fluss durch, um sicherzustellen, dass Ihr Github -Konto mit ihrem Zeit -Zeit für die Github -Integration verbunden ist.
2. Verbinden Sie Ihr Projekt jetzt über die Seite "Ein neues Projekt erstellen" mit der Schaltfläche "neues Projekt aus Github" und wählen Sie das Projekt aus, das Sie bereitstellen möchten.
3. Sobald Sie verbunden sind, wird Zeit, wenn Sie git push nun erstellen, eine neue Bereitstellung und die Bereitstellungs -URL wird auf Ihrem Zeit -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. Andere Benutzer können Ihnen Feedback geben, um Ihren Code für das nächste Projekt zu verbessern.
2. Teilen Sie Ihr Repository und Ihre Live-URL 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!