Responsive Webdesign mit HTML5 und CSS3 – 20h

Volkshochschule Friedrichshain-Kreuzberg, Wochenendkurs, Freitagabend, Samstag, Sonntag
Grundlagen zum Erstellen flexibler Layouts
Responsives Webdesign bedeutet, das Layout einer Website so aufzubauen, dass es sich an den Bildschirm anpasst.
Zu einem großen Teil wird dieses Verhalten durch CSS bewirkt. Daher sind Kenntnisse moderner Layout-Methoden wie beispielsweise Flexbox oder CSS Grid notwendig, wenn Sie ein Template (Layout) erstellen oder ändern wollen.
Designs anpassen oder neu erstellen – auch in WordPress & co mit CSS
Ihr Wissen ist auf die Themes und Templates von Content Management Systemen wie WordPress, Joomla oder Typo3 übertragbar. Sie können damit Designvorlagen im System anpassen oder eigene Designs realisieren.
Voraussetzungen
HTML und CSS-Kenntnisse, versierter Umgang mit Computer und Dateiablage.
Konzept
Freitag – 4h
Anforderungen an Website Templates
- Mobile First Ansatz: Das kleinste Gerät hat Vorrang in Konzeption und Umsetzung
- Entwicklerwerkzeuge einrichten
- Tests von Website Templates. Worauf kommt es an?
Grundlagen CSS-Layout, CSS-Box-Modell
- HTML5 Strukturelemente am Beispiel der Kurswebsite
- Wie verhalten sich Layoutcontainer?
Besonderheiten des CSS-Box-Modells, Box-Modell umstellen, Layoutberechnung vereinfachen - Relative Maße, Höhen und Breiten: min-width, min-height, max-width, max-height, vh, vw
- Layout zentrieren
Samstag – 8h
Klassische Layoutmethoden zur Anordnung von einzelnen Elementen
- absolute und relative Positionierung mit CSS
- Floats
Eine einspaltige Grundvariante für alle
- Layoutcontainer mit HTML5 Semantics
- Flexibilität durch relative Maße
- Spielräume statt fester Höhen- und Breitenangaben
Charakteristika Responsiver Web-Layouts
- Anpassung des Layouts an unterschiedliche Viewports
- Stufenlose Anpassung statt Arbeiten für bestimmte Bildschirmgrößen
Flex: Die Theorie
- Layouttechnik für responsive Web-Layouts – Flex
Sonntag – 8h
Flex im Einsatz – Das einspaltige Layout für größere Displays umorganisieren
- Das mehrspaltige Gestaltungsraster erstellen
- Meta-Viewport
- Breakpoints über Media Queries steuern
- Aufbauen der Tablet und Desktop Ansicht der Beispielseite
- Abwärtskompatibilität herstellen
CSS Grid – Gitterdesigns mit CSS realisieren
- Grid verstehen
- Einsatz von Grid, Mischung von Flex und Grid, Abwärtskompatibilität
Die Navigationsleiste für sehr kleine Displays verstecken
- „Hamburger Menü“ ohne JavaScript
Responsive Inhalte (optional)
- Img mit srcset
- Picture Element
Sie erhalten ein ausführliches Skript als PDF.
Webseitengestaltung mit HTML5 und CSS – Aufbaukurs intensiv – 40h

