Day 5 was about building a sort of flex panel gallery. The screen is split vertically into five panels that have an image background and a set of words in each panel spelling “Let’s Take It All In” across the center of the screen. When you click on any of the sections, it will expand with a sort of bouncing expand (bezier curve transitions) and open up and then another pair of words slides from the top and bottom revealing a different phrase in each panel.

As far as Javascript, there’s not much to it. We added an event listener for the click to toggle on a class and then an event listener for the CSS transition to end to trigger the additional class that makes the words slide in from the top and bottom.

The stuff I got to learn a bit more about today was CSS Flex which is pretty cool. It’s nice to be able to just tell the browser “hey, this thing should take up this many ‘units’ of space” and then the browser figures out how many units of space that have been requested and then splits the space up according to how many of units each thing needed. No concern of screen size or anything else is needed since the browser can take care of all of that.

I am liking that I’m getting to learn more CSS, or rather get exposed to some CSS that I’ve only messed with a little, or in some cases, not at all, but I wouldn’t mind digging a little deeper. I’ve long felt that my front end design skills are pretty lacking since I tend to focus more on the API and database side of web applications. Even with React, I tend more towards making things functional than making them look good. With these exercises, most of everything is already in place before starting and we’re just adding a few lines of code, be it Javascript or CSS, to make it come together into a working demo.

Fortunately, Wes Bos has a few free courses for those things too - for learning Flex box, and for CSS Grid. I also have to mention that I did go ahead yesterday and buy and sign up for all but one of Wes Bos’ courses. I plan on working through those (and all the other free ones) at some point, hopefully soon.

Onward to day 6!