Web Development

Web Development

Überblick über Webentwicklung, HTML, CSS, JavaScript, Git, Browser-Tools, UI, UX und Accessibility.

Web Development

Web Development behandelt die Grundlagen moderner Webseiten: Struktur mit HTML, Gestaltung mit CSS, Interaktion mit JavaScript und die Frage, wie digitale Produkte für echte Menschen verständlich, nutzbar und barrierefrei werden.

Das Fach verbindet Technik mit Gestaltung. Eine Webseite soll nicht nur funktionieren, sondern auch sinnvoll aufgebaut, wartbar, responsiv und zugänglich sein.

Worum geht es?

Zentrale Fragen sind:

  • Was ist Frontend-Entwicklung?
  • Wie unterscheiden sich Frontend, Backend und API?
  • Wie entstehen Webseiten aus HTML, CSS und JavaScript?
  • Welche Rolle spielen Git und Browser-Developer-Tools?
  • Wie baut man eine saubere HTML-Grundstruktur?
  • Wie gestaltet man Layout, Farben, Abstände und Schriften mit CSS?
  • Wie reagiert eine Webseite auf Benutzerinteraktionen?
  • Was ist der Unterschied zwischen UI und UX?
  • Warum ist Web Accessibility wichtig?
  • Wie verbessert man eine bestehende Webseite?

Themenbereiche

Web-Grundlagen

World Wide Web, Frontend, Backend, API und die drei Säulen HTML, CSS und JavaScript.

Git und Browser-Tools

Versionierung mit Git, Commits, Branches, GitHub und Entwicklertools im Browser.

HTML

Grundstruktur, Tags, Head-Bereich, Meta-Tags, Navigation, Links, Bilder und Formulare.

CSS

Selektoren, Eigenschaften, Kaskade, Farben, Schrift, Margin, Padding und externe Stylesheets.

Layout und Responsive Design

Flexbox, flexible Bilder, Container, Abstände und Anpassung an verschiedene Bildschirmgrößen.

JavaScript

Interaktion, Events, DOM, dynamische Inhalte, Buttons und API-Daten.

UI und UX

User Interface, User Experience, Personas, Wireframes, Paper Prototypes und Produktauswertung.

Accessibility

Barrierefreiheit, WCAG, POUR, Screenreader, Tastaturbedienung, Alt-Texte und Kontraste.

Übungen

Portfolio-Seite anpassen, Buttons erweitern, digitales Produkt analysieren und Accessibility testen.

Materialgrundlage

Diese Dokumentation basiert auf:

  • Unterrichtsfolien zu Web Development
  • Unterrichtsfolien zu Web Accessibility
  • HTML- und CSS-Cheatsheets
  • Beispielseiten zu Portfolio, Buttons und Accessibility
  • Übungen zur Analyse digitaler Produkte wie Discord, Instagram, Pinterest, Teams, WebUntis und WhatsApp

Merksatz

Gute Webentwicklung besteht aus Struktur, Gestaltung, Verhalten und Zugänglichkeit. Wenn eines davon fehlt, fühlt sich die Seite unfertig an.

Zuletzt aktualisiert: 6. Juni 2026