Wie man von der Kenntnis der Grundlagen von JavaScript zur tatsächlichen Erstellung von Websites übergeht

Foto von Stanley Dai auf Unsplash

Als ich anfing, JavaScript zu lernen, wollte ich so schnell wie möglich mit dem Erstellen von Projekten beginnen.

Das Lernen, wie man eine Funktion schreibt, führte jedoch nicht genau zu "Make a rad website!"

Ab einem bestimmten Punkt waren das Anschauen von Tutorials und das Durchlaufen von Übungen nicht mehr gut genug.

Ich musste den Sprung wagen. Kein Händchenhalten mehr. Ich musste anfangen, Dinge selbst zu bauen.

Ich wollte einfach anfangen.

Konventioneller Rat lautet: "Bauen Sie Dinge, die für Sie nützlich sind."

Die Navigationsleiste in meinem Portfolio reagiert immer noch nicht auf Mobilgeräte. Das zu reparieren ist definitiv nützlich für mich.

Ich habe mir den Code von Navigationsleisten auf anderen Websites angesehen. Ich könnte es einfach umschreiben, damit es auf meiner Website funktioniert. Das wäre einfach!

Als ich mir den Quellcode für mobile Navigationsleisten ansah, war ich völlig verloren. Es gab mehrere JavaScript-Dateien mit jeweils 600 bis 800 Zeilen. Ich habe nichts verstanden, nicht einmal die Kommentare.

Ich hatte das Gefühl, nicht mehr bereit zu sein, Dinge zu bauen. Ich musste zu den Tutorials zurückkehren. Vielleicht würde ich nächsten Monat noch einmal versuchen, etwas zu bauen ...

Ich erzählte einer Freundin in einem Slack-Chat davon und sie sagte, sie solle etwas Kleines bauen, wie eine Diashow.

Die Tatsache, dass ich etwas so Kleines wie eine Komponente auf einer Website bauen konnte, hat mich umgehauen.

Ich musste nicht mit Aufgabenlisten, Navigationsleisten oder Movie Trackern beginnen.

Ich könnte mit den kleinstmöglichen Dingen beginnen, an die ich denken könnte.

Ich könnte sogar eine winzige App erstellen, die nur "Hallo [Name]!"

Dies war das erste Projekt, das ich jemals gebaut habe.

Es hat Stunden gedauert, bis ich es gebaut habe, aber irgendwann hat es funktioniert. Ich könnte eine Eingabe vom Benutzer entgegennehmen und "Hallo [ihr Name]!" Anzeigen.

Das ist es. Ich habe mein erstes Projekt erstellt.

Innerhalb weniger Tage war ich zu weitaus größeren Projekten wie einer Aufgabenliste und einem Farbspiel übergegangen.

Jetzt lerne ich verrückte Dinge wie Entwurfsmuster, Array-Methoden und objektorientierte Programmierung.

All dies wäre nicht möglich gewesen, wenn ich nicht den Sprung gewagt und meine erste App erstellt hätte.

Projektideen zur Überbrückung der Lücke

Wenn Sie Probleme haben, das Ihnen bereits bekannte JavaScript anzuwenden, ist die Lösung ganz einfach: Erstellen Sie das kleinstmögliche, was Sie sich vorstellen können.

Dann mach die nächste App ein bisschen größer. Dann mache noch einen und noch einen und erhöhe die Schwierigkeit weiter.

Bevor Sie es wissen, erstellen Sie Websites, die Sie Freunden und Verwandten präsentieren können.

Brauchen Sie Ideen, wo Sie anfangen sollen?

Im Folgenden sind 6 Projekte aufgeführt, mit denen Sie von nichts zu Ihrer ersten Aufgabenliste gelangen:

1. Hallo Name!

Erstellen Sie eine kleine App, die eine Eingabe von einem Benutzer entgegennimmt und an ihn zurückdruckt.

Bedarf:

  1. Es sollte den Benutzer fragen, wie er mit einem Eingabeelement heißt.
  2. Es sollte eine Schaltfläche vorhanden sein, die die Ausgabe auslöst.
  3. Die Ausgabe sollte "Hallo NAME!"

2. Telefonpreisrechner

Dieses Projekt stammt aus der Übung in Sie kennen JS nicht: Up & Going.

Sie wissen nicht, dass JS eine kostenlose Buchreihe ist. Lesen Sie das erste Kapitel und beenden Sie die Übung am Ende.

Die zusätzliche Herausforderung besteht darin, es aus der Konsole herauszunehmen. Machen Sie es zu einer App, die auf Benutzereingaben und Schaltflächen reagiert.

