Frontend-Entwickler:in

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.

In diesem Lehrgang erlernen Sie die professionelle Frontend-Gestaltung von Webseiten: Das Frontend ist das, was der Nutzer sieht. Daher werden Design und Aufteilung einer Webseite mit HTML und CSS (Cascading Stylesheets) erläutert. HTML ist die unabdingbare Programmiersprache für Webseiten und CSS-Templates sorgen für ansprechende Layouts.

Im nächsten Kursteil erlernen Sie mit JavaScript eine Skriptsprache zur optimalen Gestaltung der Usability, Interaktivität und Animation von Webseiten. Auch wird die Webtechnologie Ajax erläutert, die durch das Konzept der asynchronen Datenübertragung eine Darstellung der Webseite fast ohne Ladezeiten ermöglicht.

Lehrgangsinhalte

Webdesign mit HTML, CSS, Dreamweaver und Photoshop
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

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 für One-Page-Sites

JavaScript (ca. 9 Tage)

• Anwendungen einbinden
• Einstieg in JavaScript/jQuery
• If-then-else
• Variablen
• Data Objekt
• Arry Datentyp
• ScrollTop
• For-Schleife
• Math-Objekt
• Sticky-menu (js/css)
• Menu mit dem scrollen ein-/ausblenden
• Verwendung von vh/vw und calc
• Pflichtangaben Impressum/Datenschutz
• Cookiehinweis
• Front-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-Entwicklung
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

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
• Webservices/Ü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.

Abschlussprüfung: Praxisbezogene Projektarbeiten mit Abschlusspräsentation

Präsenzlehrgänge mit Videotechnik der neuesten Generation:
Der Einsatz von Videokonferenzsystemen gehört zum Lehrgangskonzept von alfatraining. Diese Form von Unterricht trainiert das Arbeiten in einer vernetzten Arbeitsumgebung, wie sie in Industrie und Wirtschaft existiert. In der globalisierten Arbeitswelt arbeiten Firmen heutzutage sowohl firmenintern als auch mit anderen Unternehmen deutschlandweit, europaweit oder weltweit über moderne Kommunikationstechniken und Netzwerke zusammen. Sie lernen im Unterricht den Umgang und Einsatz dieser modernen Techniken kennen.

Wie funktioniert der Unterricht bei alfatraining?
Bei alfatraining findet der Unterricht via alfaview®, einer Videokonferenzsoftware, statt. Die Dozierenden und die Teilnehmenden können sich gegenseitig sehen, hören und miteinander sprechen – live, lippensynchron und in Fernsehqualität! Über den virtuellen Klassenraum alfaview® ist es möglich, dass Sie sowohl mit Dozierenden als auch mit allen Teilnehmerinnen und Teilnehmern Ihres Kurses sprechen und im Team standortübergreifend gemeinsam an Projekten arbeiten. Zusätzliche separate Online-Besprechungsräume eignen sich zur vertraulichen Kommunikation in Kleingruppen.

Wenn Sie den Lehrgang abgeschlossen haben, kennen Sie den kompletten Workflow für ein modernes Webdesign und produzieren benutzerfreundliche und anspruchsvolle Webseiten. Nach dem Lehrgang verfügen Sie über sichere Kenntnisse in der Anwendung von JavaScript und Ajax und sind in der Lage, diese zur Realisierung anspruchsvoller Internet-Anwendungen einzusetzen.

keine Einschränkungen

keine Einschränkungen

keine Einschränkungen

• Berufsförderung der Bundeswehr
• Bildungsgutschein (auch für Weiterbildung während Kurzarbeit)
• Leistungen zur Teilhabe am Arbeitsleben (berufliche Rehabilitation)
• auf Anfrage

• auf der Internetseite des Bildungsanbieters