easybank landing page

Frontend Mentor - EasyBank -Landing -Seite

Willkommen!

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

Frontend -Mentor -Herausforderungen helfen Ihnen, Ihre Codierungsfähigkeiten durch den Aufbau realistischer Projekte zu verbessern.

Um diese Herausforderung zu machen, benötigen Sie ein grundlegendes Verständnis von HTML, CSS und JavaScript.

Die Herausforderung

Ihre Herausforderung besteht darin, diese Zielseite auszubauen 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:

• 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

Willst du Unterstützung für die Herausforderung? Treten Sie unserer 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.

Die Designs sind im statischen JPG -Format. Wenn Sie JPGs verwenden, müssen Sie Ihr bestes Urteilsvermögen für Stile wie font-size , padding und margin verwenden.

Wenn Sie möchten, dass die Designdateien (wir skizzigen und figma -Versionen angeben), 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 mit den benötigten Informationen wie Farbpalette und Schriftarten.

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. Durch das Erstellen eines Repo wird es einfacher, Ihren Code mit der Community zu teilen, wenn Sie Hilfe benötigen. Wenn Sie sich nicht sicher sind, wie Sie dies tun sollen, durchführen Sie eine Überlesen von dieser Versuch-Git-Ressource.
2. Konfigurieren Sie Ihr Repository, um Ihren Code an 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 eine Reihe von Möglichkeiten, dies zu tun, und wir geben unten einige Empfehlungen.
3. Schauen Sie sich die Designs an, um zu planen, wie Sie das Projekt angehen. Dieser Schritt ist von entscheidender Bedeutung, damit Sie die CSS -Klassen überdenken können, um wiederverwendbare Stile zu erstellen.
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 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 einer 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 einem benutzerdefinierten zu überschreiben. Wir haben eine Vorlage in der Datei README-template.md in diesem Startercode bereitgestellt.

Die Vorlage bietet eine Anleitung für das, was hinzugefügt werden soll. Ein benutzerdefiniertes README hilft Ihnen dabei, Ihr Projekt zu erklären und über Ihre Erkenntnisse nachzudenken. Bitte bearbeiten Sie unsere Vorlage so viel wie Sie möchten.

Sobald 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

Senden Sie Ihre Lösung auf der Plattform, damit der Rest der Community sehen kann. Folgen Sie unserem "vollständigen Leitfaden zum Einreichen von Lösungen", um Tipps dazu zu erhalten.

Denken Sie daran, wenn Sie nach Feedback zu Ihrer Lösung suchen, stellen Sie sicher, dass Sie beim Einreichen von Fragen Fragen stellen. Je spezifischer und detaillierter Sie mit Ihren Fragen sind, desto höher ist die Wahrscheinlichkeit, 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 in den #fed-projects -Kanal der Community.
2. 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.
3. Teilen Sie Ihre Lösung auf anderen sozialen Kanälen wie LinkedIn.
4. Blog über Ihre Erfahrung auf dem Erstellen Ihres Projekts. Das Schreiben über Ihren Workflow, die technischen Entscheidungen und das Durchsprechen Ihres Codes ist eine brillante Möglichkeit, das zu verstärken, was Sie gelernt haben. Tolle Plattformen zum Schreiben sind Dev.to, Hashhnode und Codenewbie.

Wir bieten Vorlagen, die Ihnen helfen, Ihre Lösung zu teilen, sobald Sie sie auf der Plattform eingereicht haben. Bitte bearbeiten Sie sie und geben Sie spezifische Fragen an, wenn Sie nach Feedback suchen.

Je spezifischer Sie mit Ihren Fragen sind, desto wahrscheinlicher ist es, dass ein anderes Mitglied der Community Ihnen Feedback gibt.

Hast du Feedback für uns?

Wir lieben es, Feedback zu erhalten! Wir sind immer auf der Suche nach unseren Herausforderungen und unserer Plattform. Wenn Sie also etwas haben, das Sie erwähnen möchten, 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!