3. Glücksspiel

Erstelle ein kleines Spiel, bei dem der Gewinner danach ermittelt wird, ob er den Kopf oder den Schwanz gewendet hat. Diese Ergebnisse sollten jedes Mal zufällig sein!

Bedarf:

  1. Es sollte einen Knopf haben, um die Münze zu werfen.
  2. Es sollte die Ergebnisse der Umkehrung mit den Ergebnissen der Umkehrung des Computers vergleichen.
  3. Es sollte ein "SIE GEWONNEN!" Oder "SIE VERLOREN!"
  4. Die Farbe des Texts sollte sich ändern, je nachdem, ob der Benutzer gewonnen oder verloren hat.

4. Karussell / Diashow

Erstellen Sie ein manuelles Karussell, das das bei jedem Tastendruck angezeigte Bild ändert. Ähnlich wie dies.

Bedarf:

  1. Es sollte eine Links- und eine Rechts-Taste geben, die durch vorhandene Bilder blättert.
  2. Je nachdem, welche Tasten gedrückt werden, sollte das entsprechende Bild angezeigt werden.
  3. Die linken und rechten Tasten sollten sich dynamisch an mindestens 4 Bilder anpassen.

5. Countdown-Timer

Erstellen Sie einen Countdown-Timer, der bis zu Ihrem nächsten Geburtstag zählt. Ähnlich wie dies.

Bedarf:

  1. Legen Sie ein Enddatum fest.
  2. Berechnen Sie die Zeit zwischen jetzt und damals.
  3. Zeigen Sie die Uhr an.
  4. Stoppen Sie die Uhr und zeigen Sie eine Meldung an, sobald sie 0 erreicht.

6. Aufgabenliste

Verrückt werden! Sie haben es geschafft, an den winzigen Apps vorbei zu kommen. Sie können jetzt Ihre eigenen Projekte erstellen.

Erstellen Sie eine einfache Aufgabenliste und lassen Sie sie nach Belieben funktionieren.

Egal, ob Sie tausend Schaltflächen oder nur eine möchten, dies ist IHRE Aufgabenliste.

Einige Tipps für Bauprojekte

1. Was ist, wenn ich diese nicht bauen möchte?

Diese Liste existiert nur als Richtlinie. Es gibt keine Regeln darüber, was das "richtige" zu bauen ist. Bauen Sie, was Sie wollen!

Es gibt hundert Alternativen. Sie können Akkordeons, Quiz oder einfach alles machen, was Sie sich ausdenken können.

Das Ziel ist nur, genug Selbstvertrauen aufzubauen und genug Übung zu bekommen, um größere und bessere Projekte anzugehen.

2. Soll ich mir Sorgen um das Styling machen?

Nein. Sie müssen nur lernen, wie JavaScript mit HTML / CSS funktioniert.

Machen Sie sich keine Sorgen, wenn Sie eine dieser Apps hübsch machen, bis Sie an der Aufgabenliste arbeiten.

3. Was ist, wenn ich nicht weiß, wie das DOM funktioniert?

Wenn Sie Videos mögen, empfehle ich The Web Developer Bootcamp. Es wird normalerweise für 12 bis 15 US-Dollar angeboten.

Wenn Sie Artikel bevorzugen, gibt es eine Vielzahl von Ressourcen, mit denen Sie loslegen können.

4. Wenn ich den leeren Editor sehe, flippe ich aus!

Wenn Sie noch nie gesehen haben, wie ein Projekt erstellt wird, können Sie sich schwer vorstellen, was Sie tun sollen.

Ich kann Watch & Code nur empfehlen. Es ist ein kostenloser Kurs, der Sie durch die Erstellung einer Aufgabenliste führt. Gordon versteht wirklich, wie Neulinge denken.

5. Was mache ich, wenn ich nicht weiterkomme?

Google ist dein Freund!

Die vertrauenswürdigste Ressource für JavaScript ist das Mozilla Development Network. Sie können auch StackOverflow überprüfen, um festzustellen, ob bereits jemand auf dasselbe Problem gestoßen ist.

Fazit

Danke fürs Lesen! Wenn dies geholfen hat, geben Sie es bitte ein oder zwei Klatschen.

Wenn Sie Fragen haben, hinterlassen Sie unten einen Kommentar oder schreiben Sie mir eine E-Mail.

Wenn Ihnen dieser Beitrag gefallen hat, folgen Sie mir auf Twitter, um mehr über JS zu erfahren.