Lassen Sie uns von Anfang an ehrlich sein. Egal, wie viele Bücher über Programmierung Sie lesen, Videos Sie sich ansehen oder Podcasts Sie hören, wenn Sie ein besserer Entwickler werden wollen, müssen Sie kontinuierlich üben.
Im Frontend-Bereich gibt es eine Menge Frameworks: React, Angular, Vue, um nur ein paar zu nennen. Jedes einzelne von ihnen ist großartig und ohne sie wäre die Frontend-Entwicklung nicht in ihrem heutigen Zustand. Aber was diese Frameworks, neben all ihren Unterschieden, gemeinsam haben, ist, dass sie alle auf JavaScript basieren. Jepp, das gute alte JS!
JavaScript ist das, was das Web heute betreibt, kein Zweifel. Und für jeden Frontend-Entwickler, egal ob bereits erfahren oder am Anfang seiner Karriere, ist es Pflicht, die Grundlagen von JavaScript, HTML und CSS zu kennen.
Frameworks kommen und gehen, aber JavaScript wird bleiben! Aber wie kann man JavaScript am besten üben? Die beste Antwort, die ich Ihnen geben kann, ist, Projekte zu bauen!
JavaScript-Projekte
JavaScript-Projekte sind angeleitete Tutorials oder JavaScript-Projektideen, die Ihnen helfen, Ihre Fähigkeiten zu schärfen, indem Sie echte Anwendungen, Webseiten, Spiele, Komponenten usw. bauen. Manchmal werden Sie Projektideen finden, die nur einen Titel und ein paar Sätze darüber enthalten, was Sie bauen sollen.
Beispiel: Baue einen Zähler mit JavaScript, der die Stunden bis zum Jahresende herunterzählt.
Dieses Format ist gut, wenn Sie bereits etwas Erfahrung haben und nur etwas Input suchen.
JavaScript-Projekte für Anfänger
Wenn Sie jedoch neu in der Webentwicklung sind, ist es oft besser, wenn Sie nach JavaScript-Projektbeispielen mit Quellcode oder speziellen JavaScript-Projekten für Anfänger suchen. Diese enthalten oft eine laufende Demo-Anwendung, ein GitHub-Repository mit dem Quellcode und eine Schritt-für-Schritt-Anleitung zur Erstellung des Projekts.
JavaScript-Praxisprojekte
Damit Sie Übung bekommen, habe ich neun tolle JavaScript-Projektideen aufgelistet, mit denen Sie Ihre Fähigkeiten auffrischen und neue Dinge über JS lernen können, um auch in Zukunft relevant zu bleiben. Alle von ihnen basieren auf reinem JavaScript, etwas HTML und etwas CSS. Sie können sie zu Ihrem Portfolio hinzufügen, sie Recruitern oder potentiellen Arbeitgebern zeigen oder sie in Ihrem GitHub als Referenzen für zukünftige Arbeiten aufbewahren. Um es klar zu sagen: Dies ist nicht dazu gedacht, Ihnen alles über JavaScript beizubringen. Es gibt perfekte Kurse für Sie, die JS von A-Z abdecken. Hier geht es darum, Dinge zu bauen. Um sich die Hände schmutzig zu machen. Arbeiten Sie an Ihrem Muskelgedächtnis.
JavaScript-Projekte im Überblick
- Erstelle ein JavaScript-Projekt für eine Meditations-App
- Erstelle ein JavaScript-Projekt für eine virtuelle Tastatur
- Erstelle ein JavaScript-Projekt für einen eCommerce-Warenkorb
- Erstelle ein JavaScript-Projekt für eine Wetter-App
- Ein Issue-Tracker-JavaScript-Projekt erstellen
- Ein PIN-Pad-JavaScript-Projekt erstellen
- Ein Landing-Page-JavaScript-Projekt erstellen
- Ein Rock-Paper-Scissors-Spiel-JavaScript-Projekt erstellen
- Ein Tic-Tac-Toe-Spiel-JavaScript-Projekt erstellen
- Bonus: Build 9-in-1 Mini JavaScript Projects
- Bonus: JavaScript Beginner Project Ideas
- Bonus: JavaScript Intermediate Project Ideas
- Bonus: JavaScript Advanced Project Ideas
Um Ihnen einen Vorsprung zu geben, habe ich diese Tutorial-Projekte für Sie bewertet. Aber das ist nur meine Meinung, deshalb empfehle ich Ihnen dringend, sie selbst auszuprobieren, denn Sie wissen, wie Sie am besten lernen und auf welchem Level Sie sich gerade befinden.
Baue eine Meditations-App
Was Sie bauen werden
Sie werden eine Anwendung bauen, die Umgebungsgeräusche für die Meditation bereitstellt. Der Benutzer kann zwischen verschiedenen Timern und Sounds wählen.
Bewertung
Dieses Tutorial nutzt Vanilla JavaScript, genau das, was wir anstreben. Die Stimme des Trainers sowie seine Anweisungen sind klar und gut zu verstehen. Außerdem lernt man, wie man Ton und Video mit JS manipulieren kann. Dies ist ein lustiges Javascript-Projekt, das mir wirklich Spaß macht.
5/5 Sterne
Baue eine virtuelle Tastatur
Was Sie bauen werden
Sie werden eine virtuelle Tastatur von Grund auf mit Vanilla JS, HTML und CSS bauen, die im Browser verwendet werden kann und responsive und touch-ready sein wird!
Bewertung
Ich mag die Originalität dieses Projekts, es ist eine tolle Javascript-Projektidee. Ich habe noch nie eine virtuelle Tastatur erstellt, daher war es für mich eine tolle Erfahrung, dies nur mit JavaScript, HTML und CSS zu machen. Die Stimme des Kursleiters ist klar und er erklärt die Dinge ziemlich gut.
5/5 Sterne
Build an eCommerce Shopping Cart
Was Sie bauen werden
Sie werden einen Warenkorb bauen, der auf Online-Shops und eCommerce-Seiten mit Vanilla JS, HTML und CSS verwendet werden kann. Der Kursleiter verwendet Contentful, ein Headless-CMS für die Speicherung von Produktdaten. Zu lernen, wie man mit Contentful oder einem Headless CMS im Allgemeinen umgeht, ist nicht der primäre Fokus dieses Beitrags, aber es ist ein großartiger Dienst, so dass Sie es nicht bereuen werden, ihn in Aktion zu sehen.
Bewertung
Die Aufzeichnung dieses Tutorials ist wirklich lang. Das ist einerseits beeindruckend, andererseits aber auch ein bisschen mühsam. Die Stimme des Dozenten ist klar und gut zu verstehen. Es ist manchmal etwas schwierig, ihm zu folgen, aber das liegt wahrscheinlich an der Komplexität dieses Projekts. Es handelt sich also eher um ein Js-Projekt für Fortgeschrittene.
4/5 Sterne
Baue eine Wetter-App
Was du bauen wirst
In diesem Projekt lernst du, wie du eine Wetter-Applikation mit Vanilla JS, HTML und CSS bauen kannst. Der Kursleiter verwendet die Dark Sky API zum Abrufen von Wetterinformationen, was eine großartige Gelegenheit für Sie ist, zu lernen, wie man mit APIs interagiert, eine weitere großartige Sache, die man mit Javascript machen kann.
Bewertung
Dies könnte gut in Ihr Portfolio passen. Wenn Sie bereits Projekt 1. gemacht haben, kennen Sie den Dozenten bereits, und ich kann Ihnen sagen, dass er wieder hohe Qualität liefert. Es scheint so, als ob er wirklich weiß, wie man auf eine verständliche und unterhaltsame Art und Weise unterrichtet.
5/5 Sterne
Build an Issue Tracker
Was Sie bauen werden
In diesem Tutorial werden Sie einen Issue Tracker bauen, der auf jeder Website für die Erstellung von Issues (z.B. bei Softwareprodukten) mit Vanilla JS, HTML und CSS verwendet werden kann. Dies kann auch eine gute Ergänzung für Ihr Portfolio und ein ausgezeichnetes Javascript-Projekt für Anfänger sein!
Bewertung
Der Dozent hat ein klares Konzept von dem, was er mit Ihnen bauen will. Seine Stimme ist klar und gut zu verstehen, und dieses Projekt ist ein Javascript-Anfängerprojekt.
4/5 Sterne
Baue ein PIN-Pad
In diesem Javascript-Projekt werden Sie ein PIN-Pad bauen, das im Browser läuft und die Funktionalität hat, PIN-Codes auf ihre Korrektheit zu überprüfen. Der Kursleiter verwendet nur Vanilla JS, HTML und CSS für dieses Tutorial. Dies ist wirklich eine tolle JavaScript-Projektidee für Anfänger, also sollten Sie es auf jeden Fall ausprobieren!
Bewertung
Ich finde, es ist ein sehr kreatives Tutorial-Projekt, um zu zeigen, wozu Vanilla JavaScript fähig ist. Der Dozent macht einen guten Job, alles klar und leicht verständlich zu erklären. Dies ist ein cooles Javascript-Projekt und ich hatte eine Menge Spaß dabei.
4/5 Sterne
Build a Landing Page
Was Sie bauen werden
Brad wird Ihnen zeigen, wie man eine interaktive Landing Page baut, die die Zeit und den Namen des Benutzers anzeigt. Die Anwendung verwendet lokalen Speicher, um den Namen zu speichern, daher ist es schön, dass Sie das beobachten können.
Bewertung
Brad ist bekannt für seine vollständigen und hervorragenden Tutorials. Dieses hier ist eher kurz und ich würde sagen simpel, verwendet aber nur JavaScript, HTML und CSS und ist daher ein ausgezeichnetes JavaScript-Übungsprojekt für Anfänger.
4/5 Sterne
Baue ein Rock-Paper-Scissors-Spiel
Was du bauen wirst
Spiele zu bauen kann ein lustiger Weg sein, neue Dinge zu lernen. JavaScript bietet großartige Möglichkeiten, browserbasierte Spiele zu erstellen. In diesem Tutorial-Projekt werden Sie das klassische Stein-Schere-Papier-Spiel mit JavaScript erstellen.
Bewertung
Wie in Projekt 1. macht der Dozent auch bei diesem Tutorial einen guten Job. Er ist unterhaltsam und man kann ihm gut folgen. Und wieder basiert dieses Projekt auf Vanilla JavaScript und ist ein gutes Javascript-Projekt für Anfänger!
4/5 Sterne
Baue ein Tic Tac Toe-Spiel
Was du bauen wirst
In diesem Projekt wirst du ein Tic Tac Toe-Spiel bauen, das eine lustige, aber auch komplexe Übung ist, weil es grundlegende KI und Algorithmen verwendet. Aber abgesehen davon ist alles nur mit Vanilla JS, HTML und CSS gemacht.
Bewertung
Dieses Projekt hat einen guten Umfang, eine klare Struktur und macht Spaß zu bauen. Die Stimme des Dozenten ist klar und man kann ihm gut folgen. Die Erklärungen sind wirklich gut, und Sie sollten sich am Ende ziemlich gut fühlen.
5/5 Sterne
Bonus: Bauen Sie 9-in-1 Mini-Projekte
Was Sie bauen werden
Dies ist ein kleiner Bonus, den ich Ihnen präsentieren wollte: eine einzige Aufnahme, die neun kleine, unabhängige Javascript-Projekte enthält, an denen Sie Ihre JavaScript-, HTML- und CSS-Kenntnisse üben können. Vielleicht können Sie einige dieser Snippets für Ihre eigene Website verwenden?
Bewertung
Ich mag die Idee, mehrere kleine Snippets in einer Aufnahme zu haben. Die Stimme des Dozenten könnte klarer sein, und manchmal ist es etwas schwierig, ihm zu folgen.
3/5 Sterne
Mehr Ideen für JavaScript-Projekte
Dies sind ohne Zweifel einige großartige Projekte zum Mitmachen. Wenn Sie etwas auf eigene Faust erstellen wollen, ohne einem Schritt-für-Schritt-Tutorial zu folgen, habe ich noch ein paar weitere Ideen für JavaScript-Projekte, die Sie bauen können:
JavaScript-Einsteigerprojekte
-
Datenbank-App mit JavaScript
Aufgabe: Erstellen Sie eine einfache App, die die IndexedDB moderner Browser zum Speichern von Daten nutzt. -
JSON zu CSV Konverter mit JavaScript
Aufgabe: Erstellen Sie eine einfache App, in der Benutzer entweder einen JSON-String einfügen oder eine JSON-Datei hochladen können. Die App soll die Eingabe in CSV umwandeln und dem Benutzer anzeigen. -
Countdown Timer mit JavaScript
Aufgabe: Erstellen Sie eine einfache Funktion, bei der Benutzer eine Anzahl von Sekunden eingeben können und die Funktion einen Countdown startet. -
Quiz-App mit JavaScript
Aufgabe: Erstellen Sie eine einfache Quiz-App, bei der Benutzer Kästchen für die richtigen Lösungen ankreuzen können. -
Stoppuhr-App mit JavaScript
Aufgabe: Erstellen Sie eine einfache Stoppuhr-Funktion, bei der Benutzer einen Timer starten und stoppen können. -
Notizen-App mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Notizen machen und verwalten können. -
Dollars to Cents Converter mit JavaScript
Aufgabe: Benutzer sollen eine Anzahl von Dollars eingeben können und die App präsentiert ihnen den Wert in Cents. -
Pomodoro-Uhr mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Arbeits-Timer (25min), Pausen-Timer (5min) und Funktionen zum Starten/Stoppen/Rücksetzen dieser Timer erstellen können. -
Rezept-App mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Rezepte für verschiedene Kategorien finden können. Bonus: Integrieren Sie eine Rezept-API. -
Lorem Ipsum Generator mit JavaScript
Aufgabe: Erstellen Sie eine App oder Komponente, die Lorem-Ipsum-Text in der vom Benutzer gewünschten Länge generiert.
JavaScript-Zwischenprojekte
-
Währungsumrechner mit JavaScript
Aufgabe: Bauen Sie eine App, um eine Währung in eine andere umzurechnen. -
Zeichen-App mit JavaScript
Aufgabe: Benutzer sollen einfache Formen und Bilder in ihrem Browserfenster zeichnen können. -
Emoji-App mit JavaScript
Aufgabe: Bauen Sie eine App, in der Benutzer nach Emojis suchen und diese in die Zwischenablage kopieren können. -
Meme Generator mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Bilder hochladen, mit Text versehen und & speichern können. -
Passwortgenerator mit JavaScript
Aufgabe: Benutzer sollen zufällige Passwörter mit verschiedenen Regelsätzen wie Länge, Schwierigkeit, Zeichen usw. erstellen können. -
Bildscanner mit JavaScript
Aufgabe: Erstellen Sie eine App, die Metadaten von hochgeladenen Bildern liest und visualisiert. -
To-Do-App mit JavaScript
Aufgabe: Erstellen Sie eine App zur Verwaltung von To-Dos. -
Abstimmungs-App mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Umfragen erstellen können, über die andere abstimmen können. -
Flashcards App mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Flashcards für andere erstellen können, um neue Dinge zu lernen. -
Book Finder App mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer nach Büchern mit verschiedenen Kriterien wie Autor, Jahr, Inhalt, Empfehlungen etc. suchen können. Bonus: Integrieren Sie eine Bücher-API.
JavaScript Advanced Projects
-
Film-App mit JavaScript
Aufgabe: Benutzer sollen in Filmen stöbern können, Bewertungen sehen, Schauspieler finden, Empfehlungen bekommen. Bonus: Integrieren Sie eine Film-API. -
Umfrage-App mit JavaScript
Aufgabe: Benutzer sollen Umfragen für andere erstellen können, die dann daran teilnehmen können. -
Chat App mit JavaScript
Aufgabe: Nutzer sollen in Echtzeit miteinander chatten können. -
Instagram-Klon mit JavaScript
Aufgabe: Die Nutzer sollen ähnliche Funktionen wie bei Instagram nutzen können. Zum Beispiel Bild-Upload, Tagging, Likes, etc. -
Twitter Clone mit JavaScript
Aufgabe: Die Nutzer sollen ähnliche Funktionen wie bei Twitter erleben können. Zum Beispiel Bild-Upload, Tagging, Likes, etc. -
Pinterest Clone mit JavaScript
Aufgabe: Nutzer sollen ähnliche Funktionen erleben können, wie sie Pinterest hat. Zum Beispiel Bild-Upload, Sammlungen, Likes, etc. -
Stock-Trading App mit JavaScript
Aufgabe: Nutzer sollen Charts beobachten und Aktien kaufen können (kann natürlich auch simuliert werden). Bonus: Integrieren Sie eine Aktien-API. -
Analytics App mit JavaScript
Aufgabe: Erstellen Sie eine App, mit der Sie das Nutzerverhalten auf einer Website verfolgen können, z. B. Besuche, Absprungrate usw. -
Video-App mit JavaScript
Aufgabe: Erstellen Sie eine App, in der Benutzer Videos hochladen und ansehen können. -
File Sharing App mit JavaScript
Aufgabe: Der Benutzer soll Dateien mit oder ohne Registrierung hochladen können.
Eine gute Idee wäre, dass Sie das Projekt dokumentieren und mit der Community teilen!
Alles klar, das war’s für den Moment. Und ich bin mir ziemlich sicher, dass Sie es kaum erwarten können, mit diesen tollen Tutorials loszulegen. Aber lassen Sie mich Ihnen noch eine Sache sagen. Die Videos anzuschauen und mitzucodieren ist ein guter Weg, um Dinge zu lernen und Übung zu bekommen. Allerdings haben Sie am meisten davon, wenn Sie den Projekten Ihre eigene Note geben – sie erweitern, verändern, kombinieren, verbessern. Oder noch besser: Machen Sie Ihr eigenes Projekt und dokumentieren Sie die Entstehung. Sie werden viel lernen und andere werden Ihnen dafür dankbar sein!
Wenn Ihnen gefällt, was ich schreibe und Sie mich und meine Arbeit unterstützen wollen, folgen Sie mir bitte auf Twitter, um mehr über das Programmieren, Basteln, Schreiben & careers🥰