Frontend Development

Frontend-Entwicklung ist das Handwerk, das Webseiten sichtbar und bedienbar macht. Dieser Kurs führt systematisch durch alle Schichten einer modernen Browser-Oberfläche: von den semantischen Grundlagen in HTML5 über die visuelle Gestaltung mit CSS3 und Bootstrap 5 bis zur interaktiven Programmierlogik in JavaScript. Wer diesen Weg konsequent geht, versteht am Ende, wie Webseiten auf allen Bildschirmgrößen korrekt dargestellt werden, warum DOM-Manipulationen die Basis jeder Webanwendung bilden, und wie Teams mit Git-Werkzeugen koordiniert zusammenarbeiten. Der Kurs startet ohne Programmiervorkenntnisse — Computational Thinking und Computer Fundamentals bilden die Grundlage, bevor der erste HTML-Tag geschrieben wird.

Das Startmodul Computer Fundamentals und Computational Thinking legt das kognitive Fundament für alle nachfolgenden Programmierkurse. Studierende ohne IT-Hintergrund lernen hier, wie Rechner Informationen verarbeiten, und üben, Probleme in lösbare Teilschritte zu zerlegen. Dieses Denkmuster ist die Vorstufe zur Programmierung.

• Hardware- und Software-Grundkonzepte (CPU, Speicher, Betriebssysteme)
• Algorithmisches Denken und Pseudocode-Schreiben
• Grundlagen von Zahlensystemen (Binär, Hexadezimal)
• Problemzerlegung und Modellierungsübungen
• Überblick über Entwicklungsumgebungen und Dateistrukturen
• Erste Schritte im Terminal (Verzeichniswechsel, Dateien anlegen)

Das Modul HTML5 und Semantic Web macht Teilnehmende mit dem Baustein jeder Webseite vertraut. Besonderer Wert wird auf semantisch sinnvolle Auszeichnung gelegt, weil sie die Grundlage für Barrierefreiheit und Suchmaschinenoptimierung bildet.

• Dokument-Struktur mit html, head und body
• Semantische Elemente: header, main, section, article, footer, nav
• Formulare, Input-Typen und Validierung mit HTML5-Attributen
• Einbetten von Bildern, Videos und externen Inhalten
• Barrierefreiheit (ARIA-Labels, alt-Attribute, Tabulatorreihenfolge)
• Verlinkung und Navigation zwischen mehreren Seiten

Das Modul CSS3, Bootstrap 5 und SASS behandelt Gestaltung von der einfachen Eigenschaft bis zum responsiven Layout-System. SASS fügt der klassischen CSS-Syntax Variablen, Nesting und Mixins hinzu, was größere Projekte übersichtlich hält.

• CSS-Selektoren, Spezifität und Vererbung
• Box-Modell, Flexbox und CSS Grid für moderne Layouts
• Media Queries und Mobile-First-Ansatz
• Bootstrap-Grid, Komponenten (Cards, Modals, Navbar) und Utility-Klassen
• SASS-Variablen, Nesting, Mixins und Partials
• Build-Prozess und SASS-zu-CSS-Kompilierung

Das Modul JavaScript Core und DOM-Programmierung ist das Herzstück der Frontend-Entwicklung. JavaScript verwandelt statische Seiten in dynamische Anwendungen; DOM-Kenntnisse ermöglichen es, auf Nutzerinteraktionen wie Klicks oder Formulareingaben zu reagieren.

• Variablen (let, const), Datentypen und Operatoren
• Kontrollstrukturen (if/else, switch, Schleifen)
• Funktionen, Scope und Closures
• Arrays und Objekte, Iteration mit map/filter/reduce
• DOM-Selektion, Event-Listener und Ereignisverarbeitung
• Fetch-API und einfache asynchrone Operationen (Promises, async/await)

Praktische Projekte und Coding-Aufgaben Die Praxis-Phasen verlaufen parallel zu den theoretischen Modulen und münden in mehrere vollständige Mini-Projekte. Ziel ist es, dass Teilnehmende am Ende ein lauffähiges Portfolio vorweisen können.

• Persönliche Portfolio-Seite mit HTML5 und CSS3 erstellen
• Bootstrap-Grid für eine responsive Landing Page einsetzen
• SASS-Variablen für ein konsistentes Farbschema definieren
• Ein mehrseitiges statisches Website-Projekt strukturieren und verlinken
• JavaScript-Taschenrechner mit DOM-Manipulationen implementieren
• To-Do-App mit Listenoperationen, Event-Handling und LocalStorage entwickeln
• Fetch-Anfragen an eine öffentliche API stellen und JSON-Daten anzeigen
• Agiles Sprint-Backlog mit Jira für ein fiktives Webprojekt anlegen
• Git-Repository initialisieren, Branches erstellen und Pull Requests simulieren
• Merge-Konflikte in Git erkennen und auflösen
• Linux-Grundbefehle im Terminal üben (cp, mv, grep, chmod)
• Abschlussprojekt: vollständig responsive Webseite mit JavaScript-Interaktion

