Webdesign und -programmierung

Das World Wide Web ist längst kein Nischenmedium mehr — es ist das wichtigste Kommunikations- und Handelsmedium der Gegenwart, und die Nachfrage nach Personen, die es technisch und gestalterisch gestalten können, wächst unaufhörlich. Dieser Kurs vermittelt das gesamte handwerkliche Fundament für die professionelle Entwicklung moderner Websites: von der semantisch korrekten HTML-Struktur über anspruchsvolles CSS-Styling und responsives Layout bis hin zur dynamischen Programmierlogik mit JavaScript. Lernende verstehen, wie Browser Dokumente rendern, wie Benutzeroberflächen für unterschiedliche Geräte konzipiert werden und wie JavaScript-Code mit dem Dokumentobjektmodell interagiert. Ergänzend werden Git-basierte Versionskontrolle und grundlegende React-Konzepte behandelt, die in modernen Entwicklungsumgebungen zum Standard gehören. Der Kurs richtet sich explizit an Personen ohne tiefgreifende Vorkenntnisse in der Webentwicklung und führt sie schrittweise vom ersten HTML-Tag zu vollständigen, veröffentlichungsfähigen Webprojekten.

Modul 1 — HTML5 und semantisches Markup: Den Ausgangspunkt bildet die Grundsprache des Webs. Lernende erarbeiten, wie ein HTML-Dokument aufgebaut ist und welche Bedeutung semantische Elemente wie header, nav, main, article, section, aside und footer für Browser, Screenreader und Suchmaschinen haben. Formulare, Tabellen und eingebettete Medien werden ebenfalls behandelt.

• Dokumentstruktur und DOCTYPE-Deklaration
• Semantische Elemente und ihre Bedeutung für Barrierefreiheit
• Verlinkung, Navigation und Anker
• Formulare: Eingabefelder, Validierungsattribute, Labels
• Bilder, Audio und Video korrekt einbinden
• HTML-Entities und Zeichenkodierung

Modul 2 — CSS3 und responsives Design: Hier lernen Teilnehmende, Webseiten visuell zu gestalten und für verschiedene Bildschirmgrößen anzupassen. Neben klassischen Eigenschaften wie Schrift, Farbe und Abstände stehen moderne Layout-Systeme im Mittelpunkt: Flexbox ermöglicht einzeilige Layouts entlang einer Achse, CSS Grid bietet zweidimensionale Flächeneinteilung für komplexe Seitenraster.

• Box-Modell, Margins, Padding und Borders
• Schriftgestaltung, Farben und Hintergründe
• Flexbox-Layout: Flex-Container, Ausrichtung, Umbruch
• CSS-Grid: Grid-Template, Spalten und Zeilen, Bereiche
• Media Queries und Breakpoint-Strategie
• CSS-Variablen und grundlegende Theming-Konzepte

Modul 3 — JavaScript und DOM-Programmierung: JavaScript verwandelt statische HTML-Seiten in lebendige Anwendungen. Dieser Block beginnt mit den Sprachgrundlagen und führt systematisch zur Manipulation des DOM, zur Ereignisbehandlung und schließlich zur asynchronen Kommunikation mit Servern.

• Variablen (let, const), Datentypen und Operatoren
• Verzweigungen (if/else, switch) und Schleifen (for, while)
• Funktionen, Scope und Closures
• Arrays und Objekte: Erstellen, Durchlaufen, Transformieren
• DOM-Abfragen (querySelector, getElementById) und Manipulation
• Event-Listener und Formularverarbeitung

Modul 4 — Fetch API, Git und React-Einstieg: Der abschließende Block vermittelt drei Technologien, die in professionellen Workflows unverzichtbar sind. Die Fetch API öffnet den Blick auf Client-Server-Kommunikation; Git strukturiert die Zusammenarbeit im Team; React-Grundkonzepte bereiten auf die Welt komponentenbasierter Frontend-Entwicklung vor.

• Fetch API: GET- und POST-Anfragen, async/await
• JSON: Struktur, Parsen und serverseitige Antworten verarbeiten
• Git: init, add, commit, log, branch, merge
• Remote-Repositories auf GitHub verwalten
• React: Komponenten, JSX, Props und State-Grundlagen
• Ersten React-Prototyp aufbauen und im Browser starten

Praxis-Block — Eigene Projekte und Codequalität

