Diplomlehrgang KI-powered Frontenddevelopment mit HTML, CSS und JavaScript: Moderne Weboberflächen professionell entwickeln und KI gezielt einsetzen -

Institut: Berufsförderungsinstitut (BFI) - Wien
Bereich: Kunst, Design, Gestaltung

Kursbeschreibung

Modul 1 | Webdesign mit HTML und CSS
- Was ist HTML? Was ist CSS?
- HTML-Editoren, arbeiten im Editor
- Block- und Inlineelemente
- Listen, Tabellen
- Hyperlinks und Grafiken einbinden
- Meta-Angaben
- Formulare
- Grundlagen SEO
- Multimediaelemente (Video, Sound, YouTube,…)
- CSS-Syntax & Selektoren
- CSS-Vererbung & Kasskade
- Formatierung von HTML-Elementen (Schriften, Farben, Textformate,Positionierungen,….)
- CSS-Achsen
- Maßeinheiten, Abmessungen
- CSS-Box-Modell
- Webhosting und Domain-Registrierung
- Webseite veröffentlichen (FTP)
- Barrierefreiheit im Web
- usability & performance
- rechtliche Grundlagen
- Semantik in HTML/CSS
- Moderne Layouts mit Flexbox und CSS Grid
- Responsive Webdesign für unterschiedliche Endgeräte
- Arbeiten mit CSS-Variablen (Custom Properties)
- Fortgeschrittene Selektoren und CSS-Techniken
- Übergänge, Transformationen und Animationen mit CSS

Modul 2 | JavaScript Grundlagen
- Grundlagen der Programmierung
- Entwicklungsumgebung & Laufzeitumgebung
- ECMAScript
- Syntax
- Variablen & Konstanten
- Scoping
- Datentypen
- Operatoren
- Funktionen
- Arrays & Objekte
- mathematische Funktionen
- Conditions & Loops
- Debugging
- Eventhandling
- DOM-Traversing
- DOM-Manipulation
- Datum & Zeit
- Formular-Verarbeitung
- Dynamic elements
- Web animations
- JavaScript Bibliotheken & Frameworks
- praxis bezogene Übungen
- produktiver coden mit KI-Assistenten
- Tipps & Tricks

Modul 3 | AI-Power für Frontend-Developer
- KI-Assistenz
- Model-Auswahl
- Integration externer oder lokaler LLM
- Prompt-Engineering
- KI-Workflow
- KI-gestütztes Debugging
- Ask / Plan / Agent
- Loop Engineering
- Markdown
- Instructions (global, projektspezifisch)
- Memory
- Custom AI Agents für individuelle Use Cases
- Agent Skills
- Multi-Agent-Workflows
- Vibe-Coding / Vibe Engineering
- MCP (Model Context Protokol) Grundlagen
- RAG (Retrieval-Augmented Generation.) Grundlagen
- KI-gestützte Dokumentation
- Copilot-CLI Grundlagen
- Token-optimierte Nutzung
- Datenschutz & Sicherheit

