Web Development

In diesem Kapitel

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

• CSS für Layout
• Responsive Design
• Navigationsmenü
• CSS Selektoren im Detail
• Details zu Layout

▻

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