Stan's blog

12^th of February 2022 - Flexbox and grid

I've begun to learn all about flexbox and grid. Their ability to easily organise different elements and their children is a real asset. Understanding how they work and being able to use them efficiently will safe me a large amount of time when writing CSS. The main difference is that flexbox is aimed to be used as a one-dimensional tool whereas grid is a two-dimensional tool. Flexbox is great at organising the parent container and its children in a single line whereas grid is a for organising a parent and its children across the main and cross axis.

Transitions

Transitions are a way to make a webpage stand out. Their ability to alter how certain items change after being hovered or altered in any way is great. As a developer I'm able to control the element(s) that transition. The transitions can all be controlled via a single declaration:

transition: property duration timing-function delay

These are the basics for animations which can be built upon when I begin including them in regular developments.

Next Steps

I'll continue to learn about more CSS so that I move into having a more intermediate understanding to help me develop more complex webpages. I've also got to revisit the box model so that my basics are solid. If I can nail that then it will save me a large amount of time when styling basic components during development.