Volkshochschule Treptow-Köpenick
Worum es geht
Sie vertiefen Ihre vorhandenen HTML- und CSS-Kenntnisse um wichtige Kernthemen moderner Webseitengestaltung. Lernen Sie, zeitgemäße Webdesigns selbstständig zu erstellen und/oder zu pflegen.
- Montag: Bildbearbeitung für das Web mit Adobe Photoshop
- Dienstag: Konzeption und Screendesign
- Mittwoch: Responsive Webdesign 1 – „Mobile First“, CSS Flexbox
- Donnerstag: Responsive Webdesign 2 – CSS Grid, „Hamburger Menü“
- Freitag: Suchmaschinenoptimierung, Rechtliche Anforderungen an Websites, Barrierefreies Webdesign
Die Module können auch einzeln belegt werden. Bei den einzelnen Modulen finden Sie detaillierte Inhaltsangaben zu jedem Tagesmodul.
Voraussetzungen
Alle Module: Sicherer Umgang mit Internet und Betriebssystem, d. h. Dateiablage, Windows-Explorer oder vergleichbar, Erfahrung mit Textverarbeitung.
Mittwoch, Donnerstag und Freitag: HTML- und CSS-Grundkenntnisse
Responsive Webdesign 1 – „Mobile First“, CSS Flexbox
Eines der anspruchsvollsten Themen in CSS ist das Layout. Inzwischen haben sich neben den klassischen Layout-Methoden zwei neue Layout Modelle etabliert: Flexbox und CSS Grid. Während CSS Flex vor allem für zeilenweise aufgebaute responsive Layouts geeignet ist, wird Grid für komplexere Rasterlayouts verwendet.
Im Kurs machen Sie sich zunächst mit dem CSS Box Modell vertraut und lernen, wie sich Layoutcontainer normalerweise verhalten. Die Basisvariante für das Layout ist einspaltig und in erster Linie für das Smartphone optimiert. Sie wird für Tablets und Desktop mit CSS Flexbox mehrspaltig ausgebaut. Es entsteht ein robustes Layout, das sich der Bildschirmgröße anpasst.
Voraussetzungen
HTML- und CSS-Grundkenntnisse, sicherer Umgang mit Internet und Betriebssystem, d. h. Dateiablage, Windows-Explorer oder vergleichbar, Erfahrung mit Textverarbeitung.
Konzept
Anforderungen an Website Layouts
- Mobile First: in erster Linie für Mobilgeräte
- Responsivität
Entwickler-Werkzeuge zum Testen
- CSS, JavaScript deaktivieren
- Struktur beurteilen
- verschiedene Viewports
- HTML- und CSS Validator
- Browser-Entwicklertools
Grundlagen CSS – Layout, CSS-Box-Modell
- HTML5 Strukturelemente am Beispiel der Kurswebsite
- Kennenlernen der Besonderheiten des CSS-Box-Modells und Vereinfachen der Layoutberechnung
- Höhen und Breiten: width, height, min-width, min-height, max-width, max-height
- Layout zentrieren
Die einspaltige Grundvariante
- Layoutcontainer mit HTML 5 Semantics
- CSS flexibel und robust: relative Maße für Text und Layoutcontainer, Spielraum statt fixer Höhen und Breiten.
Responsive Webdesign
- Anpassung des Layouts an unterschiedliche Viewports
- Stufenlose Anpassung statt Arbeiten für bestimmte Bildschirmgrößen
Flex: Die Theorie
- Layouttechnik für responsive Web-Layouts – Flex
Flex im Einsatz – Das einspaltige Layout für größere Displays umorganisieren
- Meta-Viewport
- Breakpoints über Media Queries steuern
- Aufbauen der Tablet- und Desktop Ansicht der Beispielseite
- Abwärtskompatibilität
Responsive Webdesign 2 – CSS Grid, „Hamburger Menü“
CSS Grid ist eine effiziente Methode, um komplexe Rasterlayouts umzusetzen. Während mit Flex zeilenbasierte Layouts erstellt werden, ist Grid zweidimensional: Wie in Tabellen können Zeilen und Spalten definiert werden.
Dabei genügt es in HTML alle Layoutcontainer nacheinander zu definieren, ohne extra Markup für die Zeilendefinition. Die Aufteilung des Rasters wird komplett an CSS delegiert. Der HTML-Code bleibt dadurch übersichtlich und schlank.
Ausgehend von einer einspaltigen Grundvariante wird das Tablet- und Desktoplayout der Beispielwebsite mit Grid aufgebaut. Für kleine Viewports wird die Menüleiste versteckt. Sie kann über einen Button ein- und ausgeklappt werden (sog. Hamburger Menü).
Bilder werden für verschiedene Geräte in verschiedenen Größen ausgeliefert. Ein kleines Gerät erhält ein kleines Bild, ein großes Gerät ein größeres. Dabei kann sowohl die Größe als auch die Auflösung berücksichtigt werden. Mit „Responsive Images“ halten Sie die Ladezeiten für Mobilgeräte klein: kein Gerät lädt ein größeres Bild als es darstellen kann.
Voraussetzungen
HTML- und CSS-Grundkenntnisse, sicherer Umgang mit Internet und Betriebssystem, d. h. Dateiablage, Windows-Explorer oder vergleichbar, Erfahrung mit Textverarbeitung.
Konzept
Einführung
- HTML Grundstruktur und CSS des Beispiellayouts
- Einsatzbereiche von Flex und Grid
Gitterdesign mit CSS realisieren – Grid
- Grid – Die Theorie
- Praktischer Einsatz von Grid, Abwärtskompatibilität
CSS für Layouts – klassische Methoden
- absolute und relative Positionierung mit CSS
- optional: Floats und clearing Methoden
Hamburger Menü für kleine Viewports
- Ein schlankes Hamburger Menü ohne JavaScript
Responsive Inhalte
- srcset für Bilder
- Picture Element
Suchmaschinenoptimierung, Rechtliche Anforderungen an Websites, Barrierefreies Webdesign
Optimieren Sie Ihre Website für Google und andere Suchmaschinen. Für mehr Besucher und mehr Umsatz.
Machen Sie sich mit den rechtlichen Anforderungen an Websites vertraut, vermeiden Sie rechtliche Fallstricke und teure Abmahnungen.
Barrierefreie Websites sind zugänglich für alle, unabhängig davon, welche Zugangssoftware genutzt wird. Auch wenn Sie keine rechtlichen Vorgaben berücksichtigen müssen, profitieren Website-Besucher von besserer Zugänglichkeit.
Voraussetzungen
HTML- und CSS-Grundkenntnisse, sicherer Umgang mit Internet und Betriebssystem, d. h. Dateiablage, Windows-Explorer oder vergleichbar, Erfahrung mit Textverarbeitung.
Konzept
Suchmaschinenoptimierung (SEO)
Onpage Faktoren für suchmaschinenfreundliche Websites
- Funktionsweise von Suchmaschinen
- Keyword Recherche und Planung
- Wo die Keywords vorkommen sollten
- Relevanz statt „Keyword-Wüste“
- „Duplikate Content“ und andere Fehler
- Ranking Kriterien
Rechtliche Anforderungen an Websites
- Webimpressum
- DSGVO
- Datenschutzerklärung
- Urheberrecht
- ...
Hier erfolgt keine Rechtsberatung, sondern es geht um eine Sensibilisierung für das Thema und die Risiken, die damit einhergehen.
Accessibility – Barrierefreies Webdesign
- Installation der Testwerkzeuge
- Warum Barrierefreiheit?
- Merkmale barrierefreier Internetseiten am Beispiel
- Website-Tests