Wie man ein besserer Front-End-Entwickler wird, indem man Projekte erstellt (Ideen eingeschlossen)

Wenn Sie Ihr Wachstum als Front-End-Entwickler beschleunigen möchten, gibt es nichts Schöneres, als echte Entwicklungsprojekte durchzuführen.

Die Wahrheit ist, dass Sie alle Tutorials und Kurse der Welt sehen können, aber ohne Anwendung und Übung werden Sie nicht wirklich Fähigkeiten erlernen, die Sie benötigen, um an echten Projekten zu arbeiten.

Kundenprojekte enthalten keine schrittweisen Anweisungen, da sie Sie sonst überhaupt nicht benötigen würden. Sie müssen über den Tellerrand hinaus denken, Lösungen finden, Kompromisse eingehen und Ihren Weg bis zur Ziellinie hacken.

Der beste Weg, um diese Fähigkeiten zu erlernen, besteht darin, einige Front-End-Entwicklerprojekte durchzuführen und dabei zu lernen. Und das Beste daran? Sie brauchen nicht einmal einen Kunden, um loszulegen, da Sie diese Projekte selbst durchführen können.

So wählen Sie ein persönliches Front-End-Entwicklungsprojekt aus

Behalte dein Können im Hinterkopf

Wählen Sie kein Projekt, das für Ihr Können zu fortgeschritten ist, insbesondere wenn Sie der Typ sind, der die Motivation verliert, wenn es zu schwierig wird.

Vergessen Sie jedoch nicht, dass Sie ein Projekt auswählen sollten, das über Ihr derzeitiges Qualifikationsniveau hinausgeht, aber dennoch machbar ist, da das Ziel hier darin besteht, Ihnen bei der Beherrschung der Front-End-Entwicklung zu helfen.

Wenn Sie beispielsweise kürzlich HTML und CSS gelernt haben, ist es an der Zeit, sich durch das Erlernen von JavaScript zu verbessern.

Lösen Sie ein persönliches Problem oder ein Problem, das Sie interessiert

Es ist auch wahrscheinlicher, dass Sie ein Projekt genießen und dabei bleiben, wenn es Ihre eigenen Probleme löst oder Ihre eigenen Wünsche erfüllt.

Vielleicht verlieren Sie immer den Überblick über die Zeit, wenn Sie durch Ihren Facebook-Newsfeed scrollen, oder Sie möchten eine Website, auf der Sie automatisch ansprechende YouTube-Miniaturansichten erstellen können.

Stellen Sie sich ein persönliches Problem vor, das Sie mit Technologie lösen können, und beginnen Sie von dort aus. Die Vorschläge in diesem Artikel sind nur als Ausgangspunkt gedacht. Es ist viel besser, wenn Sie es ändern, um Ihre einzigartige Wendung hinzuzufügen.

4 lustige Front-End-Entwicklungsprojekte

Erstellen Sie einen Klon einer Website.

Lernfähigkeiten: HTML, CSS, JavaScript und / oder Bootstrap.

Das Erstellen eines Klons einer Website ist eine hervorragende Möglichkeit, die Konstruktion zu untersuchen und die Grundlagen der Seitenstruktur, Farben, Schriftarten, Medien, Tabellen und mehr zu erlernen. Gehen Sie so detailliert wie möglich vor, um das Original zu replizieren.

Wählen Sie eine Website aus, die Ihnen gefällt, und erstellen Sie selbst einen Klon davon. Schauen Sie sich den Quellcode nicht so oft wie möglich an, um das Beste aus ihm herauszuholen.

Das Klonen von Google ist eine der Übungen von Thinkful für die Schüler des Coding-Workshops. Thinkful ist ein Bildungsunternehmen, das Technologiekurse einschließlich eines Bootcamps für die Webentwicklung anbietet.

Sie können diese Übung auch befolgen, um die Zielseite einer App namens Karma WiFi zu klonen. Es wurde von Kyle Koski, einem der Mentoren von Thinkful, erstellt und verwendet HTML und CSS.

Das Gute beim Klonen einer Website ist, dass Sie den Grad der Komplexität der Website auswählen können. Wenn Sie gerade erst anfangen, ist eine einfache Website, die nur HTML und CSS benötigt, ein guter Anfang. Wenn Sie fortgeschrittener sind, wählen Sie eine Website aus, für die JavaScript oder React erforderlich ist.

Erstellen Sie ein JavaScript-Quizspiel.

Lernfähigkeit: JavaScript

JavaScript ist eine Programmiersprache, mit der Sie interaktive Webseiten erstellen können. Diese Sprache verwenden Sie, wenn Sie reaktionsschnelle Elemente wie Menüs, Videoplayer, Animationen, interaktive Karten und sogar Spiele im Browser erstellen.

