Getting to d3.js: Grid
Continuing on this journey, next on the learning list was CSS Grid. Similar to Flexbox, Grid is a grid-based layout system, but is two dimensional as opposed to one dimensional, like Flexbox. That does not mean that Grid is more useful than Flexbox, they both have their use cases and actually work well together.
In addition to the Udemy course, I found this resource, A Complete Guide to CSS Grid by Chris House very useful and referenced it A LOT.
There weren’t a lot of practice exercises where I was actually building something in this section, but one very neat game put together by Thomas Park, that helped with practicing writing CSS grid was Grid Garden. The goal with this game was to write the appropriate code that allowed you to either water your carrots or poison weeds in your ‘grid’ garden.
Final Project: Mondrian Project
The final project for this section was to recreate a Mondrian painting. Piet Mondrian was a painter known for his grid style abstract art. Below is the goal and dimensions I was provided, my code, and also my output (I changed the colors cause why not). Enjoy!
Up Next: Bootstrap
