Meine aktuellen Schulungsthemen

Portrait von Jens Grochtdreis

Die folgenden Übersichten geben einen Eindruck von der inhaltlichen Bandbreiten meiner Schulungen. Die Themenkomplexe können je nach Bedarf erweitert oder zusammengestrichen werden. Je nach Wunsch gebe ich im Wesentlichen einen Überblick oder leite auch praktische Tests an. Themen wie "Responsive Webdesign" und "CSS3" eignen sich nicht nur für Entwickler. Auch Designer und Konzepter können von besserem Wissen über diese Themenkomplexe profitieren.

Flexbox

Mit Flexbox gibt es endlich eine Layouttechnik für das Web. Nur ältere Internet Explorer (bis einschliesslich Version 9) können mit dieser Technik nichts anfangen. Es ist Zeit, diese mächtige und bequeme Technik zu erlernen. Die Schulung besteht aus folgenden Themen:

  • Neue Begriffe
  • So funktioniert Flexbox
  • Die Achsen
  • Die Richtungen
  • Umbrüche
  • Umsortieren
  • Schrumpfen und Wachsen
  • Flexbox als Progressive Enhancement
  • Feature Detection
  • Flexbox in der Praxis
    • Eine Tagliste ganz einfach erstellt
    • Eine horizontale Navigation
    • Tastaturreihenfolge
    • Container mit gleicher Höhe
  • Flexbox-Tools
  • Tipps für die Praxis
  • Lesenswertes

Modulare Webentwicklung

Mögliche Inhalte der Schulung sind folgende Themen:

  • Seite als Ansammlung von Modulen
  • Kurz betrachtet: Atomic Design
  • Trennung von Layout und Modulen
  • Spezifität und Kaskade
  • Unterschiedliche Sichtweisen auf das CSS
  • Richtiger Umgang mit Klassen
    • Modifikatoren
    • (Unpraktische) Klassennamen
  • BEM
  • Living Styleguides
  • Tools zur Codeanalyse
  • Modularen Code mit Sass schreiben
  • gute Blindtexte und Platzhalterbilder

Frontend für Backendentwickler

HTML und CSS sind integraler Bestandteil der täglichen Arbeit von Softwareentwicklern. Vielen fehlt aber leider das Detailwissen. Zudem lässt sich speziell CSS mit keiner anderen Technik vergleichen.

Es ist also an der Zeit, die Grundkonzepte der beiden wichtigen Frontend-Techniken zu vermitteln. Wir schauen uns die Semantik von HTML an, reden über Browsertests. Wichtig ist natürlich ein Verständnis der Kaskade, der Spezifität, dem Geltungsbereich von Styles. Wir reden über Floats und schauen uns die Funktionsweise von Grids an.

Mögliche Inhalte der Schulung sind folgende Themen:

  • Grundlegende Differenzen zwischen Frontend und Backend
  • Die Browserlandschaft
  • POSH (Plain Old Semantic HTML)
  • HTML - Die Basics
    • Bilder
    • Responsive Images
    • Navigation
    • Tabellen
    • Formulare
  • CSS - Die Basics
    • Selektoren
    • Die Kaskade
    • Spezifität
    • Das Boxmodell
    • Floats
    • Positionierung
  • CSS-Reset oder Normalisierung?
  • Ideen für ein Debugging-Stylesheet

Barrierefreiheit (Accessibility)

Mögliche Inhalte der Schulung sind folgende Themen:

  • Sinn
  • Accessibility ist Teamaufgabe, kein Entwicklerproblem
  • Betroffene/Nutznießer
  • POSH (Plain Old Semantic HTML)
  • Barrierefreiheit ist nicht nur für Blinde
  • Reale Probleme von Menschen mit Behinderungen
  • Die WCAG 2
  • Inhalte verstecken
  • Barrierefreiheit und Javascript
  • Webseiten mit WAI-ARIA anreichern
  • Wie funktionieren Screenreader?
  • Screenreader und Semantik
  • Ein paar Screenreader-Beispiele
  • Tools
  • Tastaturfokus
  • Kurztest auf Barrierefreiheit
  • Barrierefreiheit muss nicht häßlich sein
  • wichtige Infoseiten

Sass: CSS im Team und modular entwickeln

Mögliche Inhalte der Schulung sind folgende Themen:

  • Installation
  • Projektorganisation
  • Namensgebung
  • Code-Output
  • Die SCSS-Syntax
  • BEM mit Sass
  • Variablen
  • Mit Sass rechnen
  • Mixins erstellen und nutzen
  • Platzhalter
  • Mixins vs. Platzhalter
  • Funktionen
  • Die Sass-eigenen Farbfunktionen
  • Die if-Direktive
  • Der for-Loop
  • Interpolierung
  • Listen
  • Maps
  • Linktipps

