Austin Coding Academy - Day 2

Describe one thing you learned in class today.

Flex! Or, as it’s more commonly referred to in the dev world, Flexbox!

“The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).” css-tricks.com

Once I understood some basic properties of Flexbox, I quickly realized how it can be used to easily code pretty-much any overall layout idea I may have. While it is probably not the best display module for ALL instances, it can probably be used, one way or another, to achieve almost any type of page structure you can think of.

What are some of the “gotchas”/epiphanies you’ve had for writing efficient CSS?

A great characteristic of CSS is that, once you have created some basic styling parameters, it’s easy to copy and paste them across the board to give all the elements of your site a uniform styling. It is also easy to reuse display parameter such as flex-direction, align-items and justify content to replicate the same page layout across all pages and sections of your site.

However, while CSS is very intuitive and fairly simple for the average user to learn the basics of, it is almost guaranteed that any new CSS user will encounter instances where their CSS code is not displaying what they expect it to. Hands-on experimenting with different CSS parameters and changing their inputs is the best way to learn how CSS works. It’s important not to over-complicate things. Assess your code one step at a time, breaking things down to the most basic level possible.

There are some really great HTML and CSS tutorials on YouTube which can be really helpful for a new coder. Here is one of my favorite CSS tutorial videos: