Day 3: Seeing Like a Browser
Browsers see and understand things different from we are used to. They see in terms of boxes, they prefer to stack things, they need to be told how to put things side by side and so on. We learnt how to read the browser’s code today using devtools and CSS Zen Garden. Any website on the internet can become readable to us if we look enough!
Flexboxes are introduced and we played Flexbox Froggy to understand how to move things around in 2D space and how easy it is to rearrange things with just 3-4 CSS properties. This then became the foundation of our exercise sprint in the afternoon where we tackled a set of exercises in increasing levels of complexity.
The fundamentals of styling from yesterday and layouts from today will become the basis of our projects tomorrow.
Link to the Space Oddity exercise pack.
Misc.
- CSS Zen Garden - Useful for seeing how people use images, positioning, colors and text styles to style plain ol’ markup.