Bevor wir fortfahren, ist es wichtig zu wissen, warum Sie ein Quiz erstellen möchten.

Es ist mehr als Spaß und Spiel. Quiz werden als Content-Marketing-Tools immer beliebter. Schon mal solche Dinge gesehen?

Quiz sind hervorragende Marketinginstrumente, da sie interaktiv sind. Laut einer Umfrage des Content Marketing Institute stimmen 81% der Vermarkter zu, dass interaktive Inhalte - jede Art von Inhalten, an denen der Benutzer teilnehmen muss - die Aufmerksamkeit effektiver erregen als statische Inhalte.

Aus diesem Grund werden Quiz für verschiedene Marketingzwecke verwendet. Triviale Quizfragen wie die auf der linken Seite werden verwendet, um den Verkehr auf eine Website zu steigern. Einige Vermarkter verwenden auch Quizfragen, um Leads zu qualifizieren, Leads zu segmentieren und das Engagement zu erhöhen.

Ich erkläre dies, weil es Ihre Aufgabe als Entwickler ist, nicht nur sicherzustellen, dass die Dinge hübsch aussehen, sondern auch Funktionen zu erstellen, die benutzerfreundlich sind und die Website Ihres Kunden effektiver bei der Erreichung seiner Vertriebs- und Marketingziele machen.

Um ein Quiz zu erstellen, lesen Sie diese Tutorials zum Erstellen von JavaScript-Quiz aus WebDevTrick und SitePoint. So kann Ihr JS-Quiz aussehen:

Erstellen Sie Ihren eigenen mobilen QR-Reader.

Lernfähigkeit: JavaScript

Barcodes und QR-Codes haben die Art und Weise, wie wir einkaufen, verändert. Kunden können jetzt ein Produkt mit ihrem Smartphone scannen und verschiedene Informationen darüber abrufen, z. B. den Preis oder den Ort, an dem sie es kaufen können.

Außerdem müssen auf einer Website keine langen Codes wie Aktivierungscodes oder Modellnummern eingegeben werden, was das Einkaufserlebnis einfacher und problemloser macht.

Anders als andere denken, benötigen Sie keine native Telefon-App, um QR-Codes zu scannen.

Websites, die auf einem Smart-Gerät mit einer Kamera ausgeführt werden, können dies tun.

Diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie Ihren eigenen QR-Code-Leser erstellen.

Sie werden HTML und JavaScript verwenden, aber der wichtigste Teil ist die Verwendung einer JS-Bibliothek, die den QR-Code interpretieren kann. Die gute Nachricht ist, dass Sie es nicht von Grund auf neu erstellen müssen, da es genau für diesen Zweck viele großartige Bibliotheken gibt.

Erstellen Sie eine Wetter-App.

Lernfähigkeit: Winkel 8

Angular ist neben React und Vue.js eines der drei beliebtesten Front-End-Entwicklungsframeworks. Es wird häufig zum Erstellen formularbasierter Apps verwendet (bei denen Sie sich anmelden müssen, um ein Konto zu erstellen), kann aber auch zum Erstellen von Spielen und sogar Apps mit Virtual-Reality-Elementen verwendet werden.

Es gibt ein sehr detailliertes, schrittweises Tutorial zu Medium, in dem Anfänger lernen, wie man mit Angular 8 (der neuesten Version von Angular) eine schöne Wetter-App erstellt. Die Wetter-App sieht folgendermaßen aus:

Diese App bietet ein klares, minimalistisches Design mit atemberaubenden Illustrationen und einer einfachen Benutzeroberfläche. Es hat auch eine raffinierte Hell- und Dunkel-Modus-Funktion, die mehr Flair verleiht.

Das Tolle an diesem Projekt ist, dass Sie ein Gefühl dafür bekommen, wie es ist, eine benutzerfreundliche, reaktionsschnelle App von Grund auf neu zu erstellen. Sie lernen alles von der Installation von Node.js und Angular CLI bis zum Testen Ihres Codes mit LightHouse.

Und obwohl der Ersteller des Tutorials offensichtlich seine eigenen Designvorlieben eingefügt hat, können Sie Ihr eigenes Styling hinzufügen und so kreativ sein, wie Sie möchten. Sie können mit dem CSS-Stil und den Animationen herumspielen und sogar Ihr eigenes Logo, Symbole und andere Designmaterialien verwenden.

Wenn Sie dies richtig machen, haben Sie eine beeindruckende Wetter-App in Ihrem Portfolio.

Hier können Sie auf das Tutorial zugreifen.

