3 Tools to Level Up Your CSS Game
Writing CSS can be intimidating. Its syntax is deceptively simple, yet its power is mighty. Learn-to-code resources tend to point beginning developers to the CSS Zen Garden to demonstrate how CSS can be used to style identical HTML code in vastly different ways.
The Zen Garden is useful for illustrating the power of CSS, but if you’re a novice, it’s easy to get intimidated by the level of design sophistication on show in the Garden’s examples. Realistically, your first few forays into writing custom CSS are not going to result in anything so advanced.
Don’t let that deter you! Even the simplest of CSS styling can jazz up your app or website, and there are many free tools available for learning the basics. If you’re keen to try writing your own CSS— and perhaps eventually achieve Zen Garden-level skills — but don’t know where to start, here are a few handy resources.
Color Hunt
Adding color to your app is one of the easiest ways to make a big visual impact. If you’re feeling overwhelmed by the thought of infinite possible hues, try Color Hunt.
This free tool offers color palette inspiration, and conveniently provides the hexadecimal values for each shade. It doesn’t get any easier than copying and pasting artist-curated color schemes into your code.
Enjoy CSS
Almost too good to be true, Enjoy CSS is a CSS code generator that provides a user-friendly interface for mocking up styled HTML elements.
Simply select an element type, get immediate visual feedback as you adjust its style to your specifications, then click to generate bespoke code — tada! — that you can copy and paste into your own environment. After you snag that automatically generated code, take some time to consider what it’s doing. Which properties and values did the generator spit out, and what effect do they have on the HTML element(s) in question? Of course, the deeper your understanding of individual CSS properties, the less frequently you’ll need to rely on code generators!
MDN Web Docs Intro to Layout
MDN Web Docs isn’t the sexiest site on this list, but as you might expect, the guidelines you’ll find here are thorough and well-maintained. It’s my go-to resource for tackling trickier elements like grid boxes and flex boxes (and understanding how to determine which of them is appropriate to use in any given situation).
The documentation offers a detailed walk-through of a range of grid- and flex-box use cases, including bite-size code snippets and clear illustrations. If you’re attempting to write custom layout code for your app, this is a good place to start.
Happy coding!