Das Agile-Modul und das Jira-Training ergänzen die technischen Fähigkeiten um die Arbeitsweisen, die in professionellen Entwicklungsteams Standard sind. Scrum-Zeremonien (Daily Stand-up, Sprint Review, Retrospektive) werden in Gruppenübungen simuliert, sodass Teilnehmende den Ablauf nicht nur theoretisch kennen, sondern praktisch nachvollziehen. Das Linux-Essentials-Modul vermittelt die Kommandozeilen-Kompetenz, die für jeden Entwickler:innen-Alltag unverzichtbar ist: Verzeichnisnavigation, Rechtevergabe, Shell-Skripte und die Integration mit Git-Befehlen.

Dieser Kurs richtet sich an Menschen, die einen beruflichen Einstieg in die Webentwicklung anstreben — auch ohne technisches Vorstudium. Die folgenden Gruppen profitieren besonders davon.

• Quereinsteiger:innen aus kaufmännischen, kreativen oder anderen nicht-technischen Bereichen
• Absolvent:innen, die nach dem Abschluss eine technische Orientierung suchen
• IT-Interessierte, die bisher ausschließlich Anwender:innen waren
• Designstudierende, die ihre visuellen Konzepte selbst technisch umsetzen möchten
• Fachkräfte, die in ihrer Organisation zunehmend mit Webanwendungen arbeiten

Das Lernformat kombiniert geleitete Instruktion mit umfangreichen Eigenübungen und entspricht einem Combined-Learning-Modell im Vollzeitrhythmus. Neue Konzepte werden in Erklärphasen eingeführt, unmittelbar danach in begleiteten Coding-Sessions angewendet und schließlich in Mini-Projekten gefestigt. Peer-Feedback und Code-Reviews im Kursrahmen bereiten auf die Zusammenarbeit in echten Entwicklungsteams vor.

Der Kurs wird in Vollzeit durchgeführt. Die genaue Gesamtdauer richtet sich nach dem jeweiligen Durchführungsangebot. Das Vollzeitformat ist darauf ausgelegt, den Übergang in einen Frontend-Job in einem zusammenhängenden Lernzeitraum zu ermöglichen, ohne dass Teilnehmende über Monate ihren Lebensunterhalt nebenbei organisieren müssen.

Am Kursende wird ein trägerinternes Zertifikat mit der Bezeichnung „Frontend Developer" ausgestellt. Es dokumentiert die abgedeckten Themengebiete und das abgeschlossene Kursvolumen. Das Zertifikat ist kein staatlich anerkannter Abschluss, fungiert aber als Nachweis gegenüber Arbeitgeber:innen und ergänzt das Coding-Portfolio, das im Kurs aufgebaut wird.

Frontend-Entwickler:innen werden in nahezu jeder Branche gesucht — von Startups bis zu etablierten Mittelständlern, von Agenturen bis zu internen IT-Abteilungen. Die in diesem Kurs vermittelten Fähigkeiten decken genau den Bereich ab, der für Junior-Positionen in der Webentwicklung gefragt ist: semantisches HTML, responsives CSS-Design und interaktives JavaScript. Wer das Kursportfolio mit eigenen Projekten füllt, zeigt potenziellen Arbeitgeber:innen nicht nur, was man weiß, sondern was man gebaut hat. Die Kombination aus technischem Kern und agilen Arbeitsmethoden verschafft einen Praxisvorteil gegenüber reinen Autodidakten. Viele Entwickler:innen lernen JavaScript ausreichend, stolpern aber in ihren ersten Jobs über den Sprint-Rhythmus und Jira-Workflows. Dieser Kurs nimmt die Methodenkenntnisse gleichwertig in die Ausbildung auf und bereitet damit auf den echten Entwickleralltag vor. Git und GitHub sind heute keine optionalen Werkzeuge mehr, sondern Pflichtbestandteil jeder Entwicklerrolle. Die konsequente Integration von Versionskontrolle in alle Praxisprojekte sorgt dafür, dass Git am Ende des Kurses nicht fremd wirkt, sondern zur verinnerlichten Arbeitsroutine gehört.