Obwohl dieses Tutorial für Anfänger geeignet ist, benötigen Sie dennoch ein wenig Angular-Vertrautheit. Wenn Sie Angular lernen möchten, ist Angular.io der beste Ausgangspunkt.

Entwerfen und codieren Sie Ihre eigene Portfolio-Website.

In einem typischen Projekt arbeiten Sie höchstwahrscheinlich mit einem Webdesigner zusammen, der das Aussehen der Website bestimmt.

Obwohl Design und Entwicklung wohl zwei verschiedene Bereiche sind, erweitert das Erlernen des Webdesigns nicht nur Ihr Arsenal um weitere Fähigkeiten, sondern bietet Ihnen auch die Möglichkeit, als Freiberufler allein zu arbeiten und an Projekten vom Design bis zur Bereitstellung zu arbeiten.

Durch das Entwerfen und Codieren Ihrer eigenen Portfolio-Website können Sie Ihre künstlerische und technische Seite gleichzeitig präsentieren.

Der erste Schritt besteht darin, an Ihre Botschaft oder Ihr Branding zu denken . Was sind Ihre Kerndienste, wen möchten Sie bedienen und warum sollten sie Sie auswählen? (Lesen Sie hier mehr über Branding.)

Zweitens muss ein Musterdesign erstellt werden , das das Layout, die Farben und die Typografie detailliert beschreibt.

Denken Sie auch an ein Thema. Ist es minimalistisch oder laut und funky? Ist es monochrom oder werden kräftige Farben verwendet? Erstellen Sie dann eine Liste der benötigten Seiten. Dies umfasst häufig eine Kontaktseite, einige Blog-Beiträge, eine Seite über mich und eine Seite mit allgemeinen Geschäftsbedingungen.

Drittens codieren Sie es ! Verwenden Sie modernes CSS, um die Site zu gestalten, einige Animationen hinzuzufügen, qualitativ hochwertige Bilder hinzuzufügen usw. Der Himmel ist hier die Grenze - Sie können mit Ihrer Portfolio-Website alles tun, was Sie wollen, weil es Ihnen gehört - machen Sie es!

Wo kann ich Front-End-Entwicklung üben?

Obwohl der beste Weg, um die Front-End-Entwicklung zu üben, darin besteht, echte Apps und Anzeigenwebsites selbst zu erstellen, ist es immer noch großartig, eine Anlaufstelle zu haben, um Tipps zu erhalten, auf Tutorials zuzugreifen und Unterstützung zu erhalten, wenn Sie nicht weiterkommen oder eine Meinung zu etwas benötigen.

Dies sind großartige Orte, um Hilfe zu erhalten, während Sie die Front-End-Entwicklung üben:

  1. freeCodeCamp.org - Dies ist eine Website mit kostenlosen Tutorials zu Theorie, Sprachen und Best Practices der Webentwicklung. Es gibt hier auch eine großartige Community, die Ihnen bei Ihren Fragen helfen kann.
  2. Modernes HTML & CSS von Anfang an - Dies ist ein Udemy-Kurs von Brad Traversy. Es enthält viele nützliche Informationen und kann Ihnen wirklich alles beibringen, was Sie brauchen, um mit diesen Sprachen zu beginnen.
  3. Front Amendmentor.io - Hier finden Sie mundgerechte kostenlose und erstklassige „Herausforderungen“, die Sie in Ihrer Freizeit zur Entwicklung Ihrer Fähigkeiten nutzen können. Die Schwierigkeit der Herausforderungen reicht von „Junior“ bis „Fortgeschritten“. Hier sind Beispiele für die Herausforderungen, die Sie hier finden:

Es gibt weitere Ressourcen, die ich gerne mit Ihnen teilen würde, aber damit dies nicht zu lang wird, können Sie diesen Link überprüfen, um meine vollständige Liste der empfohlenen Kurse anzuzeigen.

Das sind 5 lustige Front-End-Entwicklungsprojekte, die Sie heute ausprobieren können. Auch diese sind als Ausgangspunkte gedacht. Letztendlich liegt es an Ihnen, es anzupassen, um ein wenig von Ihrer persönlichen Note hinzuzufügen :)

Denken Sie daran, es geht nur um Übung. Sie MÜSSEN Dinge bauen, um Ihre Fähigkeiten zu verbessern.

Lerne nicht nur durch Zuschauen.

Lernen Sie durch Bauen.

Lerne beim machen.

- Kyle Prinsloo (@study_web_dev), 24. Juni 2020

Viel Spaß beim Codieren!

Danke fürs Lesen und Prost fürs Erste,

Kyle

Folgen Sie mir auf Twitter für weitere Tipps.