Kursbeschreibung

In diesem Lehrgang erlernst du die professionelle Frontend-Gestaltung von Webseiten: den kompletten Workflow für modernes Webdesign zur Erstellung anspruchsvoller Webseiten sowie sichere Kenntnisse in JavaScript. Du erfährst zudem, wie Künstliche Intelligenz (KI) in deinem beruflichen Umfeld eingesetzt wird.


Webdesign (HTML/CSS/Visual Studio Code)

HTML und CSS (ca. 6 Tage)
HTML-Einführung
Grundgerüst
Tags zur Texterstellung (h1-h6, p, br, span)
Text-Format-Befehle
Grafiken einbinden
Verlinkungen (Interne‐, Externe‐, Tel.‐, mailto‐ Link)
Favicons
Listen und Tabellen
Richtiger Syntax Aufbau
Überprüfung durch W3C Validierungstool
CSS-Einführung
Einbindungsmöglichkeiten von CSS-Angaben (intern, extern, inline-Style)
Basisbefehle (Textgestaltung, Schriftfarbe, Hintergrundfarbe)
HTML-Container
Nutzung und Styling von Containern
Integration von YouTube und Google-Maps
Video und Audioplayer
Object-fit

VS Code (ca. 1 Tag)
Einführung in VS Code
Zusätzliche Extensions für VS Code. (z. B. Live Server, Emmet Commands, Copilot (KI))
KI-Nutzung in Kombination mit VS Code

