Übungsprojekte für Front-End-Entwickler

Die Front-End-Entwicklung erfordert wie jede andere Fähigkeit eine Menge Arbeit. Es gibt verschiedene Möglichkeiten, wie Sie diese große Aufgabe bewältigen können. Einige davon sind:

1. Arbeiten Sie in einer Agentur als Front-End-Entwickler.
2. Studieren Sie bei Ihnen zu Hause und bauen Sie nebenbei Projekte.
3. Arbeiten Sie als Freiberufler für Kunden.

Jedes hat seine eigenen Vor- und Nachteile, aber eines bleibt konstant: Je vielfältiger Ihre Aufgaben sind, desto schneller kommen Sie voran.

In diesem Artikel werden einige potenzielle Projekte vorgestellt, an denen Sie nebenbei und selbst arbeiten können, um neue Technologien, Ansätze und möglicherweise einige „Aha!“ Zu erlernen. Momente in Ihrer Front-End-Karriere.

Alle folgenden Aufgaben sind ziemlich gute Repositorys für Ihr GitHub-Profil, insbesondere wenn Sie sich für eine Front-End-Position bewerben.

Eine Notiz! Alle folgenden Beispiele stammen von Designern für echte Produkte. Wir schlagen Ihnen NICHT vor, dass Sie sie greifen, codieren und tun, was Sie wollen. All dies ist ein Beispiel für UI-Elemente, an denen Sie arbeiten können, ohne sie zu verteilen oder später zu verkaufen.

1 - Eine Komponenten-UI-Bibliothek

Schwierigkeit: Leicht-Mittel.

Lassen Sie sich jedoch nicht vom „Einfachen“ irreführen, denn wie bei jedem Projekt hier können sowohl Junior- als auch Senior-Entwickler je nach den von ihnen gelösten Problemen Probleme haben. Wir haben dies auf die einfache Skala gebracht, da es nicht aus komplexen UI-Elementen besteht und alles gekapselt werden kann.

Sie können ein vorhandenes Design wie dieses auswählen, das sich auf Dropdowns / Schaltflächen konzentriert:

Quelle

Oder Sie können mit einem allgemeineren wie Bootstrap und Foundation gehen. Was zu beachten ist:

• Gut definierte Namenskonvention.
• Eine Präsentation der Komponenten.
• Modifikatoren - Die meisten Leute ändern gerne kleinere Elemente. Überlegen Sie also, wie Sie diese anwenden sollen. Beispiel - Sie möchten Primär- und Sekundärfarben. Erfolg, Fehlerzustände usw.
• Behalten Sie es "Plug and Play". Ihr Ziel ist es, einem anderen Entwickler die Verwendung Ihres Codes zu ermöglichen, ohne CSS schreiben zu müssen. Sie können es auch mit einem einfachen Rastersystem kombinieren.

Eine gute Architektur einer solchen Bibliothek ist keine triviale Angelegenheit. Sie können genau diese Aufgabe zu Beginn Ihrer Karriere sowie einige Jahre später ausprobieren und vergleichen, was Sie gelernt haben.

2 - Implementieren Sie die Benutzeroberfläche für komplexe Animationen

Schwierigkeit: Schwer

Bei dieser Aufgabe dreht sich alles um elegante Animationen und Leistung. Daneben müssten Sie aber auch einige weniger generische Grafiken aufschreiben. Siehe das folgende Beispiel:

Die vollständige Animation finden Sie hier. Sobald Sie die Benutzeroberfläche heruntergefahren haben, ist es Zeit, die Interaktivität hinzuzufügen. Nicht alle Animationen sehen wie das Design aus, da es nicht in einem Browser, sondern in einem anderen Tool erstellt wurde. Dies bedeutet jedoch nicht, dass Sie dem Original nicht wirklich nahe kommen können. Natürlich werden wir alle Bewegungsunschärfeeffekte und seltsamen Formverformungen überspringen, aber ein Großteil des Restes können Sie tun. Es gibt auch JS-Bibliotheken, die Ihnen beim Keyframing des Ganzen helfen.

