Webseiten-Programmierung lernen: Der Vier-Wochen-Plan bis zur veröffentlichten Seite

Wer programmieren lernen will, scheitert selten an der Schwierigkeit des Stoffs, sondern am fehlenden Ende. Ohne festes Ziel wird aus dem Vorhaben eine endlose Reihe von Tutorials. Dieser Lernpfad setzt deshalb ein klar begrenztes Ziel: In vier Wochen entsteht eine eigene statische Webseite, die Sie selbst gebaut, geprüft und im Netz veröffentlicht haben. Kein Sprachvergleich, kein Baukastensystem, kein Berufsbild, sondern ein Plan mit Wochenzielen und überprüfbaren Meilensteinen.

Das Zielbild: was nach vier Wochen fertig ist

Am Ende steht eine dreiseitige Webseite über ein Thema Ihrer Wahl: eine Startseite, eine Unterseite mit Inhalten und eine Kontaktseite. Sie ist auf dem Smartphone lesbar, enthält mindestens ein Element, das auf einen Klick reagiert, und liegt unter einer erreichbaren Adresse. Genau drei Technologien reichen dafür aus. HTML beschreibt die Bedeutung und Struktur der Inhalte, CSS gestaltet deren Darstellung und JavaScript ergänzt interaktives Verhalten. Diese Arbeitsteilung stammt aus den MDN Web Docs und ist die wichtigste Ordnung, die Sie sich in Woche eins merken sollten. Alles, was Sie später an Frameworks, Sprachen oder Systemen dazulernen, sortiert sich unter diese drei Rollen.

Der Zeitrahmen geht von etwa einer Stunde pro Werktag plus einem längeren Block am Wochenende aus, also rund sieben bis neun Stunden je Woche. Wer weniger Zeit hat, streckt den Plan auf sechs oder acht Wochen, ohne die Reihenfolge zu verändern.

Werkzeuge einrichten, einmalig und knapp

Für den Einstieg genügen drei Dinge. Ein Editor: Visual Studio Code unterstützt Webentwicklung unter anderem durch Syntaxhervorhebung, Codevervollständigung und einen integrierten Debugger. Ein Browser mit Entwicklertools, also Chrome, Firefox oder Edge. Und Git, ein verteiltes Versionsverwaltungssystem, mit dem Änderungen am Quellcode nachvollzogen und Entwicklungsstände verwaltet werden können. Git wirkt in Woche eins überflüssig und ist es nicht: Es macht Fehlversuche billig, weil Sie jederzeit zu einem funktionierenden Stand zurückkehren können.

Planen Sie für das Einrichten höchstens einen Abend ein. Wenn die Installation länger dauert, arbeiten Sie vorerst ohne Git weiter und holen Sie es in Woche drei nach.

Woche 1: HTML, die Struktur

Ziel der ersten Woche ist eine Seite, die ohne jede Gestaltung inhaltlich vollständig ist. Sie lernen die Grundstruktur eines Dokuments, Überschriftenebenen, Absätze, Listen, Links, Bilder mit Alternativtext, Tabellen und Formularfelder.

Die zentrale Übung: Schreiben Sie den Text Ihrer drei Seiten zuerst als reines HTML, ohne CSS. Prüfen Sie danach, ob die Seite allein durch ihre Überschriften verständlich bleibt. Genau darauf zielen auch die WCAG, international entwickelte Empfehlungen, mit denen Webinhalte für Menschen mit Behinderungen zugänglicher gestaltet werden. Sinnvolle Überschriftenreihenfolge und aussagekräftige Alternativtexte sind der Teil davon, den Anfänger sofort umsetzen können.

Meilenstein Woche 1: Drei HTML-Dateien, die untereinander verlinkt sind und im Browser ohne Gestaltung gelesen werden können.

Woche 2: CSS, die Darstellung

In der zweiten Woche bekommt die Struktur ihr Aussehen. Themen sind Selektoren, das Box-Modell aus Innenabstand, Rahmen und Außenabstand, Farben und Schriftgrößen, Flexbox für Anordnungen sowie Media Queries für kleine Bildschirme.

Der häufigste Anfängerfehler ist, Gestaltung direkt in die HTML-Elemente zu schreiben. Legen Sie stattdessen von Anfang an eine einzige Datei style.css an und binden Sie diese in alle drei Seiten ein. Wenn eine Änderung an einer Stelle das Aussehen aller Seiten verändert, haben Sie die Trennung verstanden.

