Web Development

Vertiefungsmodul im Medieninformatik Bachelor

Frontend Development

Prof. Christian Noss & Volker Schaefer

In diesem Kurs geht es, wer hätte es gedacht, um das Thema Frontend Development im Kontext von web-basierten Anwendungen. Wir befassen uns mit den Basistechnolonolgien HTML, CSS und Javascript und werden sehr viele praktische Übungen und Aufgaben bearbeiten und lösen. Wir orientieren uns dabei an der Web Developer Roadmap von Kamran Ahmed.

Sehr passendes Video von codeSTACKr zum Thema WebDev 2020 Roadmap.

Inhalte & Voraussetzungen

HTML

Da HTML das strukturelle Gerüst und somit die absolute Grundlage einer Webseite darstellt, setzen wir uns im Kurs damit auseinander, wie Content mit sinnvollem, effizienten, semantischen Markup abgebildet und zu strukturiert werden kann.

CSS

Zur Einflussnahme auf die Darstellung im Browser befassen wir uns mit den wesentlichen Konzepten und Eigenschaften von Cascading Stylesheets: Selektoren, Eigenschaften, Vererbung, Floats, Positioning, Display, Box Model, Grid und Flexbox. Darüber hinaus schauen wir uns Preprozessoren (SCSS o.Ä.) und CSS Methodologien (BEM, OOCSS) aber auch Strukturierungskonzepte wie Atomic Design und Design Systems an.

Javascript

Zur Abbildung von Anwendungslogik und Interaktion im Browser wird Javascript benutzt. Im Rahmen des Kurses befassen wir uns mit grundlegenden Elementen, wie Variablen, Schleifen oder Funktionen, aber auch die Prototype Chain, das this Keyword und Muster, wie Closures, DOM API und Eventlistener werden adressiert.

Development Tools

Darüber hinaus behandeln wir den Umgang mit Entwicklungstools wie der Developer Konsole im Browser, Taskrunnern (Gulp, Grunt, NPM Script), IDE/ Editor, Package Managers (Yarn, NPM) als auch mit Containervirtualisierung via Docker.

Voraussetzungen

Für das Modul setzen wir voraus, dass Sie die Konzepte, Technologien & Inhalte aus folgenden Modulen beherrschen:

Prüfung

Die Prüfung findet in Form eine Coding Challenge statt. Wir stellen am Prüfungstag Startercode via GitHub Classroom zur Verfügung und werden einige Aufgaben formulieren, die im Rahmen der etwa 4-stündigen Challenge zu realsieren sind.

Termine

HTML Basiscs

Termin
03. April 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Volker Schaefer

HTML Advanced und CSS Basics

Termin
09. April 2020, 10:00 Uhr
Dauer
420 min
Verantwortlich
Christian Noss

CSS Style & Layout, CSS Structure

Termin
24. April 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Christian Noss

SASS, CSS Transitions & Responsive Design

Termin
08. Mai 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Christian Noss

Javascript Advanced 2

Termin
12. Juni 12020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Volker Schaefer

Content Scaffolding, SASS & Custom Properties

Termin
18. Juni 12020, 14:00 Uhr
Dauer
180 min
Verantwortlich
Christian Noss

Hackathon & Responsive Design

Termin
19. Juni 12020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Christian Noss

Responsive Design & CSS Frameworks (Teil 1 & 2)

Termin
02. Juli 12020, 14:00 Uhr // 09. Juli 12020, 14:00 Uhr
Dauer
180 min
Verantwortlich
Christian Noss

Code Reviews CSS Framework Integration // Recap // Vorbereitung Prüfung

Termin
10. Juli 12020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Christian Noss

Fast Lane // Support und Übung für Interessierte

Termin
15. Mai 2020, 11:00 Uhr
Dauer
180 min
Verantwortlich
Christian Noss

Templating in JS // Development-Challenge // Hackday

Termin
19. Juni 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Christian Noss

JavaScript Advanced

Termin
05. Juni 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Volker Schaefer

Javascript Advanced 2

Termin
12. Juni 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Volker Schaefer

Javascript Basics

Termin
22. Mai 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Volker Schaefer

JavaScript Basics 2

Termin
29. Mai 2020, 10:00 Uhr
Dauer
180 min
Verantwortlich
Volker Schaefer

Modularisierung in JS // ??

Termin
10. Juli 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Christian Noss

Single Page Application mit Hilfe von Vue.js

Termin
03. Juli 2020, 10:00 Uhr
Dauer
360 min
Verantwortlich
Jorge Pereira

Thema folgt

Dauer
180 min
Verantwortlich
Christian Noss, Volker Schaefer