Diese Aufgabe kann nur zwei Bildschirmwechsel erfordern, um sie etwas kürzer zu halten. Sie müssen hier nicht an mobilen Ansichten arbeiten, es sei denn, Sie haben die Energie.

3 - Eine Spiel-Benutzeroberfläche

Schwierigkeit: Schwer

Eine weitere knifflige Aufgabe! Die meisten Spiele haben einen sehr einzigartigen Kunststil, der im Web nicht einfach zu übersetzen ist. Um die Sache zu erschweren, gibt es hier eine andere Regel: Verwenden Sie keine Bilder / SVGs, um die Formen auf der Benutzeroberfläche zu erzielen.

Quelle: StarCraft II

Zu diesem Zweck haben wir StarCraft 2 ausgewählt. Wie Sie sehen, gibt es hier und da eine Menge kleiner Details, die Sie bei Ihrer Implementierung berücksichtigen müssen. In der Tat macht hier die Regel „kein Vermögen“ dies schwierig. Sie müssen mit Formen, Ausschnitten, Schattenmagixen, Verläufen, Rändern und vielem mehr arbeiten. Natürlich werden Bilder für die Porträts und die Marine auf der rechten Seite benötigt.

Um die Dinge realistischer zu gestalten, kann der obere rechte Porträtrand gegen einen der oberen Zeilen aus dem nächsten Bild ausgetauscht werden:

Quelle: StarCraft II

Wenn Sie es geschafft haben, dass es auch auf kleineren Bildschirmen und auf Mobilgeräten gut aussieht, gewinnen Sie zusätzliche Punkte! Dies wäre ein sehr "Wow!" Effektprojekt auf Ihren Lebenslauf.

4 - Ein Quizspiel

Schwierigkeit: Mittel

Quizspiele sind im Vergleich zu einigen der oben genannten Designs nicht allzu schwer zu erstellen, aber sie würden einige JS erfordern, damit sie funktionieren. Ja, bisher hatten wir nur CSS-basierte Projekte. Für dieses Projekt müssten Sie es auch interaktiv gestalten, damit die Leute klicken, richtige / falsche Antworten sehen und vieles mehr.

Wenn Sie in Dribbble nach „Quiz“ suchen, finden Sie eine Menge Beispiele. Wenn Sie jedoch Schwierigkeiten haben, eines auszuwählen, können Sie Folgendes tun:

Quelle

Wie Sie sehen können, gibt es nur zwei Bildschirme, was bedeutet, dass Sie den Rest basierend auf dem obigen Design erstellen müssen.

Features für das Quiz:

• Zähle die richtigen Antworten
• Antwort aus N Optionen
• Zeigen Sie nach dem Klicken die richtigen / falschen Antworten an
• Frage-Popup melden
• Kehren Sie zu allen Tests zurück und wählen Sie ein Quiz aus
• Zeigen Sie das Endergebnis nach dem Ende des Quiz an

Sie können viel mehr als die oben genannten tun, wenn Sie möchten. Dies ist im Allgemeinen ein Projekt vom Typ „ein Nachmittag“.

5 - Wählen Sie eine zufällige Site aus und machen Sie sie druckerfreundlich

Schwierigkeit: Einfach

Die Druckoptimierung hat ihre Macken. Insbesondere, wenn Sie vorhandene Elemente auf der Site ausblenden, Hintergründe bereinigen, die Typografie verbessern, mit Seitenumbrüchen arbeiten und die Seiten formatieren.

Für diese Aufgabe können Sie eine Site im Web auswählen, eine Artikelseite auswählen und mit der Arbeit an den Druckstilen beginnen. Es gibt lange Artikel zu diesem Thema, daher gibt es viele, die Ihnen weiterhelfen können.

Beispielwebsites, die Sie verwenden können:

