Todo-Tutorials können Spaß machen - aber hier erfahren Sie, wie Sie Ihre eigenen Projekte von Grund auf neu erstellen

Es gibt viele großartige Tutorials, die Sie durch die Erstellung von Apps führen, von einfachen Aufgabenlisten bis hin zu voll funktionsfähigen Web-Apps. Aber wie starten Sie Ihre eigenen Projekte von Grund auf neu? Ohne das Sicherheitsnetz eines Tutorials fühlen Sie sich möglicherweise etwas verloren, was Sie bauen oder wie Sie anfangen sollen.

Dies sind die Schritte, die ich befolgt habe, um meine eigenen Projekte zu erstellen, als ich noch ein Junior-Entwickler war - und die mich mit den Fähigkeiten ausgestattet haben, die ich brauchte, um ein Software-Teamleiter zu werden. Aber zuerst…

Warum meine eigenen Projekte erstellen, wenn ich Tutorials folgen kann?

Gute Frage, neugieriger Leser! Tutorials sind bis zu einem gewissen Punkt großartig, aber das Erstellen eigener Projekte bietet sooo viele andere Vorteile:

Das bringt dich zum Nachdenken

Wenn Sie sich hinsetzen und ein eigenes Projekt starten, gibt es viele Dinge, über die Sie nachdenken müssen.

  • Wie fange ich an?
  • Wie wird es aussehen?
  • Welche Technologien brauche ich?

Und andere Sachen wie diese (wir werden gleich darüber sprechen, wie man anfängt). Genau das beinhaltet Ihre Aufgabe als Entwickler - eine Lösung zu entwerfen und bis zum Ende durchzuhalten. Wenn Sie Ihre eigenen Projekte erstellen, können Sie diese Fähigkeiten üben und sich auf den Beginn Ihrer Karriere vorbereiten.

Sie werden auf Probleme stoßen, von denen Sie nie wussten, dass sie existieren

Wenn Sie einem Tutorial folgen, sind Sie häufig dem glücklichen Pfad ausgesetzt - was im Grunde genommen so ist;

„OK, wir bauen etwas, hier sind die Schritte, um das Ding zum Laufen zu bringen, es funktioniert! Hurra! Das Ende"

Was großartig ist, wenn Sie eine neue Technologie lernen - und es wäre ein ziemlich schreckliches Tutorial, wenn das, was Sie bauen, am Ende nicht funktioniert hätte.

Leider ist das Leben von Webentwicklern nicht so einfach. Wenn Sie Code schreiben, werden Sie irgendwann auf Probleme stoßen. Schlicht und einfach.

Wenn Sie Ihre eigenen Projekte erstellen, werden Sie auf natürliche Weise auf Probleme stoßen und üben, diese zu überwinden. Das, was Entwickler jeden Tag tun und üben, wird dies viel einfacher machen.

Es macht Spaß und Sie werden immer etwas lernen

Wir sind ein Glückspilz, wir Entwickler. Wir können uns an einen Laptop setzen und mit jeder Technologie bauen, was wir wollen. Wir können es auch mehr oder weniger kostenlos machen. Ich bezweifle, dass Bill, der Luft- und Raumfahrtingenieur, eine gute Antwort von seinem Chef erhalten würde, wenn er fragte: "Diese Boeing 747 für das Wochenende auszuleihen, weil er ein neues Triebwerk ausprobieren möchte, das er zu Hause hergestellt hat."

Es macht Spaß, eigene Projekte zu erstellen. Etwas, das Sie verwenden, Freunden und Familie zeigen oder von dem Sie lernen können. Und es ist ein ziemlich sicheres Hobby. Es könnte funktionieren, es könnte nicht. Es könnte dir gefallen, du könntest das Ganze vermasseln. Aber es ist keine große Sache, werfen Sie einfach die Projektdateien in den virtuellen Papierkorb und beginnen Sie erneut. Einfach!

Auf zu den guten Sachen…

OK! Jetzt freuen wir uns, dass das Erstellen eigener Projekte eine großartige Möglichkeit ist, zu lernen und Spaß zu haben. Schauen wir uns an, wie Sie Ihre eigenen Projekte erstellen können.

Erweitern Sie Ihre Tutorial-Projekte

Es ist einschüchternd, eine brandneue Arbeit zu beginnen. Sie setzen sich zu einer neuen Datei und denken: "Was mache ich zuerst?" Der schönere Weg, um eigene Projekte zu erstellen, besteht darin, auf Ihren vorhandenen Tutorial-Apps und Codierungsübungen aufzubauen. Dies gibt Ihnen einen kleinen Vorsprung, anstatt von einer leeren Tafel auszugehen.

Wenn Sie also ein Tutorial für eine ToDo-App abgeschlossen haben (wenn nicht, wo waren Sie?!), Können Sie darauf aufbauen, wie Sie möchten. Zum Beispiel könnten Sie:

  • Ermöglichen Sie das Speichern der Aufgabenliste (in einer Datenbank, localStorage usw.), damit der Benutzer sie später erneut aufrufen kann
  • Geben Sie dem Benutzer einige Anpassungsoptionen (ändern Sie die Farbe der Aufgabenelemente).
  • Login-Fähigkeit hinzufügen

