Bauen Sie Ihre Kenntnisse aus in weiterführenden HTML CSS Kursen.

Foto: HTML CSS Fortgeschrittene

HTML und CSS vertiefen, mehr Wissen „Drumherum“

In den HTML CSS Aufbaukursen lernen Sie mehr über

  • HTML und CSS
  • CSS Layout
  • Responsives Webdesign

und das „Drumherum“ wie

  • Bildbearbeitung für das Web
  • Konzeption und Screendesign
  • Suchmaschinenoptimierung (SEO)

Zielgruppe

Sie haben schon etwas Erfahrung mit HTML und CSS und möchten das Thema vertiefen. Vielleicht haben Sie schon HTML CSS Kurse besucht oder sich etwas HTML und CSS autodidaktisch angeeignet.

Ihre Änderungen am CSS-Code haben funktioniert, nur das Layout tut nicht was es soll. Schriftarten, Textgrößen und die Farbgestaltung haben Sie schon im Griff aber wie können Sie für unterschiedliche Geräte gestalten?

Die Website ist fertig, aber in google & co unsichtbar.

Sie arbeiten schon lange mit HTML und CSS und möchten Ihr Wissen aktualisieren.

Welche weiterführenden HTML CSS Kurse gibt es?

Im Kurs „Webseitengestaltung mit HTML5 und CSS – Aufbaukurs intensiv“ können Sie auch einzelne Tage buchen.

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

      Beispiel-Website

      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.

      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.

      Beispiel-Website

      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.

      Beispiel-Website

      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