Meine erste Website

Die Teilnehmer:innen lernen, wie eine professionelle Website technisch, strukturell und gestalterisch aufgebaut ist. Webdesign-Grundprinzipien werden durchgehend in jedem Lernschritt mitvermittelt.

Technische Grundlagen

•         Domain und Hosting: Auswahlkriterien, Anbietervergleich, technische Anforderungen

•         Serverumgebung: PHP, Datenbank (MySQL), SSL-Zertifikate, FTP/SFTP-Zugang

•         Grundlagen der Webtechnologien: HTML, CSS, JavaScript im Überblick (kein Programmieren erforderlich)

•         Browserverhalten und Kompatibilität verstehen

Webdesign

•         Layout-Grundlagen: Raster, Weißraum, visuelle Hierarchie

•         Typografie im Web: Schriftauswahl, Schriftgrößen, Zeilenabstände, Lesbarkeit

•         Farbtheorie und Farbpsychologie für Webauftritte

•         Markenidentität (Corporate Design) auf der Website konsistent umsetzen

•         Responsive Design: Darstellung auf Smartphone, Tablet und Desktop von Anfang an mitdenken

•         Usability und User Experience (UX): nutzerzentrierte Gestaltung

Strukturplanung und Informationsarchitektur

•         Seitenhierarchie und Navigation strategisch planen

•         Inhaltstypen unterscheiden: Seiten, Beiträge, Kategorien, Schlagwörter

•         Nutzerführung (User Journey) und Conversion-Pfade konzipieren

•         Wireframes und Sitemap erstellen

Sicherheitstechnische Grundlagen

•        Impressum, Datenschutzerklärung, Cookies

•        Barrierefreiheit nach Barrierefreiheitsgesetz (BFSG, ab Juni 2025 Pflicht)

•         Urheberrecht für Bilder, Texte und Schriften im Web

•         Sicherheit: HTTPS, Backups, Updates, Zwei-Faktor-Authentifizierung

Die Teilnehmer:innen lernen verschiedene Content-Management- und Website-Baukastensysteme im Vergleich kennen und vertiefen die Bedienung am Beispiel von WordPress als praktisches Anwendungsprojekt.

Baukastensysteme im Vergleich

•         Open-Source-CMS vs. proprietäre Baukastensysteme: Vor- und Nachteile

•         Übersicht gängiger Systeme (z.B. WordPress, Wix, Squarespace, Jimdo, Webflow)

•         Auswahlkriterien: Funktionsumfang, Kosten, Erweiterbarkeit, Datenhoheit

•         Hosted vs. Self-hosted: Welche Variante passt zu welchem Geschäftsmodell?

•         Migration und Wechselmöglichkeiten zwischen Systemen

Praxisprojekt WordPress: Bedienung & Konfiguration

•         Installation und Grundkonfiguration eines WordPress-Systems

•         Dashboard und Menüführung im Detail

•         Themes verstehen, auswählen und sicher anpassen

•         Block-Editor (Gutenberg) für die Gestaltung von Inhalten und Templates

•         Full-Site-Editing: moderne WordPress-Konzepte anwenden

•         Plugins: Auswahl, Installation, Sicherheitsbewertung und Wartung

Benutzerverwaltung und Performance

•         Benutzerrollen und Rechtevergabe (Administrator, Redakteur, Autor)

•         Mehrbenutzerbetrieb sicher organisieren

•         Performance-Grundlagen: Ladezeiten, Caching, Content Delivery

•         Wartung: Updates, Backups, Sicherheits-Monitoring

Die Teilnehmer:innen lernen, digitale Medien strukturiert in die Website einzubinden, ressourcenschonend zu optimieren und barrierefrei aufzubereiten. Der Fokus liegt auf der Verwendung und Verwaltung von Medien im CMS – nicht auf allgemeiner Bild- oder Videobearbeitung.

Medienverwaltung im CMS

•         Mediathek: Bilder, Videos und Dokumente strukturiert organisieren

•         Sinnvolle Dateibenennung und Ordnerstruktur für SEO und Auffindbarkeit

•         Metadaten verwalten: Titel, Beschreibung, Copyright-Hinweise

•         Externe Mediendienste einbinden (z.B. YouTube, Vimeo) mit DSGVO-Konformität

Bildoptimierung für das Web

•         Web-Dateiformate verstehen: JPEG, PNG, WebP, AVIF, SVG – wann welches Format?

•         Bildgrößen und Auflösungen für verschiedene Endgeräte

•         Komprimierung mit Plugins (z.B. ShortPixel, EWWW, Smush) zur Ladezeit-Reduktion

•         Automatisierte Bildoptimierung in WordPress einrichten

•         Lazy Loading: Bilder erst bei Bedarf laden

Barrierefreiheit von Medien (BFSG-konform)

•         Alt-Texte: aussagekräftige Bildbeschreibungen verfassen

•         Bildunterschriften, Titelattribute und Beschreibungstexte richtig einsetzen

•         Kontraste und Lesbarkeit von Text auf Bildern prüfen

•         Untertitel und Transkripte für Videoinhalte

•         Tastatur-Navigation und Screenreader-Tauglichkeit von Medien

Strukturierte Inhalts-Erstellung

•         Seiten und Beiträge mit dem Block-Editor strukturiert aufbauen

•         Überschriften-Hierarchie (H1-H6) für SEO und Barrierefreiheit

•         Integration von Kontaktformularen, Newsletter-Anmeldung, Analyse-Tools

•         Wiederverwendbare Blöcke und Vorlagen anlegen

SEO-Grundlagen für Medien und Inhalte

•         Seiten-Titel, Meta-Beschreibungen, URL-Struktur

•         Dateinamen und Alt-Texte als SEO-Faktoren

•         Strukturierte Daten (Schema.org) als Grundlage

•         Sitemaps und Suchmaschinen-Anbindung

Nachhaltige Webentwicklung

•         Ressourcenschonende Medienverwendung als Beitrag zur ökologischen Nachhaltigkeit

•         CO2-Fußabdruck von Websites verstehen und reduzieren

•         Green Hosting und nachhaltige Infrastruktur