In diesem Tutorial baust du Schritt für Schritt deine erste echte Web App mit HTML, CSS und JavaScript — ohne Vorkenntnisse, ohne Framework. Du richtest deine Entwicklungsumgebung ein, programmierst eine interaktive Anwendung und bringst sie am Ende live ins Netz. Alles, was du brauchst, ist ein Computer und zwei kostenlose Tools.
Einrichtung: VS Code, Live Server und dein Projektordner
Bevor du anfängst, brauchst du zwei Tools: Visual Studio Code als Editor und Git für das spätere Deployment. Beides ist kostenlos.
In VS Code gibt es eine Extension namens Live Server, die du dir im Marketplace installieren solltest. Sie sorgt für Hot Reloading. Das bedeutet: Sobald du eine Datei speicherst, aktualisiert sich der Browser automatisch. Kein manuelles Neu-Laden mehr. Für Anfänger ein echter Zeitgewinn.
Erstelle dann einen neuen Ordner für das Projekt, öffne ihn in VS Code und leg eine Datei namens index.html an. Ein Ausrufezeichen gefolgt von Tab gibt dir über Emmet direkt das komplette HTML-Grundgerüst. Die Sprache auf Deutsch stellen, einen Titel vergeben, speichern. Fertig.
HTML: Die Grundstruktur deiner Web App
Die App braucht nur wenige Elemente: eine Überschrift, einen kurzen Text, ein Element für das angezeigte Wort, einen Button und eine Zeile für bereits gezogene Wörter. Das gesamte Markup sieht so aus: