Termine:
Über den Workshop
An wen richtet sich der Workshop?
Dieser Workshop richtet sich an Teilnehmer, die bereits sicher im Umgang mit ihren Web-tools sind, die in der Lage sind sauberes und semantisches Markup zu schreiben und mit einfachem CSS ihr HTML grundlegend gestalten können.
Worum geht es?
Erzeugen von strukturiertem, skalierbarem CSS; Kennenlernen von CSS-Layout Konzepten; Überblick über Erweiterungen und weiterführende Themen im CSS Kontext gewinnen; eigenes Layout aufbauen.
Was muss ich mitbringen?
Eigenen Computer mit Web-Editor, FTP Client, Zugang zum eigenen ADV Account, gutes semantisches HTML Markup aus den HTML Workshops, grundlegendes CSS für ihr Markup.
Material
Übung 1
Laden Sie das Mockup für die Dive.is About Seite herunter und versuchen Sie, zusammen mit Ihrem Nachbarn, sinnvolle Komponenten zu identifizieren. Vergeben Sie im nächsten Schritt passende, semantische Klassennamen für die Komponenten und deren Bausteine. Notieren Sie die Namen der Komponenten als Kommentare direkt in den HTML Code des Dokuments.
Für diese Übungen haben Sie 15 Minuten Zeit.
Übung 2
Laden Sie das Dive.is Paket herunter und versuchen Sie die gegebenen Klassen in den Stylesheets dem HTML zuzuordnen, so dass im Ergebnis die Seite im gewünschten Design dargestellt wird.
Für diese Übungen haben Sie 30 Minuten Zeit.
Übung 3
Laden Sie das Acme Hosting Paket. Im Verzeichnis “Mockup” finden Sie Design Mockups für die verschiedenen Seiten. Wählen Sie eines aus und gehen Sie die folgenden Schritte durch:
- Step 1: Componenten identifizieren
- Step 2: sinnvolle semantische Klassennamen vergeben (ggf. BEM-style)
- Step 3: versuchen das Design aus dem Mockup zu realisieren
- Step 4: freuen :)
