Frontend-Entwickler:in in 70174 Stuttgart auf fortbildung-bw.de

Frontend-Entwickler:in

Kurs-ID	10146-2024-11-11
Datum	11.11.2024 bis 07.03.2025
Dauer	16 Woche(n)
Unterrichtszeiten	<p>Montag bis Freitag von 8:30 bis 15:35 Uhr (in Wochen mit Feiertagen von 8:30 bis 17:10 Uhr)</p>
Kosten	k. A.
Zielgruppe	Webdesigner:innen, Webprogrammierer:innen, Grafiker:innen, Mediengestalter:innen, Fachkräfte aus künstlerischen Berufen oder Personen, die bei der Konzipierung, Gestaltung und praktischen Umsetzung von Internet-Auftritten verantwortlich mitwirken und die dafür notwendigen Kenntnisse und Fähigkeiten erwerben wollen.
Abschluss	Zertifikat „Frontend-Entwickler:in“, Zertifikat „Webdesign mit HTML/CSS/Dreamweaver“, Zertifikat „JavaScript Developer“
Förderung	Bildungsgutschein (Arbeitsuchende und Arbeitslose), Weiterbildungsförderung für Beschäftigte, Europäischer Sozialfonds ESF (Kurzarbeit oder Transfergesellschaften). Weitere Förderstellen: Berufsförderungsdienst (BFD), die Berufsgenossenschaft (BG) sowie der Rentenversicherungsträger (DRV).
Präsenzkurs	Keine Angabe.
mind. Teilnehmerzahl	6
max. Teilnehmerzahl	25
URL des Kurses	Details beim Anbieter
Anmelde URL des Kurses	Direkte Anmeldung beim Anbieter
spezielles Angebot für Dozenten	Keine Angabe.
Veranstaltungsort	alfatraining Bildungszentrum GmbH Friedrichstraße 13 70174 Stuttgart Diese Kartendarstellung kann ungenau sein, da zur Lokalisierung eines Kurses derzeit nur Postleitzahl und Ort der Kursstätte, jedoch (noch) keine Straßen-Informationen erfasst und übermittelt wird. Sie sollten daher die Kartendarstellung nicht zur Routenplanung verwenden. Hinweis: ein Update der Kurserfassung mit vollständigen Adressen für Kursstätten ist in Planung.

Abendkurs	Bildungsgutschein	Förderfähig nach Fachkursprogramm des ESF	Barierrefreier Zugang
Nein	Ja	k. A.	k. A.

Beschreibung
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. 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 im beruflichen Umfeld Anwendungsmöglichkeiten und Praxis-Übungen 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 Einbinden in HTML-Seiten Sprachelemente Variablen, Konstanten und Datentypen Operatoren Kontrollstrukturen Bedingte Anweisungen Schleifen Funktionen Arrays Objekte Cookies Webstorage Fehlerbehandlungen Künstliche Intelligenz (KI) im Arbeitsprozess Vorstellung von konkreten KI-Technologien im beruflichen Umfeld Anwendungsmöglichkeiten und Praxis-Übungen DOM-Manipulation mit JavaScript (ca. 3 Tage) Grundlagen HTML-Selektieren Inhalt und Attribute Styling Events DOM-Elemente anlegen DOM-Elemente kopieren, verschieben, löschen AJAX (ca. 3 Tage) Einführung Funktionsweise Voraussetzungen http-Anfragen XMLHttpRequest-Objekt Synchrone und asynchrone Requests Web Services/Übertragungen: - JSON - XML/XML-Response Frameworks/Libraries (ca. 2 Tage) Eigene Bibliothek erstellen jQuery Vor- und Nachteile Projektarbeit (ca. 5 Tage) Zur Vertiefung der gelernten Inhalte Präsentation der Projektergebnisse JavaScript Vertiefung (ca. 6 Tage) Programmierrichtlinien ECMA-Script-Versionen Globaler und lokaler Scope, Blockscope Arrow-Funktionen, Unterschied zu klassicher Syntax DOM: das Event-Objekt Rest-Parameter Array-Methode High-Order-Funktionen für Arrays Spread-Syntax, Destructuring Objekte anlegen mit Konstruktoren, Klassen, Factories Getter und Setter, Dynamische Attribute Prototyping, Objekte vererben Maps- und Set-Collection anlegen und verwalten Iteratoren und Generatoren NodeJS (ca. 4 Tage) Aufbau und Installation Module NPM Webserver erstellen (Express) Eigene Middleware REST-Methoden GET und POST Datenübertragung Dateien auf Server hochladen Kommunikation mit MySQL-Datenbank Fetch-Syntax für AJAX-Anfragen Promise für asynchrone Funktionen Websockets Canvas-Element Formen zeichnen Füllmethoden Pixelgrafiken einbinden und animieren Single Page Application (ca. 3 Tage) ReactJS: - Einführung, theoretische Betrachtung, Installation - Virtuelle DOM Funktionsweise und Vorteile - Komponenten, Verschachtelung, Parameterübergabe - Inhaltsupdate, Eventlistener VueJS: - Einführung, theoretische Betrachtung - Virtuelles DOM, Bidirektionale Datenbindung - Expressions, Direktiven, Bindings - Eigene Direktiven, Computed Properties Komponenten Projektarbeit (ca. 7 Tage) Zur Vertiefung der gelernten Inhalte Präsentation der Projektergebnisse Änderungen möglich. Die Lehrgangsinhalte werden regelmäßig aktualisiert.

