Day ???: Flexbox

One of the most challenging things about my coding journey has been balancing it with everything else I have to do.

If I had my way, I’d spend all of my time coding and writing, but the reality is that I’m a single mom navigating a pandemic and launching a consultancy. While that last part gives me the flexibility I’ve desperately needed to continue on this journey, the first two parts are… whew.

Which means I sometimes have to step back from the progress I’ve been making. The frustration is high at times like that because consistency is in my bones and I want to maintain my flow or progress, but this period of life in particular is just not conducive to it.

That said, since my last post, between everything else happening, I’ve not been able to sit down and concentrate on doing anything much, but I have been reading.

Which is how I was able to spend this afternoon rebuilding my form’s layout with flexbox. I opened a new branch in my repository for this approach so I can maintain visibility on my progress.

The fact that I was able to redo so much in one afternoon (as opposed to all the tweaking I had to do to lay it out in the first place without flexbox and using float for the images) is a testament to how much easier this approach is to use. That it’s so responsive now even before I add media queries is impressive, too. In fact, I changed the layout a bit as well, since it was so much easier to move the images around.

I think I like the new layout better:

Frustration about review progress aside, I do not at all regret the time I’m taking to go over things I studied before because I really am understanding them on a much deeper level now. On that note, I based my refresh on css-tricks.com and Traversy Media‘s flexbox info and both were super helpful; the former for a reminder of how everything works and the latter for seeing it in action so I’d know how best to apply it to my project.

Tomorrow, I need to add much simpler media queries back in, re-enable my fixed header to see how well it plays with a flexbox layout and tweak the HTML on my submit page to suit the new CSS.

Then it’s on to Grid review (for which I intend to start a new practice project because I’m a bit tired of looking at that form) and… then I think I’m ready to dive head-first back into Javascript. Oh, how I missed thee, Javascript…

Leave a comment