Nach diesem Lehrgang kennst du den kompletten Workflow für modernes Webdesign und produzierst anspruchsvolle Webseiten. Du verfügst über sichere Kenntnisse in JavaScript und Ajax und erfährst, wie Künstliche Intelligenz (KI) in deinem beruflichen Umfeld eingesetzt wird.
Themen
Webdesign mit HTML, CSS und 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
ECMA-Script-Versionen
Einbinden in HTML-Seiten
Sprachelemente: Variablen, Konstanten, Typisierung
Primitive Datentypen: Number, String, Boolean
Collection-Datentypen: Arrays, Objekte, arithmetische Operatoren
Kontrollstrukturen: Bedingte Anweisungen, Schleifen, Funktionen
Blockscope
Lokales Speichern: Webstorage, IndexedDB
Fehlerbehandlung
Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI‐Technologien
sowie Anwendungsmöglichkeiten im beruflichen Umfeld
DOM-Manipulation mit JavaScript (ca. 4 Tage)
Grundlagen
HTML selektieren
Inhalt und Attribute
Styling
Events, Event-Objekt, Bubbling
Observer
- Intersection-Observer
- Mutation-Observer
DOM-Elemente anlegen, kopieren, verschieben, löschen
AJAX (ca. 1 Tag)
Einführung
Funktionsweise
Voraussetzungen
HTTP-Anfragen
XMLHttpRequest-Objekt
Web Services
- JSON
- XML/XML-Response
Frameworks/Libraries (ca. 2 Tage)
Eigene Bibliothek erstellen
jQuery
Projektarbeit (ca. 6 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse
JavaScript Vertiefung (ca. 7 Tage)
Canvas, Zeichnen, Animieren
Array-Methoden, Copy by Reference
Spread-Syntax, Destructuring
Objekte anlegen mit Konstruktoren, Klassen, Factories
Getter und Setter, Statische Methoden
Felder, Private Felder, Alternativen
Vererbung von Klassen
Prototyping
Datentypen Map und Set
Promise, Verkettung, Async-Await-Syntax
ES6-Import
Webworker
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 Datenbank (noSQL)
Single Page Application (ca. 3 Tage)
ReactJS:
- Einführung, theoretische Betrachtung, Installation
- Virtuelle DOM
- Expressions, State-Hook, Effect-Hook
- Komponenten, Verschachtelung, Parameterübergabe
- Benutzereingaben, Inhaltsupdate, Eventlistener
- Routing
VueJS:
- Einführung, theoretische Betrachtung
- Virtuelles DOM
- Einbindung, Expressions, Direktiven
- Eventlistener, Data-Binding, Methoden
- Eigene Direktiven
- Components, Verschachtelung
- Routing
Web Components:
- Vorteile und Nachteile
- Custom Elements, Shadow DOM
- Einbindung von HTML-Templates und CSS-Dateien
- Übergabe von Parametern, Slots, Attributen
- Custom Events anlegen und aufrufen
Projektarbeit (ca. 6 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse
Änderungen möglich. Die Lehrgangsinhalte werden regelmäßig aktualisiert.
Ihre Vorteile
Nahezu alle Unternehmen setzen heutzutage auf einen attraktiven Internetauftritt, der sie als Unternehmen repräsentiert. Als zukünftige Arbeitgeber:innen kommen vor allem Grafik-, Werbe-, Web-, Multimedia- oder Fullservice-Agenturen, aber auch Software- und Datenbankanbieter in Frage. Kenntnisse im Bereich Webdesign werden in nahezu allen Branchen gefordert. Mit entsprechendem Knowhow ist auch die berufliche Selbstständigkeit eine interessante Perspektive. Dein aussagekräftiges Zertifikat gibt detaillierten Einblick in deine erworbenen Qualifikationen und verbessert deine beruflichen Chancen.
