Ziel der Veranstaltung
Im Kurs Webdesign (301 ESSENTIALS: Digitalkompetenzen) lernen Studierende sowohl gestalterische als auch technische Grundlagen des Webdesigns. Die Lehrveranstaltung bietet einen Einblick in aktuelle Frontend-Technologien, darunter HTML, CSS und ansatzweise Javascript.
Zoom-Räume für den Kurs
Zoom-Raum von Matthias
Meeting ID: 953 689 2018
Password: 470116
Unterrichtszeiten
jeweils donnerstags 9:00 bis 12:15 im Pavillon
Unterrichtstermine & Scripte
Achtung: Termin & Inhalt kann sich noch ändern!
- 09.10.25 Grundlagen Webdesign & HTML; Aufgaben-Überblick (Semester); Bewertungskriterien → Script
- 16.10.25 Grundlagen CSS, Grafikformate fürs Web → Script
- 23.10.25 Semantic Web, CSS für Links, Rahmen und Hintergründe → Script
- 30.10.25 Prototyping-Tools, CSS Selektoren, CSS Box Model, Integration von Audio & Video → Script
- 06.11.25 kein Webunterricht – Exkursion nach Wien zu den Erdgesprächen
- 13.11.25 DOM, Flexbox → Script
- 20.11.25 Desktop-Layouts via Grid-Layout
- 27.11.25 Positionieren von Elementen, Media-Queries
- 04.12.25 keine Vorlesung, Zwischenpräsentation
- 11.12.25 Interaction, Webfonts, Webtypografie
- 18.12.25 Responsive Type, Responsive Images, Transitions & Javascript
- 08.01.26 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
- 15.01.26 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
- 22.01.26 Abschlusspräsentation
Prüfungen/Abgaben
- 04.12.25 Zwischenpräsentation: Layout des eigenen Portfolios
- 22.01.26 Abschlusspräsentation:
- alle Übungen sowie das Portfolio sind online auf unserem Server
- Präsentation des eigenen Portfolios (ca. 3min)
Angemeldete Student:innen
alle angemeldeten Studierenden haben einen eigenen Webspace auf dem FK12-Server
Fertigstellung Übungsaufgaben
- die Übungsaufgaben sollten jeweils bis zur nächsten Vorlesung fertiggestellt werden!
- alle eigenen Übungsaufgaben müssen bis zur Abschlusspräsentation eine gemeinsame Startseite haben
- auch bei dieser wird eine gute Gestaltung bewertet!
Prüfungsmodus
- Übungsaufgaben
- mit einer gemeinsamen Startseite, von der aus alle Übungen verlinkt sind.
- Semesterprojekt: eigenes Portfolio
- muss zumindest aus Text & Bildmaterial bestehen
- muss „von Hand“ geschrieben sein, ein rein via KI erzeugtes Arbeitsergebniss wird nicht akzeptiert
- soll auf unterschiedlich großen Bildschirmen gut angesehen werden können (Responsive Design)
- HTML- und CSS-Code der Site muss ohne Fehler sein
Beurteilung
33% Übungsaufgaben
33% Konzept & Design des Schlussprojekts (erstellt mit Sketch, Figma, PenPot oder Adobe XD)
33% HTML/CSS des eigenen Portfolios
Benötigte Software
Bitte installiert Euch folgende, kostenlose Software auf Euren eigenen Rechner:
- Visual Code Studio, sehr leistungsfähiger Code-Editor
- Alternativ könnt Ihr die Open Source Variante VSCodium verwenden (ich nutze diese Variante…). Bitte wählt dafür den für Euch passenden Installer aus, bei neuen Macs ist das die ARM 64bits Version, bei Windows kenne ich mich leider zu wenig aus…
- Mozilla Firefox, mein Lieblings-Browser (open source), u.a. super tauglich, um Websites zu testen
- Cyberduck, zum Hochladen Eurer Sachen auf den Server
Buchenpfehlungen
- MÜNZ, Stefan & Gull Clemens (2014): HTML5 Handbuch; ISBN 978-3645603454
- ZELDMAN, Jeffrey, Marcotte Ethan (2009): Designing with Web Standards; ASIN B00LXNO9EG
- FREEMAN & FREEMANN (2013): HTML und CSS von Kopf bis Fuß; ISDN 978-3-86899-934-1
- KRUG, Stephe (2014): Don't Make Me Think! A Common Sense Approach to Web Usability; ISBN 978-0321965516
- CLARKE, Andy (2015): Hardboiled Web Design; ISBN 978-3-945749-37-1
- CLARKE, Andy (2019): Art Direction for the Web; ISBN: 978-3-945749-77-7
- MEYER, Eric (2017): CSS: The Definitive Guide, 4th Edition; http://shop.oreilly.com/product/0636920012726.do
- KEITH, Jeremy (2016): Resilient Web Design; https://resilientwebdesign.com/
Online-Nachschlagwerke
jeweils sehr viele, detaillierte Informationen und Beispiele zu HTML, CSS, Javascript
weitere, interessante Websites