CSS - Layout
In diesem Kapitel
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