Beschreibung

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.

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 im beruflichen Umfeld
Anwendungsmöglichkeiten und Praxis-Übungen

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
Einbinden in HTML-Seiten
Sprachelemente
Variablen, Konstanten und Datentypen
Operatoren
Kontrollstrukturen
Bedingte Anweisungen
Schleifen
Funktionen
Arrays
Objekte
Cookies
Webstorage
Fehlerbehandlungen

Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI-Technologien im beruflichen Umfeld
Anwendungsmöglichkeiten und Praxis-Übungen

DOM-Manipulation mit JavaScript (ca. 3 Tage)
Grundlagen
HTML-Selektieren
Inhalt und Attribute
Styling
Events
DOM-Elemente anlegen
DOM-Elemente kopieren, verschieben, löschen

AJAX (ca. 3 Tage)
Einführung
Funktionsweise
Voraussetzungen
http-Anfragen
XMLHttpRequest-Objekt
Synchrone und asynchrone Requests
Web Services/Übertragungen:
- JSON
- XML/XML-Response

Frameworks/Libraries (ca. 2 Tage)
Eigene Bibliothek erstellen
jQuery
Vor- und Nachteile

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

JavaScript Vertiefung (ca. 6 Tage)
Programmierrichtlinien
ECMA-Script-Versionen
Globaler und lokaler Scope, Blockscope
Arrow-Funktionen, Unterschied zu klassicher Syntax
DOM: das Event-Objekt
Rest-Parameter
Array-Methode
High-Order-Funktionen für Arrays
Spread-Syntax, Destructuring
Objekte anlegen mit Konstruktoren, Klassen, Factories
Getter und Setter, Dynamische Attribute
Prototyping, Objekte vererben
Maps- und Set-Collection anlegen und verwalten
Iteratoren und Generatoren

NodeJS (ca. 4 Tage)
Aufbau und Installation
Module
NPM
Webserver erstellen (Express)
Eigene Middleware
REST-Methoden
GET und POST
Datenübertragung
Dateien auf Server hochladen
Kommunikation mit MySQL-Datenbank
Fetch-Syntax für AJAX-Anfragen
Promise für asynchrone Funktionen
Websockets
Canvas-Element
Formen zeichnen
Füllmethoden
Pixelgrafiken einbinden und animieren

Single Page Application (ca. 3 Tage)
ReactJS:
- Einführung, theoretische Betrachtung, Installation
- Virtuelle DOM Funktionsweise und Vorteile
- Komponenten, Verschachtelung, Parameterübergabe
- Inhaltsupdate, Eventlistener
VueJS:
- Einführung, theoretische Betrachtung
- Virtuelles DOM, Bidirektionale Datenbindung
- Expressions, Direktiven, Bindings
- Eigene Direktiven, Computed Properties Komponenten

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

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

Schlagworte
html, photoshop, dreamweaver, webprogrammierung, ajax

Gelistet in folgenden Rubriken:
Informations- und Kommunikationstechnik » Programmierung » Sprachen für die Webentwicklung » HTML, CSS und JavaScript

Aktionen

Anbieter

Frontend-Entwickler:in