Sie haben die Idee - verwenden Sie im Grunde Ihre Fantasie! Die Möglichkeiten sind endlos, also werfen Sie Vorsicht in den Wind und bauen Sie, worauf Sie Lust haben!

Baue Sachen, die du benutzen wirst

Jeder hat seine eigenen Ideen für eine Web-App. Nutzen Sie Ihre neu gewonnenen Webentwicklungsfähigkeiten, um Ihre eigenen zu erstellen! Schreiben Sie einige Ideen für eine App auf, die Sie im Laufe der Jahre hatten, insbesondere diejenigen , die Sie tatsächlich verwenden würden. Es muss keine übermäßig komplexe App sein und kann so einfach wie eine Aufgabenliste sein.

Wenn Sie eine App erstellen, die Sie verwenden, bleiben Sie interessiert genug, um das Projekt bis zum Abschluss durchzuhalten. Wenn Sie die App verwenden, sobald sie fertig ist, werden Sie natürlich Möglichkeiten finden, sie zu verbessern, wodurch Sie ein weiteres Projekt abschließen können - und der Kreis des (Codierungs-) Lebens wiederholt sich!

Ein anderer ähnlicher Ansatz besteht darin, eine beliebte App zu replizieren, die Sie verwenden. Sie müssen nicht auf die gleiche Detailebene wie die zu replizierende App gehen, sondern prüfen, ob Sie die grundlegenden Funktionen zum Laufen bringen können. Zum Beispiel:

  • Verwenden Sie die GitHub-API, um Ihr eigenes GitHub-Dashboard zu erstellen
  • Verwenden Sie die Twitter-API und erstellen Sie Ihren eigenen Twitter-Feed
  • Eine Web-App, mit der Sie Ihr Budget verwalten können

Fangen Sie klein an

Ein sicherer Weg, um beim Starten eigener Projekte überfordert zu werden, besteht darin, alles daran zu setzen, massive Projekte zu erstellen. Während der Ehrgeiz gut ist, werden Sie möglicherweise stecken bleiben und frustriert über Ihre Fortschritte sein.

Fangen Sie klein für Ihre ersten Projekte an. Anstatt einen vollwertigen wissenschaftlichen Taschenrechner zu erstellen, erstellen Sie einen einfachen, der beispielsweise einfache Additionen und Subtraktionen ausführt. Wenn Sie sich dann wohler fühlen, fügen Sie neue Funktionen hinzu. Bevor Sie es wissen, hat sich Ihr kleines Projekt in eine vollwertige App verwandelt.

Dies gibt Ihnen auch den zusätzlichen Vorteil, zu üben, wie Software in der realen Welt erstellt wird. Kleine Funktionen werden häufig schrittweise entwickelt, getestet und bereitgestellt. Dies wird normalerweise als Agile Development bezeichnet (neugierig auf freeCodeCamp.org)für weitere Infos dazu).

Haben Sie ein Ziel vor Augen

Es gibt ein beliebtes Zitat von Leonardo da Vinci:

Kunst ist nie fertig, nur verlassen.

Gleiches gilt für Software. Sobald Sie Ihr eigenes Projekt gestartet haben, kann es oft schwierig sein zu wissen, wann Sie weitermachen und wann Sie anhalten und mit dem nächsten fortfahren müssen. Wenn Sie mit einem Ziel beginnen, gibt es Ihnen etwas, auf das Sie zielen können, anstatt das Gefühl zu haben, dass Sie ziellos durch die Wüste wandern.

Was meine ich mit einem Ziel? Ein Ziel in diesem Sinne ist im Grunde das, was Sie mit Ihrem Projekt erreichen wollen. Anstatt einfach nur ein GitHub-Dashboard zu erstellen, könnte man sagen:

"Ich werde ein Dashboard erstellen, das zeigt, wie viele Commits ich im letzten Monat für meine eigenen Repositories vorgenommen habe."

Dies gibt Ihnen eine klare Richtung, in die Sie arbeiten müssen. Sobald Sie dieses Ziel erreicht haben, können Sie weitere Funktionen hinzufügen oder zu einem anderen Projekt wechseln. Ein Ziel kann alles sein, was Sie wollen:

  • "Ich möchte lernen, wie man sauberen Code schreibt"
  • "Ich möchte CSS Grid lernen"
  • "Ich möchte eine API mit React aufrufen können."
  • "Ich möchte lernen, wie man Tests in Python schreibt"

BONUS-TIPP - Denken Sie daran, alles in Ihr eigenes GitHub-Repository zu stellen und das Ziel in der Beschreibung anzugeben (Sie sollten Projekte auch in Ihren Lebenslauf aufnehmen!). Dies zeigt den Arbeitgebern, dass Sie eine Leidenschaft für das Lernen haben, und ist auch eine gute Motivation für sich selbst, wenn Sie auf alte Projekte zurückblicken!