Bootstrap 4

Botstrap ist mittlerweile zu einer Art Industriestandard für Frontend-Frameworks geworden. Die Nutzung hilft, einheitlichen, gut dokumentierten Code zu schreiben. Es gibt zahllose Erweiterungen, die auf dem Toolset aufbauen.

Leider wird Bootstrap viel zu oft falsch genutzt. Unnötig aufgeblähtes CSS ist das Ergebnis. Dagegen kann an etwas tun. Es hilft, die Eigenarten und Bestandteile von Bootstrap zu kennen.

Mögliche Inhalte der Schulung sind folgende Themen:

  • Installation
  • Die Variablen
  • Der Wrapper
  • Das Grid
  • Helferklassen
  • Acessibility
  • Komponenten/Module
  • Navigation(en)
  • Tabellen
  • Listen
  • Alert
  • Das Media-Object
  • Cards
  • Linktipps

Responsive Webdesign - Webseiten für alle Devices

Responsive Webdesign ist in erster Linie kein technisches Problem. Es ist ein konzeptionelles Problem. Alle am Projekt Beteiligten benötigen die richtige Sicht auf die Dinge. Sie müssen begreifen, dass die meisten Vorgehensweisen der Vergangenheit und die sicher geglaubten Wahrheiten heute nichts mehr Wert sind. Es sollte ein neuer Blick auf unsere Produkte entstehen, neue Arbeitsmethode sollten üblich werden.

Deshalb ist dieser Workshop so angelegt, dass auch Projektmanager, Konzepter, Designer, Kundenberater, Kunden viele wichtige Informationen bekommen. Für sie werden die Technikdetails ausgespart.

Entwickler bekommen die Möglichkeit, einige technische Probleme selber zu lösen. Wesentliche Inhalte der Schulung sind folgende Themen:

  • theoretischer Unterbau: Das Web ist per se flexibel!
  • Was ist Responsive Webdesign?
  • Brauchen wir Responsive Webdesign?
  • Wofür optimieren?
  • Standardbreiten?
  • Viewport und Mediaqueries
  • Der tägliche Testwahnsinn
  • mobile first oder desktop first?
  • Mausinteraktionen und Touchinterfaces
  • Technische Fähigkeiten der Browser
  • Unterschiedliche Layoutkonzepte
  • Tabellen
  • Bilder
  • Navigationen
  • Links und Mausinteraktionen
  • Ausblenden von Inhalten
  • Seitengrößen und Performance
  • Wir benötigen einen neuen Workflow!
  • Module und Living Styleguides
  • Link- und Buchtipps

Formulare

Wesentliche Inhalte der Schulung sind folgende Themen:

  • Die Konstruktion eines Formulars
  • Formularelemente und Attribute mit Fokus auf HTML5
  • Label und Placeholder
  • CSS für Formulare
  • Validierung im Frontend
  • Best Practices für Formulare

Einstieg in HTML5

Mögliche Inhalte der Schulung sind folgende Themen:

  • Was soll HTML5?
  • Was gehört alles zu HTML5?
  • Die neuen semantischen Elemente
  • Die neuen Formularelemente
  • Die eingebaute Formularvalidierung
  • Das Videoelement
  • Das Audioelement
  • Responsive Images
  • Browsersupport für die neuen Techniken
  • Polyfills - neue Techniken für "Nichtkönner"
  • wichtige Infoseiten und Tools/Frameworks

CSS3 in der Praxis

Schon seit einigen Jahren können wir mit CSS dynamische und interessante Oberflächen erschaffen und dabei auf unnötige Bilder und JavaScript verzichten. In diesem Workshop entdecken wir die große Welt von CSS3:

  • Orientierung über Browserfähigkeiten
  • Strategien für den Umgang mit den alten IE-Versionen
    • Javascript-Polyfills
    • IE-Filter
    • Graceful Degredation
    • Aufwand für die Sonderbehandlung
    • Konkrete Hacks
    • CSS nur dem IE servieren
  • beliebte CSS3-Features - die Basics
    • neue Selektoren und Pseudoklassen
    • runde Ecken (sie sterben nicht aus!)
    • Schatten (box-shadow und text-shadow)
    • Verläufe
    • Transparenz
    • individuelle Schriften mit @font-face
    • Animationen, Transitionen, Transformationen
    • mehrere Hintergrundbilder
    • outline
    • text-overflow
  • intelligentes und schlechtes Fallback für "Nichtkönner"
  • CSS3 zusammenklicken
  • Linktipps