Intro

Nachdem Sie nun einfache Formatierungen im CSS beherrschen lernen Sie, wie sie das Layout der ganzen Seite beeinflussen können.

Was Sie wissen sollten

Ich verstehe wie media queries, flexbox und css grid funktionieren.
Ich weiss wie verschiedene Auflösung und verschiedene Pixeldichte der Ausgabegeräte die Gestaltung von Webseiten schwierig machen.
Ich kenne mit Responsive Design die aktuelle Art mit dieser Schwierigkeit umzugehen.

Was Sie können sollten

Ich kann an einem bestehen CSS-Layout Veränderungen vornehmen.
Ich kann einen grafischen Entwurf mittels HTML und CSS, flexbos und grid umsetzen.
Ich kann ein statisches Layout mit mediaqueries so erweitern, dass die Webseite bei wesentlich kleineren oder größeren Ausgabegeräten noch sinnvoll dargestellt werden kann.

Vertiefung

learnlayout.com
CSS box model, float, position, flexbox, multi-column
Paul Irish (2012): Box-sizing Border-box FTW
Chris Coyier (2014): A Complete Guide to Flexbox
MDN: Using Multi Columns Layouts
Flexboxfroggy.com
FlexboxDefense.com
Marcotte(2011): Responsive Design
Responsive News(2013): Tables - Wie macht man Tabellen responsive? eine harte Nuss
Takada(2015): Learn CSS Layout the pedantic way