AKTIV

Webentwicklung

Webstandards, JavaScript und LLM-gestützte Entwicklungspraxis

Institution: Universität GrazProgramm: Masterstudium Digital HumanitiesFormat: Lehrveranstaltung mit Vorlesungs- und ÜbungsanteilenSeit 2017, aktueller Materialstand 20268 Sitzungen90 Minuten

Der fortlaufend weiterentwickelte Kurs vermittelt Webstandards mit HTML und CSS sowie JavaScript von grundlegenden Sprachkonstrukten bis zu DOM, Ereignisverarbeitung und Datenzugriff. Neuere Durchführungen beziehen LLMs als Entwicklungsassistenz ein; die verlinkten Materialien verbinden den aktuellen Foliensatz mit weiterhin fachlich verwendbaren Übungen aus dem historischen Kursbestand.

Dozent: Dr. Christopher Pollin

Kontakt: christopher.pollin@dhcraft.org

Lernziele

  • HTML5-Dokumente strukturiert erstellen und semantisch korrekt auszeichnen
  • CSS für Layout, Styling und responsive Designs einsetzen
  • JavaScript-Grundlagen verstehen und anwenden (Variablen, Funktionen, DOM-Manipulation)
  • Mit Bootstrap moderne, responsive Webseiten entwickeln
  • Event Handling und asynchrone Programmierung mit JavaScript
  • JSON-Daten verarbeiten und dynamische Inhalte generieren

Voraussetzungen

  • Grundlegende Programmierkenntnisse

Sitzungen

1
SITZUNG 1

HTML

Grundlagen von HTML5: Struktur, semantische Elemente und Best Practices

Themen
  • HTML5-Grundstruktur und Dokumentaufbau
  • Semantische HTML-Elemente
  • Formulare und Eingabeelemente
  • HTML5 APIs und neue Features

MATERIALIEN:

HTML und LLM-gestützte Entwicklung MDN HTML Guide

Aktivitäten:

  • Hands-on: helloworld.html erstellen
  • Hands-on: lotr-index.html strukturieren
2
SITZUNG 2

CSS

Cascading Style Sheets: Layout, Styling und responsive Design

Themen
  • CSS-Selektoren und Spezifität
  • Box-Model und Positioning
  • Flexbox und Grid Layout
  • Responsive Design mit Media Queries
  • CSS3-Animationen und Transitions

MATERIALIEN:

CSS MDN CSS Styling Basics

Aktivitäten:

  • Hands-on: style.css für lotr-index.html erstellen
3
SITZUNG 3

Bootstrap 5.3

Moderne responsive Webseiten mit Bootstrap Framework

Themen
  • Bootstrap Grid System
  • Bootstrap Komponenten (Navbar, Cards, Forms)
  • Utility Classes
  • Responsive Breakpoints
  • Bootstrap Icons

MATERIALIEN:

Bootstrap examples Bootstrap documentation

Aktivitäten:

  • Hands-on: Bootstrap für index.html implementieren
4
SITZUNG 4

Einführung: Internet und Web

Technische Grundlagen des Internets und World Wide Web

Themen
  • Geschichte des Internets und WWW
  • Client-Server-Architektur
  • HTTP-Protokoll
  • Browser und JavaScript Runtime
  • Web Standards und W3C

MATERIALIEN:

Einführung Web-Entwicklung JavaScript and the Browser JavaScript introduction
5
SITZUNG 5

JavaScript Fundamentals 1 - Running JS | Values, Types, and Operators

Grundlagen von JavaScript: Ausführung, Datentypen und Operatoren

Themen
  • JavaScript ausführen (Browser Console, Node.js)
  • Primitive Datentypen (Number, String, Boolean)
  • Operatoren (arithmetisch, logisch, Vergleich)
  • Type Coercion und Konvertierung
  • Truthy und Falsy Values

MATERIALIEN:

Übungen: JavaScript Fundamentals 1 Eloquent JavaScript: Introduction Eloquent JavaScript: Values, Types, and Operators JavaScript Fundamentals 1 JavaScript-Grundlagen im aktuellen Kurs JavaScript Fundamentals 1 36 min

Aktivitäten:

  • Hands-on: Hello World in JavaScript
  • Hands-on: Mood Color Picker mit Bootstrap 5
6
SITZUNG 6

JavaScript Fundamentals 2 - Program Structures | Functions | Data Structures

Kontrollstrukturen, Funktionen und Datenstrukturen in JavaScript

Themen
  • Kontrollstrukturen (if, switch, loops)
  • Funktionen definieren und aufrufen
  • Scope und Closures
  • Arrays und Array-Methoden
  • Objects und Properties
  • JSON-Datenformat

MATERIALIEN:

Übungen: JavaScript Fundamentals 2 Eloquent JavaScript: Program Structure Eloquent JavaScript: Functions Eloquent JavaScript: Data Structures JavaScript Fundamentals 2 JavaScript-Grundlagen im aktuellen Kurs Program Structure 29 min Bean Counting exercise

Aktivitäten:

  • Hands-on: Looping a triangle
  • Hands-on: FizzBuzz
  • Hands-on: Bean counting
  • Hands-on: Chessboard
  • Hands-on: More Mood for the Mood Color Picker
7
SITZUNG 7

JavaScript Fundamentals 3 - JSON | DOM | jQuery | Event Handling

Document Object Model, Event Handling und dynamische Webseiten

Themen
  • Document Object Model (DOM)
  • DOM-Manipulation (createElement, appendChild, etc.)
  • Event Handling und Event Listeners
  • JSON parsen und erstellen
  • Fetch API für HTTP-Requests
  • LocalStorage und SessionStorage

MATERIALIEN:

Übungen: Datenstrukturen, DOM und Ereignisse Eloquent JavaScript: The Document Object Model Eloquent JavaScript: Handling Events Data Structures jQuery Event Handling JavaScript-Grundlagen im aktuellen Kurs The sum of a range jQuery Event Handling 23 min

Aktivitäten:

  • Hands-on: Fetch API verwenden
  • Hands-on: DOM-Manipulation und Event Handling
8
SITZUNG 8

JavaScript Fundamentals 4 - The Journey Just Started

Fortgeschrittene JavaScript-Konzepte und Best Practices

Themen
  • JavaScript Coding Styles und Best Practices
  • Object-oriented Programming in JavaScript
  • Arrow Functions (ES6)
  • Method Chaining
  • JavaScript Objects und Keyword 'this'
  • Cookies vs LocalStorage vs SessionStorage
  • Moderne JavaScript-Loops

MATERIALIEN:

Übungen: JavaScript Fundamentals 4 Übungen: Fetch API und JavaScript Fundamentals 5 Javascript Objects and Keyword this 9 min JavaScript Loops Made Easy 11 min JavaScript ES6 Arrow Functions Tutorial 10 min JavaScript Cookies vs Local Storage vs Session 15 min JavaScript and Object-oriented Programming 7 min JavaScript Fetch API 7 min

Aktivitäten:

  • Hands-on: Advanced JavaScript Exercises

Ressourcen

Wesentliche Werkzeuge

Empfohlene Literatur