• Eine Amazon-Verkaufsseite - Konzentrieren Sie sich nur auf die wichtigen Informationen.
• Kursverkaufsseite - von SitePoint.
• Eine weitere Kursseite

Fühlen Sie sich frei, eine andere Website auszuwählen, die Sie möchten. Sie können dies einfach oder schwierig für sich selbst machen. Wenn Sie ein Beispiel für einen guten Druckstil sehen möchten, schauen Sie sich https://www.smashingmagazine.com/ an.

6 - Ein komplexes Layout im Magazinstil

Schwierigkeit: Wahnsinn

Dieser ist nicht nur hart, sondern auch komplex. Und es dauert länger als bei allen anderen oben genannten Aufgaben, sodass Sie möglicherweise mehr als 20 bis 30 Stunden dafür freigeben müssen.

Quelle

Das obige Design ist eine Neugestaltung der New York Times von Slava Kornilov. Unter dem Link sehen Sie alle Entwürfe, die er gemacht hat, einschließlich großer Bildschirme, auf denen die gesamte Homepage dargestellt ist.

In diesem Projekt müssen Sie in Komponenten denken, einige komplexe Benutzeroberflächenelemente wie das Video außerhalb des Ansichtsfensters (das weiterhin reagieren muss), die Typografieeinstellungen, die überlappenden Elemente und vieles mehr formatieren.

Selbst wenn Sie nur den Hintergrund hinter dem großen Titel oben betrachten, werden einige knifflige Teile der Implementierung verborgen.

Er hat eine Menge Elemente entworfen, so dass Sie mehr als ein oder zwei Monate hier verbringen können, wenn Sie möchten, und es gibt so viel zu lernen. Vielleicht kannst du sogar ein Video im Hintergrund machen, wie unten gezeigt:

Quelle

In diesem Fall finden auch Animationen für die verschiedenen Nachrichtenartikel statt, die ebenfalls implementiert werden können. Sie sollten hier auch mobile Ansichten berücksichtigen.

7 - Das Dashboard und seine Diagramme

Schwierigkeit: Mittelschwer

Dashboards sind überall. Und wenn Designer abends nicht wissen, was sie tun sollen, entwerfen sie manchmal einfach einen anderen. Nur weil.
Und dank dessen gibt es eine große Auswahl. Irgendwann müssen Sie wahrscheinlich ein echtes für ein echtes Produkt bauen. Und Sie haben möglicherweise das Pech, eine dieser „fantastisch aussehenden“ Schnittstellen mit einer Million Animationen unter Last zu erhalten, die einfach keinen Sinn ergeben.

Um sich auf einen solchen Tag vorzubereiten, ist hier eine Herausforderung für Sie:

Implementieren Sie das folgende Design:

Quelle

Was Sie hier beachten müssen - Die Diagramme müssen echt sein. Sie müssen echte Daten verwenden , und Sie sollten versuchen, sie so aussehen zu lassen, wie Sie sie oben sehen. Es gibt viele Bibliotheken, die Sie verwenden können, und höchstwahrscheinlich müssen Sie viel erweitern / ändern.

Wenn Sie sich entscheiden, einige Animationen darin zu integrieren, könnte es sogar noch besser sein. Das würde in einem Lebenslauf so gut aussehen, oder?

Schlussendlich:

Eine der besten Möglichkeiten, um zu lernen und ein besserer Entwickler zu werden, besteht darin, einfach mit dem Schreiben von Code und Baustellen zu beginnen. Tun Sie es täglich, codieren Sie einfach eine Tonne! Dies ist besonders in den ersten 3-4 Jahren Ihrer Karriere hilfreich.

Mit dieser Erfahrung könnten Sie leicht eine höhere Rolle übernehmen. Dort können Sie Entscheidungen treffen und Ihr eigenes Team effektiv führen, indem Sie die Erfahrungen aus all diesen Projekten und die Probleme und Probleme nutzen, die Sie auf Ihrem Weg gefunden und überwunden haben. Und denken Sie daran, immer etwas zu finden, an dem Sie schwer arbeiten können!