As a bootcamp graduate, rapidly picking up software development can be a difficult task. It is one challenge to learn each new tool and you develop increasingly complex applications. It’s a totally different challenge to maintain those skills as you learn different tools to complete the same task.

For me, this challenge has been most prevalent with CSS. While learning to code, I think it’s easy to feel like CSS isn’t the most important language. To be fair, the styling of your application won’t matter if you don’t know how to develop the application in the first place. While progressing through my bootcamp, I didn’t think a lot about CSS for my first project, as it was just a command-line app. Afterwards, I managed to pick up some of the basics, and play around with them for fun. However, as I took on more projects with tight deadlines, I always prioritized maximizing the features over developing a pleasant experience with CSS. This led to utilizing bootstrap in order to throw together a nav bar, cards, and other basic styling components in the final hours of development. While bootstrap has its advantages, I feel as though it enabled me to have a CSS crutch as I continued to develop all of my other skills.

My reliance on bootstrap got to the point where I dreaded the idea of even attempting to match the same styling in my own CSS. Thankfully, after I finished my bootcamp, I took the time to revisit CSS and bring that skill up to par with the others. That’s when I discovered Flexbox. Flexbox is a CSS3 layout mode that enables you to arrange items within a container with ease, in a clean and efficient way. It unlocks a lot of the advantages of bootstrap, and puts the control right in your hands.

Flexbox replaces the need for CSS floats, as well as simplifies child positioning, container responsiveness, and element ordering. This means flexbox is a great tool for developing mobile friendly applications, while taking a lot of the work out of your hands. Flexbox isn’t a shortcut though, its genuine CSS. Flexbox focuses on the ability to alter an items height and width to best fit in its containers available free space. It is direction-agnostic, so unlike the block model, which is vertically biased, and inline being horizontally bias, flexbox works for both. Flexbox is optimized for small-scale layouts, and CSS Grid would be the tool for large-scale layouts, but that’s for another blog.

#web-development #software-development #css #flatiron-school #coding