On day 3, which I did last week and am late writing this, I got to play with css variables!

Overview

Day 3 was all about manipulating the elements with variables. We used a base color that could change with a color picker, a blur effect, and spacing for our image. These variables were changed with inputs.

What I Learned

I’m almost embarrassed to say this because I have been using css for nearly 15 years, but I have never used css variables. It’s always been one of those things in the back of my mind that I need to learn them along with SCSS or LESS or something. That always seems to fall to the wayside for learning something else, usually with JS or a framework.

Logically I know that learning these tools will save me a ton of time and make my styling code so much cleaner. Mental block I need to put on my goals and dive in, I suppose. No harm in letting go of old ways that might not be best suited anymore.

Biggest Challenge

This lesson didn’t have a lot of great challenges in it. There wasn’t anything too complicated with the JavaScript, and I know CSS incredibly well. If I had to pinpoint a toughest part for this lesson, I would say it was my own typos getting in the way. We all have those days as developers, ammiright?

Future Iterations

I’d like to play with more variables in the future. Add more to the site or see what else I can manipulate. Change the fonts, etc.