• Mehrseitige HTML-Website mit konsistenter Navigation aufbauen
• Responsives Portfolio-Layout mit Flexbox und Grid umsetzen
• JavaScript-Formularvalidierung implementieren und Fehlermeldungen anzeigen
• Wetter-Widget mit Fetch API und öffentlicher REST-API bauen
• Git-Workflow für ein kleines Projekt einrichten und Commits strukturieren
• Code-Reviews anhand von Checklisten durchführen (Lesbarkeit, Benennung, Struktur)
• Debugging mit Browser-Entwicklertools: Konsole, Inspektor, Netzwerk-Tab
• Performance-Grundlagen: Bilder optimieren, unnötiges CSS reduzieren
• Barrierefreiheits-Check mit WAVE oder Lighthouse durchführen
• Einfache React-Komponente mit Props und State-Verwaltung entwickeln
• Fertige Webprojekte über GitHub Pages oder Netlify veröffentlichen
• Technische Dokumentation für eigene Codebase schreiben

Nach Abschluss der Praxisprojekte sind Lernende in der Lage, eigenständig Webseiten von der leeren Datei bis zur veröffentlichten URL zu entwickeln und dabei aktuelle Qualitätsstandards einzuhalten.

Der Kurs ist für Personen konzipiert, die einen Einstieg in die webbasierte Softwareentwicklung suchen — unabhängig davon, aus welcher Richtung sie kommen.

• Berufswechsler und Quereinsteigende mit grundlegendem Computerverständnis
• Wiedereinsteiger nach einer längeren Berufspause
• Personen aus kreativ-gestalterischen Berufen, die ihre Kenntnisse um die technische Seite erweitern möchten
• Menschen in Kurzarbeit oder in beruflicher Neuorientierung
• Absolventinnen und Absolventen nicht-technischer Studiengänge mit Interesse an Digitalberufen

Der Unterricht wechselt zwischen strukturierten Lehrsitzungen und offenen Übungsphasen, in denen Lernende eigene Codeprojekte umsetzen. Live-Coding-Demonstrationen zeigen, wie Code Schritt für Schritt entsteht — Teilnehmende folgen direkt am eigenen Gerät. Feedback-Runden zu fertigen Projekten fördern das Verständnis für Codequalität und Design-Entscheidungen. Ergänzend stehen Lernmaterialien und Dokumentations-Links zur Verfügung, die auch zwischen den Unterrichtseinheiten genutzt werden können. Sowohl Präsenz- als auch Online-Formate sind möglich; das genaue Format ergibt sich aus dem gewählten Kursangebot.

Die Kursdauer variiert je nach Anbieter und Intensität. Vollzeitkurse können innerhalb weniger Monate abgeschlossen werden; Teilzeitvarianten sind ebenfalls verfügbar und ermöglichen die Kombination mit anderen Verpflichtungen. Insgesamt werden die zentralen Themen HTML, CSS, JavaScript, Git und React-Grundlagen vollständig abgedeckt, bevor Teilnehmende in die eigenständige Projektphase einsteigen.

Nach erfolgreichem Abschluss erhalten Teilnehmende eine qualifizierte Teilnahmebescheinigung, die den Kursinhalt und die absolvierten Praxisprojekte dokumentiert. Diese Bescheinigung wird vom durchführenden Bildungsanbieter ausgestellt und ist kein staatlich anerkannter Bildungsabschluss, zeigt Arbeitgebern jedoch konkret, welche technischen Kompetenzen erworben wurden. Ergänzend empfiehlt es sich, die während des Kurses entstandenen Projekte in einem öffentlichen GitHub-Portfolio zu veröffentlichen — ein gut gepflegtes Portfolio zählt im Webentwicklungsbereich mehr als ein formales Zertifikat.

Webentwicklung ist eines der wenigen Berufsfelder, in dem der Einstieg ohne jahrelange Hochschulausbildung gelingt, wenn die Grundlagen solide erarbeitet wurden. Dieser Kurs legt genau dieses Fundament: Wer HTML, CSS und JavaScript beherrscht und versteht, wie moderne Frontend-Werkzeuge zusammenspielen, kann sich direkt für Junior-Positionen bewerben oder als freiberufliche Webentwicklerin oder als freiberuflicher Webentwickler tätig werden. Der technische Schwerpunkt auf tatsächlich verwendeten Technologien — kein veraltetes Framework, keine akademischen Konstrukte, sondern HTML5, CSS Grid/Flexbox, vanilla JavaScript und ein Git-Workflow — stellt sicher, dass das Gelernte unmittelbar in echten Projekten angewandt werden kann. React als meistgenutztes Frontend-Framework rundet das Profil ab und öffnet Türen zu Entwicklungsteams, die komponentenbasiert arbeiten. Für Menschen in beruflicher Neuorientierung ist dieser Kurs außerdem ein konkreter Beweis der eigenen Lernfähigkeit: Wer in kurzer Zeit eine funktionale, visuell ansprechende Website mit eigenem JavaScript-Code veröffentlicht, zeigt potenziellen Arbeitgebern mehr als jedes Bewerbungsanschreiben beschreiben könnte.