An Exercise in Modern HTML and CSS

Tue, 06/25/2019 - 05:53

When I began building websites the idea of viewing it on a mobile device wasn't thought of or even possible. If there was any thought given to various display resolutions it was mostly solved by adding percents to the containing columns of a table and nesting that table within a table set at a maximum width with the most common resolution. I think that was about 1024 x 768 but it might have even been 640 x 480.

By the time it started to become necessary to code websites for mobile devices most of the work I was doing was backend in PHP or hooking up features in Javascript. I was aware of using CSS to make websites mobile friendly but, it wasn't really on my radar as I didn't generally need to do it.

In recent years however, my career has on occasion pulled me more into a full-stack roll and it's become more necessary for me to utilize mobile capabilites when building pages. Unfortunately, while I am capable of building websites that function on multiple devices. The code tends to be a bit clunky, requires way to many media queries and still tends to break.

So, I began digging into Grid and Flex. I like Flex more than Grid. I am sure that both have their place but, Flex to me is intuitive. It's easy for me to visualize a structure and code it out and it doesn't take much effort to keep things looking good at multiple resolutions.

art direction for the web