Workshop 1 (23.10.2018)

• Initial Setup
• -> PDF HTML Einführung
• -> PDF CSS Einführung

Workshop 2 (30.10.2018)

• Schulterblick?
• -> 101 HTML (wiederholung)
• -> 101 CSS (wiederholung)
• Funktioniert Thimble/Brackets/Firefox?

• Funktioniert Firefox dev tools? -> Raster Systeme

• -> CSS Grids Einführung

• -> Download der Übungen

• Thimble:
• 2-basic-grid
• 3-basic-grid-depth
• 4-basic-grid-collection
• 5-grid-implicid

• 5-grid-implicid-text

• Dokumentation aller CSS Grid funktionen: MDN Grid Layout

Hausaufgabe bis Workshop 3

CSS Grundlagen vertiefen, entweder mit dem interaktiven Tutorial auf Codecademy oder dem Videotutorial auf Lynda:

• Codecademy CSS
  • Alle Kapitel
• Lynda CSS
  • Davon: Kapitel 2 “CSS Core” & Kapitel 4 “Layout”
• Video Tutorial zu CSS Grids von Rachel Andrews: Link
• HTML mit realen Inhalten aus dem Design in Mainz Blog erstellen

Workshop 3 (20.11.2018)

• Layoutentwürfe besprechen
• Schulterblick: Wie Lief das Tutorial?
• Fragen/Probleme?
  • CSS Grid verstanden?
  • HTML Verstanden?
• Mobile Ansicht der “Bühne”
• Warum überhaupt Responsive?
  • -> CSS: Responsive
• Wer Kontrolliert die Webseite?
  • Gestalter <-> Redakteur <-> Rezipient
  • Gestalten von Systemen

• https://rachelandrew.co.uk/css/cheatsheets/box-alignment

• CSS Grid & Responsive Layout = Magic
  • -> Magic in Thimble anschauen
• CSS Grid: Named Lines
  • -> CSS Grid: Named Lines in Thimble
  • Tutorial zu Named Lines
  • MDN zu Named Lines
• Mit Echten Inhalten wird Alles Komplizierter
  • -> Thimble Design in Mainz
  • eigenes Raster anhand der Entwürfe definieren

This site is open source. Improve this page.