Beispielprojekte zum Ausprobieren

Hier sind einige Beispielprojekte, um Ihren kreativen Fluss in Gang zu bringen.

(Kurzer Hinweis: Ich werde diese Projekte selbst erstellen, zusammen mit Artikeln darüber, wie ich die einzelnen Projekte durchgeführt habe, wie / warum ich die von mir getroffenen Entscheidungen getroffen habe und über meinen allgemeinen Denkprozess. Natürlich auch über den vollständigen Code Abonniere meinen Blog, um auf dem Laufenden zu bleiben, wenn diese Artikel verfügbar sind!)

Rechner Web App

Erstellen Sie einen Taschenrechner, mit dem der Benutzer grundlegende Operationen ausführen kann: Addieren, Subtrahieren, Multiplizieren und Dividieren. Wenn Sie so weit gekommen sind, können Sie darauf aufbauen:

  • Fügen Sie weitere wissenschaftliche Berechnungen hinzu (Modul usw.)
  • Verbessere die Benutzeroberfläche (TIPP: CSS Grid wird hier dein Freund sein)
  • Erstellen Sie eine Funktion zum Rückgängigmachen (TIPP: Das Reaktions-Tutorial enthält ein gutes Beispiel dafür).

GitHub-Dashboard

Verwenden Sie die GitHub-API, um Ihr eigenes Dashboard zu erstellen. Dieses Dashboard kann beliebig sein. Ein möglicher Ausgangspunkt wäre die Anzeige von Informationen über Ihr eigenes GitHub-Konto.

  • Total Commits im letzten Monat
  • Gesamtzahl der Repositorys
  • Zeigt Ihre am häufigsten verwendete / bevorzugte Sprache an

TIPP: Obwohl dies ein clientseitiges Projekt ist, müssen Sie mit einer API interagieren. Verwenden Sie Postman oder ähnliches, um ein Gefühl dafür zu bekommen, wie die API funktioniert, wie Anforderungen authentifiziert werden und ähnliches.

Eine Quiz-App

Erstellen Sie eine Quiz-App, die dem Benutzer nach dem Zufallsprinzip eine Frage mit einer Vielzahl von Antworten anzeigt. Wenn der Benutzer die richtige Antwort erhält, zeigen Sie ein "Hurra!" Nachricht, aktualisieren Sie ihre Punktzahl, Sie bekommen die Idee. Ich mag diese App, da die Möglichkeiten, sie zu erweitern, endlos sind:

  • Kategorien hinzufügen
  • Fügen Sie Highscores hinzu
  • Fügen Sie einen Countdown hinzu
  • Erlaube mehrere Spieler (TIPP: Du könntest wirklich fortgeschritten sein und Socket.io verwenden, um Online-Spiele zu ermöglichen!)

TIPP: Denken Sie daran, am Anfang nicht über Bord zu gehen! Legen Sie Ihr Ziel für das erste Projekt fest und kommen Sie zuerst zu diesem Punkt. Prüfen Sie dann, ob Sie weitere Inhalte hinzufügen oder sich etwas anderem zuwenden möchten.

Eine Echtzeit-Wetter-App

Verwenden Sie Open Weather Map, um eine App zu erstellen, die das aktuelle Wetter für einen bestimmten Ort in Echtzeit anzeigt .

TIPP: Lassen Sie sich nicht vom Begriff Echtzeit abschrecken. Auf der einfachsten Ebene könnte dies das Schreiben einer Logik sein, die die API alle 5 Sekunden aufruft und die Daten anzeigt.

Wir alle wissen, wie Einkaufswagen funktionieren, aber können Sie einen bauen? Zeigen Sie dem Benutzer eine Liste der Produkte an und lassen Sie ihn in den Warenkorb legen. Als Ausgangspunkt können Sie Funktionen erstellen, die:

  • Lassen Sie den Benutzer einen Artikel von der Produktseite in seinen Warenkorb legen
  • Zeigt die Artikel im Warenkorb an
  • Zeigt die Gesamtkosten der Artikel im Warenkorb an

TIPP - Sie können einfach die Produkte, die auf der Produktseite angezeigt werden, als ersten Schritt fest codieren, um loszulegen.

Weitere Projekte!

Wenn Sie mehr Projekte in die Hände bekommen möchten, schauen Sie sich dieses GitHub-Repo an. Es gibt Projekte für verschiedene Ebenen, die Sie eine Weile beschäftigen werden!

Danke fürs Lesen!

Um die neuesten Anleitungen, Tipps und Kurse für Nachwuchsentwickler direkt in Ihren Posteingang zu bekommen (sowie einige exklusive Dinge!), Tragen Sie sich in die Mailingliste unter www.chrisblakely.dev ein!

Ursprünglich veröffentlicht am 7. April 2019 unter www.chrisblakely.dev.