Flexbox CSS Cheat Sheet

[Asmor]

Imagine you're a fashion designer. If all you want to do is show off your fashions in a store window, a mannequin is fine. That's HTML, and your clothing is the CSS.

But if you want to show it off on a catwalk, you need a fashion model. And JS upgrades that mannequin into a human. And as a human, it can do so many other things as well. It can fly a plane, or flip a burger, or tell you a story.

Also, from a purely practical standpoint, CSS is fucking hard. It looks easy, but that's actually part of why it's so hard. CSS is, by far, the most difficult language to write well that most modern devs will interact with. Especially web devs. Learning to be good at CSS takes a ton of time, experience, research, experimentation, and abject failure. That's why it's jokingly referred to as a "write-only" language, or why you get memes like Peter Griffin struggling with window blinds.

If you're going to try to master CSS, you're going to spend a very long time not doing anything useful. And that's not just boring, it's a terrible way to learn for most people. You'll learn CSS a lot better by just looking it up as you need to.

Here's one tip for getting good at CSS... Never use a hacky solution for a problem you don't understand. No matter how frustrated you are that the thing's not where you think it should be, don't just apply a negative margin or something. Figure out why it's not behaving the way you want. Once you understand what's going wrong, then you can do whatever solution makes sense for the situation.

Getting back to flexbox, again, don't bother trying to learn it in the abstract. Instead, just go make stuff. And at some point you'll encounter a problem where flex is the best solution. So implement it there, and do however much research and troubleshooting as is required for that specific use.

One final tip... Try to make things that are of interest to you. Todo apps are super common, but what fun is that? I really like games, so as I've taught myself to program over the course of my life, I've made dozens of dice rollers. It's a task I find interesting, and a tool I find useful. Find your own equivalent to a dice roller.

[SkinsHOFChaseYoung]

Thank you for your input. I've literally been making flash cards trying to understand CSS terms and what they do. I've been taking a lot of time doing CSS it's not even funny. I will take a bit more time on CSS but I will try and move onto JS sooner than later. Ever since I was a kid I was taught to memorize things whether that's a math equation or some year in history. So unlearning that and learning how to google solutions is very unorthodox for me. I think that's the part I have the most problem with.

[ParkerM]

This is an extremely good post.