Layout-Techniken (ca. 4 Tage)
Klassen, ID`s, Selektoren
Einführung Box-Modell
Padding, margin, border, border-radius und ihre Shorthands
Flex-Box Einführung
Layouts mit Flex-Box
Ausrichtung mit Flexbox
Einführung in Grid System
Layouts mit Grid
Ausrichtung mit Grid System
Bilder mit Text umfließen lassen mit float und clear
Allgemeine display Eigenschaften von Tags
Hintergrundbilder

Status und Wertigkeiten (ca. 1 Tag)
Einführung Pseudoklassen (hover, active, focus, nth-child, first-child, last-child)
Pseudoelemente (::before, ::after, content)
Spezifität (Wertigkeit von Codes)

Positionierung (ca. 2 Tage)
Einführung in Positions
Static, absolute, fixed, sticky, relative
Left, right, top, bottom, z-index
Dropdown Menü’s
:target
:target in Kombination mit Navigationsmenüs und Modalen

Formulare (ca. 2 Tage)
Einführung in Formulare
Fieldset, legend
Inputs, textareas, labels, values, name, selects
Autocomplete
Formulargestaltung mit CSS
Integration von php-script in action mit KI

Effekte und Schriften mit CSS (ca. 1 Tag)
CSS-Übergangseffekte
Transition, filter, transform
Farbverläufe, box-shadow, text-shadow
Schriftintegration mit @font-face

Responsives Webdesign (ca. 2 Tage)
Einführung in responsives Design
Media-Querys, breakpoints
Landscape, portait Modus
Responsive Bilder mit picture und srcsets
Bildbearbeitung, Komprimierung von Bildern
Bilder mit KI generieren

Suchmaschinenoptimierung (ca. 1 Tag)
Einführung in die SEO
On-Page Optimierung und Nutzung von KI-generierten Texten
Performance Optimierung zur Verbesserung der SEO und Vorstellung passender Tools

CSS-Techniken und Interaktion (ca. 2 Tage)
CSS-Variablen
Dark-Mode
Calculation mit CSS
Einführung in CSS-Animationen
Duration, delay, direction, timing-function, iteration-count, fill-mode
Animierter Burger-Button

One-Pager und Multilingualität (ca. 2 Tage)
Einführung One-Pager
Smooth-scroll
Integration fontawesome Bibliothek
Umgang mit SVG-Grafiken
Layer Integration und CSS-Anpassung
Multilinguale Webseiten

Erweiterungen und Frameworks (ca. 1 Tag)
Einführung in Bootstrap
Nutzung von Bootstrap Komponenten
Responsive Design mit Bootstrap

JavaScript (ca. 3 Tage)
Einführung in JavaScript
JavaScript/jQuery Methoden
jQuery Lightbox erstellen
Variablen
If-else Anweisungen
Scroll, window, resize
Arrays
For-Schleife
Math-Object

Gesetzliche Vorgaben und Projektmanagement (ca. 2 Tage)
Internetrecht
Urheberrechte in Bezug auf AI/KI
Barrierefreiheit
Projektmanagement

Projektarbeit (ca. 10 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



JavaScript Developer

JavaScript Grundlagen (ca. 7 Tage)
Einführung in JavaScript, Geschichte, Einsatzbereiche
ECMA-Script-Versionen
Einbinden von JavaScript in HTML
IDE: Installation und Einführung in WebStorm
Sprachelemente: Variablen, Konstanten, Typisierung
Primitive Datentypen: Number, String, Boolean
Collection-Datentypen: Arrays, Objekte
Copy by Reference vs. Copy by Value
Arithmetische und logische Operatoren
Kontrollstrukturen: Bedingungen, Schleifen, Funktionen
Scope, Global Scope, Blockscope
Fehlerbehandlung 
Lokales Speichern: Cookies, Webstorage
JSON
ES6-Import/Export
Versionskontrolle mit Git, Einführung in GitHub

DOM-Manipulation mit JavaScript (ca. 5 Tage)
HTML selektieren
Inhalt, Attribute und Styling
Events, Event-Objekt, Bubbling
Intersection-Observer und Mutation-Observer
DOM-Elemente anlegen, kopieren, verschieben, löschen

Frameworks/Libraries (ca. 1 Tag)
Eigene Bibliothek erstellen

AI (ca. 1 Tag)
Vorstellung von konkreten KI-Technologien im beruflichen Umfeld
Künstliche Intelligenz (KI) im Arbeitsprozess
Einbindung von KI in der IDE
Nutzung von KI zur Codevervollständigung, Refactoring und Lernunterstützung

Projektarbeit (ca. 6 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse

JavaScript Vertiefung (ca. 5 Tage)
Canvas, Zeichnen, Animieren
Spread-Syntax, Destructuring
Objekte anlegen mit Konstruktoren, Klassen, Factories
Vererbung von Klassen
Getter und Setter, Statische Methoden
Felder, Private Felder
Prototyping
Datentypen Map und Set
Promise, Verkettung, Async-Await-Syntax
Webworker
Erweiterte Datenspeicherung mit IndexedDB

Ajax (ca. 1 Tag)
Einführung
Funktionsweise
HTTP-Anfragen
Fetch()-API
Web Services: JSON und XML
Kommunikation mit APIs

NodeJS (ca. 4 Tage)
Aufbau und Installation
Built-in Module, Custom Module, NPM
Upload zu NPM
Dateityp MD
Webserver erstellen (Express)
Eigene Middleware
Fetch-Syntax für Ajax-Anfragen
Dateien auf Server hochladen
Echtzeitkommunikation mit Websockets
Kommunikation mit noSQL Datenbank
Aufbau eigener REST-APIs mit Express
API-Endpunkte: GET, POST, JSON-Handling
Einblick in Hosting (z. B. dedizierte Server, Managed Hosting, Cloud Hosting)

Single Page Application React JS (ca. 1 Tag)
Einführung, theoretische Betrachtung, Installation
Virtuelle DOM
Expressions, State-Hook, Effect-Hook
Komponenten, Verschachtelung, Parameterübergabe
Benutzereingaben, Inhaltsupdate, Eventlistener
Routing

Single Page Application VueJS (ca. 1 Tag)
Einführung, theoretische Betrachtung
Virtuelles DOM
Einbindung, Expressions, Direktiven
Eventlistener, Data-Binding, Methoden
Eigene Direktiven
Components, Verschachtelung
Routing

TypeScript (ca. 2 Tage)
Installation und Anwendung
Statische Typisierung
Dynamische Datentypen
Komplexe Datentypen
Decorators 

Projektarbeit (ca. 6 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



Änderungen möglich. Die Lehrgangsinhalte werden regelmäßig aktualisiert.