Day 3 - Seeing and Searching

Day 3 was about training our eyes to see web pages differently and getting better at solving design problems. This was also when the first mini-project got underway. The main goal was learning to break down web pages into their basic building blocks - spotting the paragraphs, headings, and images, and figuring out how styling pulls everything together. Everyone also got to play around with the browser’s developer tools, tweaking values and watching pages change on the spot.

Two CSS properties got the spotlight: display: flex and float: right. Flexbox was practiced through a game called Flexbox Froggy, while we explored float was explored through live coding.

Both tools give us way more control over how our layouts look and feel. Onwards to Hans Christian Andersen!

Misc.

• CSS Zen Garden - Useful for seeing how people use images, positioning, colors and text styles to style plain ol’ markup.

Flexbox Learning

• Flexbox Froggy
• Interactive Flexbox Screencasts

Image Pools

• Old Book Illustrations
• Heritage Library
• Old Book Art
• The British Library’s Public Domain Image Collection (on Flickr)
• Public Domain Image Archive (by The Public Domain Review)
• Free Public Domain Illustrations on Flickr (by Rawpixel)
• The Library of Congress “Free to Use and Reuse Sets”
• Wikimedia Commons
• Metropolitan Museum of Art (Open Access)
• National Gallery of Art (Open Access)