Using DevTools to understand modern CSS layouts Frontend
Chen Hui Jing is a self-taught designer and developer living in Singapore, with an inordinate love for CSS, as evidenced by her blog, that is mostly about CSS, and her tweets, which are largely about typography and the web. She used to play basketball full-time and launched her web career during downtime between training sessions.
Тезисы
Flexbox, Grid and Box Alignment are the cornerstones of modern CSS layouts. They introduce behaviours that might seem confusing if you don't completely understand how the browser inteprets the CSS values you assign, e.g. sizing with Flexbox, or the various options for sizing tracks in Grid.
DevTools may have started out as a debugging tool, but today, it can also aid in our understanding and visualisation of how the browser interprets various CSS values. This can help us reconcile the layouts we want to build with what is actually rendered on the page.
This talk will explain a variety of modern CSS layout techniques through live demonstrations using DevTools as the main form of delivery (as opposed to just talking over slides), and provide real-world use cases of how such techniques allow designs to better adapt across a broad range of viewports.
