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, Ajax und TypeScript. Du erfährst zudem, wie Künstliche Intelligenz (KI) in deinem beruflichen Umfeld eingesetzt wird.


Webdesign (HTML/CSS/Dreamweaver)

HTML (ca. 5 Tage)
Grundgerüst
Tags zur Texterstellung (h1-h6, p, br)
Grundlagen CSS
Text-Format-Befehle
Gerüstbildende HTML-Tags (z. B. header, nav)
Grafiken einbinden und in Photoshop aufbereiten
Favicons
Verlinkungen
Interne-, Externe-, Tel.-, mailto-Links
Listen und Tabellen
Formulare in HTML
Formularelemente
Einbindung von Video- und Audioelementen
Einbindung von YouTube und Google-Maps
Unterschiede zwischen XHTML und HTML

Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI‐Technologien
sowie Anwendungsmöglichkeiten im beruflichen Umfeld

Grundlagen CSS (ca. 5 Tage)
Grundlagen Dreamweaver
Einbindungsmöglichkeiten von CSS-Angaben (intern, extern, inline-Style)
Textgestaltung mit CSS
CSS-Attribute zur Gestaltung von Bordern und Abständen (padding, margin)
Hintergrundgestaltung per CSS
Grundlagen float/clear
Spaltigkeit mit float
Farben mit CSS
Clearfix
Pseudoelemente (::before/::after)
Pseudoklassen (:nth-of-type)
Listen/display/Link-Pseudo-Klassen
Navigation mit ul/li (horizontal/vertikal)

CSS-Flexbox (ca. 5 Tage)
Spaltigkeit mit Flex
Ausrichtung von Elementen mit Flex
Spalten in Spalten mit Flex
Individuelle Schrift verwenden (@font-face)
Schriften mit Dreamweaver
Dreamweaver – CSS-Designer
CSS-Position
Positionen: relative/absolute/fixed
Möglichkeiten zur Formulargestaltung per CSS
CSS-Farbverläufe
CSS – transition/transform

Responsives Webdesign (ca. 6 Tage)
Breakpoints, Viewport, Media-Querys
Header und header-img responsiv gestalten
Picture-Elemente in HTML
Mobile Navigation mit hover
Hover in click auf Apple-Handys ermöglichen
Klick-Event per CSS (mittels checkbox)
Responsive Navigationen mit click
Animierter Burger-Button
CSS-Akordeon (mittels Radio-Buttons)
Drop-Down-Menü für Desktop und Mobile
Unterschiedliche Designs
CSS-Pseudoklasse :target
One-Page-Site – Seitenstruktur
Responsive Navigation mit :target-Steuerung
Vorteile von One-Page-Sites

JavaScript (ca. 9 Tage)
Anwendungen einbinden
Einstieg in JavaScript/jQuery
If-then-else
Variablen
Data Objekt
Array Datentyp
ScrollTop
For-Schleife
Math-Objekt
Sticky-menu (js/css)
Menu mit Scrollen ein-/ausblenden
Verwendung von vh/vw und calc
Pflichtangaben Impressum/Datenschutz
Cookiehinweis
Font-awesome – Symbol Bibliothek
CSS-Filter
CSS-Variablen
Optim. der Site für die Suchmaschinen (SEO)
Object fit – Rahmenfüllende Grafiken
CSS-Animation
CSS-Grid
Grid-template-areas
Einführung in CSS-Framework: Bootstrap

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: Webstorage, IndexedDB
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 Codervervollstä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

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.