On Sunday I started to build this component to play around with CSS Flexbox and work on before and after pseudo elements. You can check out the component here.

What I Learned

Despite knowing how flexbox works, things can still sometimes 'do what they want'. There is also math involved in styling status bars to make sure the status is at the right position when a limit is involved.

How This Will Help Me

Moving forward when I make components for my bigger apps, I want to consider how much each component would reflect something in real life and how that adds to the user interface.

Onto the next challenge!