Arbeiten Sie ab jetzt dauerhaft mit den Entwicklertools des Browsers. Sie ermöglichen es, HTML und CSS zu untersuchen, JavaScript zu debuggen und Netzwerkanfragen zu analysieren. Probieren Sie Werte zuerst im Inspektor aus und übertragen Sie erst die funktionierende Variante in Ihre Datei.

Meilenstein Woche 2: Die Seite ist auf einem Bildschirm von 375 Pixeln Breite ohne horizontales Scrollen lesbar.

Woche 3: JavaScript, das Verhalten

Die dritte Woche ist die anspruchsvollste. Halten Sie den Stoff bewusst klein: Variablen, Bedingungen, Schleifen, Funktionen, Ereignisse und Zugriff auf die Seite. Der Schlüsselbegriff dahinter ist das Document Object Model. Es stellt ein HTML-Dokument als Knotenbaum dar, auf den Skripte zugreifen und den sie verändern können. Jede Interaktion, die Sie schreiben, folgt demselben Muster: ein Element im Baum finden, auf ein Ereignis reagieren, den Baum verändern.

Bauen Sie genau zwei Interaktionen, nicht mehr. Zum Beispiel ein aufklappbares Menü für kleine Bildschirme und eine Prüfung des Kontaktformulars, die auf ein leeres Pflichtfeld hinweist.

Meilenstein Woche 3: Beide Interaktionen funktionieren, und die Konsole der Entwicklertools zeigt beim Laden der Seite keine Fehlermeldung.

Woche 4: Prüfen und veröffentlichen

Die letzte Woche enthält keinen neuen Stoff. Sie prüfen und stellen online. Testen Sie jede Seite in zwei Browsern, bedienen Sie das Menü einmal ausschließlich mit der Tastatur, kontrollieren Sie jeden Link und stellen Sie sicher, dass jedes Bild einen Alternativtext hat. Legen Sie danach ein Git-Repository an und veröffentlichen Sie die Dateien über einen kostenlosen Hosting-Dienst für statische Seiten.

Meilenstein Woche 4: Die Adresse funktioniert auf einem fremden Gerät, das Sie nie für die Entwicklung benutzt haben.

Die Übungsroutine, die den Unterschied macht

Teilen Sie jede Lerneinheit in drei Teile: etwa 15 Minuten lesen oder ansehen, etwa 30 Minuten selbst schreiben, etwa 15 Minuten reparieren und aufräumen. Wichtig ist der mittlere Teil. Tippen Sie Beispielcode nicht ab, sondern verändern Sie eine Anforderung, bevor Sie ihn schreiben, etwa eine andere Farbe, ein zusätzliches Feld, eine vierte Listenposition. Erst die Abweichung zeigt, ob Sie verstanden haben.

Notieren Sie am Ende jeder Einheit in zwei Sätzen, was funktioniert hat und woran Sie hängengeblieben sind. Diese Notizen sind in Woche vier Ihre Fehlerliste.

Debugging: die vier Fragen in fester Reihenfolge

Wenn etwas nicht funktioniert, arbeiten Sie diese Reihenfolge ab, statt zu raten.

1. Zeigt die Konsole der Entwicklertools eine Fehlermeldung mit Zeilennummer? Dann beginnen Sie dort.
2. Ist die Datei überhaupt geladen? Der Netzwerk-Bereich zeigt fehlende oder falsch verlinkte Dateien sofort.
3. Sieht das Element im Inspektor so aus, wie Sie es erwarten? Wenn Ihre CSS-Regel dort durchgestrichen erscheint, wird sie von einer anderen überschrieben.
4. Kommt Ihr Code an? Eine einzelne Ausgabe mit console.log an der fraglichen Stelle beantwortet das in Sekunden.

Erst wenn alle vier Fragen beantwortet sind, lohnt die Suche im Netz. Formulieren Sie die Suchanfrage dann mit dem Wortlaut der Fehlermeldung, nicht mit Ihrer Vermutung über die Ursache.

Woran Sie Fortschritt tatsächlich erkennen

Verlassen Sie sich nicht auf das Gefühl, etwas verstanden zu haben. Der belastbare Test ist immer derselbe: Können Sie das Ergebnis der letzten Woche aus dem Gedächtnis neu bauen, in etwa der Hälfte der ursprünglichen Zeit? Wenn ja, gehen Sie weiter. Wenn nein, wiederholen Sie die Woche mit einem anderen Thema und derselben Struktur. Der Plan ist so gebaut, dass eine Wiederholung ihn nicht zerstört, sondern trägt.