Modul 4 | JavaScript Aufbau
- Moderne JavaScript-Syntax (ES6+)
- Arrow Functions
- Template Literals
- Callback Functions
- Closures
- Array-Funktionen
- Method Chaining
- Event Delegation
- Throttling
- Debouncing
- Local Storages und Cookies
- Objekte, Prototypen und Klassen
- OOP
- ES Module
- Asynchrones JavaScript
- AJAX und Fetch API
- Arbeiten mit APIs und JSON
- Browser APIs & Web Storage
- Geolocation API
- Canvas
- Strukturierung von Benutzeroberflächen nach Komponentenprinzip
- Rendering-Funktionen
- npm & modernes Frontend-Tooling
- Code-Bundling
- JS Bibliotheken/Frameworks (z.B.: React)
Modul 1 | Webdesign mit HTML und CSS- Was ist HTML? Was ist CSS?- HTML-Editoren, arbeiten im Editor- Block- und Inlineelemente- Listen, Tabellen- Hyperlinks und Grafiken einbinden- Meta-Angaben- Formulare- Grundlagen SEO- Multimediaelemente (Video, Sound, YouTube,…)- CSS-Syntax & Selektoren- CSS-Vererbung & Kasskade- Formatierung von HTML-Elementen (Schriften, Farben, Textformate,Positionierungen,….)- CSS-Achsen- Maßeinheiten, Abmessungen- CSS-Box-Modell- Webhosting und Domain-Registrierung- Webseite veröffentlichen (FTP)- Barrierefreiheit im Web- usability & performance- rechtliche Grundlagen- Semantik in HTML/CSS- Moderne Layouts mit Flexbox und CSS Grid- Responsive Webdesign für unterschiedliche Endgeräte- Arbeiten mit CSS-Variablen (Custom Properties)- Fortgeschrittene Selektoren und CSS-Techniken- Übergänge, Transformationen und Animationen mit CSSModul 2 | JavaScript Grundlagen- Grundlagen der Programmierung- Entwicklungsumgebung & Laufzeitumgebung- ECMAScript- Syntax- Variablen & Konstanten- Scoping- Datentypen- Operatoren- Funktionen- Arrays & Objekte- mathematische Funktionen- Conditions & Loops- Debugging- Eventhandling- DOM-Traversing- DOM-Manipulation- Datum & Zeit- Formular-Verarbeitung- Dynamic elements- Web animations- JavaScript Bibliotheken & Frameworks- praxis bezogene Übungen- produktiver coden mit KI-Assistenten- Tipps & TricksModul 3 | AI-Power für Frontend-Developer- KI-Assistenz- Model-Auswahl- Integration externer oder lokaler LLM- Prompt-Engineering- KI-Workflow- KI-gestütztes Debugging- Ask / Plan / Agent- Loop Engineering- Markdown- Instructions (global, projektspezifisch)- Memory- Custom AI Agents für individuelle Use Cases- Agent Skills- Multi-Agent-Workflows- Vibe-Coding / Vibe Engineering- MCP (Model Context Protokol) Grundla…
Beginn
29.09.2026
Ende
09.12.2026
Uhrzeit
Di-Do 08:30-15:30 (Detailstundenplan beachten!)
Dauer
177.00 UE
Ort
Online | Zugangslink wird zeitnah versandt , ,
Kontakt
Servicecenter: 01 / 81178 - 10100
Ort
BFI Wien
Straße
Alfred-Dallinger-Platz 1
PLZ
1030
Ort
Wien
Land
Österreich
Bundesland
Wien
Fax
01/811 78 - 10111
Gute PC- und Internet- AnwenderkenntnisseGrundlegende Tastaturkenntnisse und sicherer Umgang mit Maus und TastaturGrundkenntnisse in Englisch von VorteilPC/Laptop, Mikrofon + Lautsprecher (bzw. Headset), Webcamstabile InternetverbindungBitte beachten SieDieses Seminar findet virtuell (online, live mit Trainerin) statt. Sie erhalten alle weiteren Infos und den Zugang zur Webplattform rechtzeitig vor Kursbeginn per E-Mail!Welche Software bei diesem Kurs verwendet wird, teilen Ihnen die Trainer:innen rechtzeitig vor Kursbeginn per E-Mail mit.Für einen nachhaltigen Lernerfolg ist die eigenständige Vertiefung der Kursinhalte außerhalb der Unterrichtszeiten notwendig. Dafür, ebenso wie für die Abschlussarbeit sollte ein zusätzlicher Lernaufwand von etwa 8–16 Stunden pro Woche eingeplantwerden.Zusätzliche Kosten: Für die aktive Teilnahme an den KI-gestützten Übungen wird ein GitHub-Copilot-Abonnement, bzw. Antrophic-Claude-API-Key benötigt. Die Lizenzkosten sind nicht Bestandteil des Kurspreises und werden direkt vom Anbieter abgerechnet.(Aktuell ca. 10–40 EUR, abhängig vom gewählten Tarif).Details erhalten Sie rechtzeitig von der Trainer:innen.
Ziele
Webdesign und Frontendentwicklung vereinen heute Kreativität, Handwerk und Künstliche Intelligenz zu einem zukunftsweisenden Kompetenzfeld der digitalen Wirtschaft.Dieser praxisnahe Diplomlehrgang vermittelt Ihnen alle notwendigen Kompetenzen für die Entwicklung moderner Websites und interaktiver Webanwendungen. Die Ausbildung führt Sie Schritt für Schritt von den Grundlagen modernen Webdesigns über die Grundlagen der Programmierung und JavaScript bis hin zur professionellen Frontendentwicklung.Ein besonderer Schwerpunkt liegt auf dem Einsatz moderner KI-Werkzeuge im Entwicklungsprozess sowie auf deren projektspezifische Anpassung.Zahlreiche Praxisübungen und Projektarbeiten vermitteln Ihnen ein umfassendes Verständnis für die moderne Frontendentwicklung.
Zielgruppe
Der Lehrgang richtet sich an Personen, die eine umfassende Ausbildung im Bereich Webdesign und Frontendentwicklung absolvieren möchten und dabei moderne KI-Werkzeuge professionell einsetzen wollen.Angesprochen werden insbesondere:- Einsteiger und Quereinsteiger mit Interesse an Webentwicklung- Webdesigner:innen, die ihre technischen Kenntnisse bis hin zur modernen Frontendentwicklung ausbauen möchten- Personen aus Marketing, Medien und Kommunikation, die professionelle Websites erstellen möchten- IT-interessierte Personen, die den Einstieg in die Software- und Webentwicklung suchen- Entwickler:innen, die ihre Kenntnisse um moderne KI-gestützte Entwicklungsprozesse erweitern möchten
Zertifikat(e)
Ja, bei Erfüllung aller erforderlichen Voraussetzungen
Kosten
€ 4.300
Ratenzahlung möglich
Förderungen
Bitte wenden Sie sich an Ihre/n BeraterIn. Informationen über andere Fördermöglichkeiten finden Sie unter www.bfi.wien
Kursnummer
26BTDE0358
Plätze
12

Diese Kurse könnten Sie auch interessieren ...

Uber Weiterbildungsvorschläge